import {Cascader,Input, Toast} from "antd-mobile";
import React, {useState} from "react";
import {
    Form,
} from 'antd-mobile'
const options = [
    {
        label: '浙江',
        value: '浙江',
        children: [
            {
                label: '杭州',
                value: '杭州',
                children: [
                    {
                        label: '西湖区',
                        value: '西湖区',
                    },
                    {
                        label: '上城区',
                        value: '上城区',
                    },
                    {
                        label: '余杭区',
                        value: '余杭区',
                        disabled: true,
                    },
                ],
            },
            {
                label: '温州',
                value: '温州',
                children: [
                    {
                        label: '鹿城区',
                        value: '鹿城区',
                    },
                    {
                        label: '龙湾区',
                        value: '龙湾区',
                        disabled: true,
                    },
                    {
                        label: '瓯海区',
                        value: '瓯海区',
                    },
                ],
            },
            {
                label: '宁波',
                value: '宁波',
                children: [
                    {
                        label: '海曙区',
                        value: '海曙区',
                    },
                    {
                        label: '江北区',
                        value: '江北区',
                    },
                    {
                        label: '镇海区',
                        value: '镇海区',
                    },
                ],
            },
        ],
    },
    {
        label: '安徽',
        value: '安徽',
        children: [
            {
                label: '合肥',
                value: '合肥',
                children: [
                    {
                        label: '包河区',
                        value: '包河区',
                    },
                    {
                        label: '蜀山区',
                        value: '蜀山区',
                    },
                    {
                        label: '瑶海区',
                        value: '瑶海区',
                    },
                ],
            },
            {
                label: '芜湖',
                value: '芜湖',
                children: [
                    {
                        label: '镜湖区',
                        value: '镜湖区',
                    },
                    {
                        label: '弋江区',
                        value: '弋江区',
                    },
                    {
                        label: '湾沚区',
                        value: '湾沚区',
                    },
                ],
            },
        ],
    },
    {
        label: '江苏',
        value: '江苏',
        children: [
            {
                label: '南京',
                value: '南京',
                children: [
                    {
                        label: '玄武区',
                        value: '玄武区',
                    },
                    {
                        label: '秦淮区',
                        value: '秦淮区',
                    },
                    {
                        label: '建邺区',
                        value: '建邺区',
                    },
                ],
            },
            {
                label: '苏州',
                value: '苏州',
                children: [
                    {
                        label: '虎丘区',
                        value: '虎丘区',
                    },
                    {
                        label: '吴中区',
                        value: '吴中区',
                    },
                    {
                        label: '相城区',
                        value: '相城区',
                    },
                ],
            },
        ],
    },
]


const ParentTask = ()=>{
    const [parentValue, setParentValue] = useState("")
    const [visible, setVisible] = useState(false)
    return <Form.Item
        name='pid'
        label='主线任务'
        onClick={() => {
            setVisible(true)
        }}
    >
        <Cascader
            options={options}
            visible={visible}
            onClose={() => {
                setVisible(false)
            }}
            value={parentValue}
            onConfirm={setParentValue}
            onSelect={(val, extend) => {
                console.log('onSelect', val, extend.items)
            }}
        >
            {items => {
                if (items.every(item => item === null)) {
                    return <span style={{color:"#cccccc"}}>主线任务选线</span>
                } else {
                    return items.map(item => item?.label ??
                        <span style={{color: "#cccccc"}}>主线任务选线</span>).join('-')
                }
            }}
        </Cascader>
    </Form.Item>
    // const [parentValue, setParentValue] = useState("")
    // return <Form.Item
    //     name='name'
    //     label='主线任务'
    //     onClick={async () => {
    //         const value = await Cascader.prompt({
    //             options: options,
    //             placeholder: '请选择',
    //         })
    //         Toast.show(
    //             value ? `你选择了 ${value.join(' - ')}` : '你没有进行选择'
    //         )
    //         if (value){
    //             setParentValue(value.join(' - '))
    //         }
    //     }}
    // >
    //     <Input
    //         defaultValue={parentValue}
    //            value={parentValue}
    //            readOnly={true}
    //            placeholder='主线任务名称选填'>
    //         {parentValue}
    //     </Input>
    // </Form.Item>
}
export default ParentTask;