import {Button, Col, Form, Input, Radio, Row, Select, Space, Tag, Tree} from "antd";
import TableWithPagination from "../../components/assetmangement/table";
import Title from '../homepage/compontent/title'
import styles from './AssetDefined.less'
import {PlusOutlined, PushpinOutlined} from "@ant-design/icons";
const AssetDefined = () => {
// 数据源
    const dataSource = [
        {
            key: '1',
            id: 1,
            propertyName: '通信协议',
            type: 'enum',
            required: true,
            defaultValue: 'MQTT',
            enumValues: ['MQTT', 'COAP', 'HTTP'],
            description: '设备与平台的通信协议',
            validationRule: '',
            displayOrder: 1,
        },
        {
            key: '2',
            id: 2,
            propertyName: '供电电压',
            type: 'number',
            required: true,
            defaultValue: '12',
            enumValues: [],
            description: '设备供电电压，单位V',
            validationRule: '5-24',
            displayOrder: 2,
        },
        {
            key: '3',
            id: 3,
            propertyName: '设备型号',
            type: 'text',
            required: true,
            defaultValue: 'DS18B20',
            enumValues: [],
            description: '传感器的具体型号标识',
            validationRule: '',
            displayOrder: 3,
        },
        {
            key: '4',
            id: 4,
            propertyName: '支持无线',
            type: 'boolean',
            required: false,
            defaultValue: 'false',
            enumValues: [],
            description: '设备是否具备无线通信能力',
            validationRule: '',
            displayOrder: 4,
        },
        {
            key: '5',
            id: 5,
            propertyName: '软件版本号',
            type: 'text',
            required: true,
            defaultValue: 'V1.0',
            enumValues: [],
            description: '嵌入式固件的版本标识',
            validationRule: '^\\d+\\.\\d+$',
            displayOrder: 5,
        },
        {
            key: '6',
            id: 6,
            propertyName: '采样周期',
            type: 'number',
            required: true,
            defaultValue: '10',
            enumValues: [],
            description: '传感器数据采样间隔，单位秒',
            validationRule: '1-300',
            displayOrder: 6,
        },
        {
            key: '7',
            id: 7,
            propertyName: '安装位置',
            type: 'text',
            required: false,
            defaultValue: '',
            enumValues: [],
            description: '设备的物理安装位置(如车间A-01)',
            validationRule: '',
            displayOrder: 7,
        },
    ];
// 列配置
    const columns = [
        {
            title: '序号',
            dataIndex: 'id',
            key: 'id',
            width: 60,
            align: 'center',
        },
        {
            title: '属性名称',
            dataIndex: 'propertyName',
            key: 'propertyName',
            width: 100,
        },
        {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
            width: 80,
            render: (type) => {
                const typeMap = {
                    'enum': { text: '枚举', color: 'blue' },
                    'number': { text: '数值', color: 'green' },
                    'text': { text: '文本', color: 'orange' },
                    'boolean': { text: '布尔', color: 'purple' },
                };
                const typeInfo = typeMap[type] || { text: type, color: 'default' };
                return <Tag color={typeInfo.color}>{typeInfo.text}</Tag>;
            },
        },
        {
            title: '是否必填',
            dataIndex: 'required',
            key: 'required',
            width: 85,
            render: (required) => (
                <Tag color={required ? 'red' : 'green'}>
                    {required ? '是' : '否'}
                </Tag>
            ),
        },
        {
            title: '默认值',
            dataIndex: 'defaultValue',
            key: 'defaultValue',
            width: 100,
        },
        {
            title: '枚举值',
            dataIndex: 'enumValues',
            key: 'enumValues',
            width: 160,
            render: (values) => values.length > 0 ? values.join('、') : '-',
        },
        {
            title: '描述',
            dataIndex: 'description',
            key: 'description',
            width: 220,
        },
        {
            title: '验证规则',
            dataIndex: 'validationRule',
            key: 'validationRule',
            width: 100,
            render: (rule) => rule || '-',
        },
        {
            title: '显示顺序',
            dataIndex: 'displayOrder',
            key: 'displayOrder',
            width: 85,
            align: 'center',
        },
        {
            title: '操作',
            key: 'action',
            width: 180,
            fixed: 'right',
            align:'center',
            render: (_, record) => (
                <Space size="small">
                    <Button type="link" size="small" style={{ color: '#1890ff' }}>
                        编辑
                    </Button>
                    <Button type="link" size="small" style={{ color: '#52c41a' }}>
                        下载
                    </Button>
                    <Button type="link" size="small" danger>
                        删除
                    </Button>
                </Space>
            ),
        },
    ];

    const treeData=[
        {
        title:'硬件',
        key:'硬件',
        children:[
            {
                title: '传感器',
                key:'传感器',
                children:[
                    {
                        title:'温度传感器',
                        key:'温度传感器',
                        children:[
                            {
                                title: 'DS18B20',
                                key:'DS18B20'
                            },
                            {
                                title: 'SHT30',
                                key:'SHT30'
                            },
                        ]
                    },
                    {
                        title:'压力传感器',
                        key:'压力传感器',
                        children: [
                            {
                                title:'MPX570',
                                key:'MPX570'
                            }
                        ]
                    }
                ]
            },
            {
                title:'网关',
                key:'网关',
                children:[
                    {
                        title:'工业网关',
                        key:'工业网关',
                        children: [
                            {
                                title:'OW-200',
                                key:'OW-200',
                            }
                        ]
                    }
                ]
            },
            {
                title:'执行器',
                key:'执行器',
                children:[
                    {
                        title:'电磁阀',
                        key:'电磁阀',
                        children: [
                            {
                                title:'Ev-100',
                                key:'Ev-100'
                            }
                        ]
                    }
                ]
            }
        ]
        },
        {
            title:'软件',
            key:'软件',
            children:[
                {
                    title:'嵌入式程序',
                    key:'嵌入式程序',
                    children:[
                        {
                            title:'传感器固件',
                            key:'传感器固件',
                            children:[
                                {
                                    title:'FW-TempV1.0',
                                    key:'FW-TempV1.0',
                                }
                            ]
                        }
                    ]
                },
                {
                    title:'平台管理软件',
                    key:'平台管理软件',
                    children:[
                        {
                            title:'设备管理软件',
                            key:'设备管理软件',
                            children: [
                                {
                                    title:'V3.2',
                                    key:'V3.2',
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]

    return (
        <div style={{padding:'20px'}}>
            <Row gutter={20}>
                <Col span={5}>
                    <div style={{padding:'20px',backgroundColor:'#e7f2ee',height:'100%'}}>
                        <Title title={'资产模型'}></Title>
                        <Tree
                            treeData={treeData}
                            showLine={true}
                            defaultExpandAll
                            style={{backgroundColor:'#e7f2ee',paddingTop:'20px'}}
                            checkable={true}
                        />

                    </div>
                </Col>
                <Col span={19} style={{paddingBottom:'30px'}}>
                    <Title title={'单属性配置'}></Title>
                    <Form
                        layout="inline"
                        style={{
                            marginTop:'20px',
                            paddingBottom:'20px',
                            borderBottom:'1px solid #eeeeee'
                        }}
                    >
                        <Row gutter={[20,20]} >
                            <Col span={6}>
                                <Form.Item label="属性名称" name="name">
                                    <Input placeholder={'请输入'} style={{width:'200px'}}/>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label='属性类型' name='type'>
                                    <Select
                                        style={{width:'132px'}}
                                        defaultValue={'全部'}
                                        options={[
                                            {
                                                label: '全部',
                                                value: '全部',
                                            }
                                        ]}
                                    />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label='枚举值配置'>
                                    <Input placeholder={'请输入'} style={{width:'200px'}}></Input>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label={'是否必填'}>
                                    <Radio.Group
                                    >
                                        <Radio value="1">是</Radio>
                                        <Radio value="2">否</Radio>
                                    </Radio.Group>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label={'默认值'}>
                                    <Input placeholder={'请输入'} style={{width:'200px'}}/>
                                </Form.Item>
                            </Col>
                            <Col span={12} >
                                <Form.Item label={'描述'}>
                                    <Input placeholder={'请输入'} style={{width:'522px'}}/>
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item label={'显示顺序'}>
                                    <Input placeholder={'请输入'} style={{width:'200px'}}/>
                                </Form.Item>
                            </Col>


                        </Row>
                        <Row style={{marginTop:'20px',width:'100%'}} >
                            <Col span={12}>
                                <Form.Item label={'验证规则'}>
                                    <Input placeholder={'请输入'} style={{width:'200px'}}/>
                                </Form.Item>
                            </Col>
                            <Col span={12} style={{textAlign:'right'}}>
                                <Button icon={<svg width="13" height="13" viewBox="0 0 13 13" fill="none"
                                                   xmlns="http://www.w3.org/2000/svg">
                                                <path d="M5.90734 6.99734C6.05952 7.30875 5.83278 7.67188 5.48619 7.67188H1.40625C1.14736 7.67188 0.9375 7.88173 0.9375 8.14062V10.1719H12V8.14062C12 7.88173 11.7901 7.67188 11.5312 7.67188H7.48209C7.13717 7.67188 6.91038 7.31192 7.05927 7.00078L8.37405 4.25333C8.38031 4.23889 8.38739 4.22456 8.3953 4.21036C8.57581 3.88608 8.67188 3.52086 8.67188 3.14062C8.67188 1.92387 7.6855 0.9375 6.46875 0.9375C5.252 0.9375 4.26562 1.92387 4.26562 3.14062C4.26562 3.53387 4.36837 3.91103 4.56089 4.24325C4.57048 4.25979 4.57909 4.27687 4.58667 4.29442L5.90736 6.99734H5.90734ZM4.73545 6.73438L3.73755 4.69203C3.47066 4.22309 3.32812 3.69172 3.32812 3.14062C3.32812 1.40609 4.73422 0 6.46875 0C8.20328 0 9.60938 1.40609 9.60938 3.14062C9.60938 3.67473 9.4755 4.19047 9.224 4.64903L8.22606 6.73438H11.5312C12.3079 6.73438 12.9375 7.36397 12.9375 8.14062V10.6406C12.9375 10.8995 12.7276 11.1094 12.4688 11.1094H0.46875C0.209859 11.1094 0 10.8995 0 10.6406V8.14062C0 7.36397 0.629594 6.73438 1.40625 6.73438H4.73544H4.73545ZM0.46875 12.9297C0.209859 12.9297 0 12.7198 0 12.4609C0 12.202 0.209859 11.9922 0.46875 11.9922H12.4688C12.7276 11.9922 12.9375 12.202 12.9375 12.4609C12.9375 12.7198 12.7276 12.9297 12.4688 12.9297H0.46875Z" fill="white"/>
                                            </svg>
                                } className={styles['search-button']} style={{marginRight: '30px'}}>提交审核</Button>
                                <Button icon={<svg width="13" height="13" viewBox="0 0 13 13" fill="none"
                                                   xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M6.56446 0C4.9396 0 3.37972 0.65 2.20982 1.69L2.07983 0.65C2.07983 0.26 1.75486 5.08502e-08 1.36489 0.0650001C0.97492 0.0650001 0.714942 0.39 0.779936 0.78L0.909926 2.535C0.97492 3.38 1.68986 4.03 2.53479 4.03H2.66478L4.41964 3.9C4.80961 3.9 5.06959 3.575 5.00459 3.185C5.00459 2.795 4.67962 2.535 4.28965 2.6L2.98976 2.665C3.96468 1.82 5.19957 1.3 6.49947 1.3C9.35923 1.3 11.699 3.64 11.699 6.5C11.699 9.36 9.35923 11.7 6.49947 11.7C3.6397 11.7 1.29989 9.36 1.29989 6.5C1.29989 6.11 1.03992 5.85 0.649947 5.85C0.259979 5.85 -1.52331e-08 6.11 0 6.5C0 10.075 2.92476 13 6.49947 13C10.0742 13 12.9989 10.075 12.9989 6.5C13.0639 2.925 10.1392 -1.52344e-08 6.56446 0Z"
                                        fill="#006665"/>
                                </svg>
                                } className={styles['reset-button']}>重置</Button>
                            </Col>
                        </Row>
                    </Form>
                    <Row style={{marginTop: '20px'}}>
                        <Title title={'属性列表'}></Title>
                        <Row style={{width:'100%',marginTop:'20px'}}>
                            <Col span={18}>
                                <Button style={{marginRight:'30px'}} className={styles['search-button']}>批量导入属性</Button>
                                <Button style={{marginRight:'30px'}} className={styles['reset-button']}>导出模型属性</Button>
                                <Button style={{marginRight:'30px'}} className={styles['del-button']}>删除</Button>
                            </Col>
                            <Col span={6} style={{textAlign:'right'}}>
                                <Button icon={<PlusOutlined></PlusOutlined>} className={styles['search-button']}>下载属性模板</Button>
                            </Col>
                        </Row>
                    </Row>
                    <Row style={{width:'100%',marginTop:'20px'}}>
                        <TableWithPagination
                            columns={columns}
                            dataSource={dataSource}
                            tableStyle={{width: "100%"}}
                            paginationStyle={{textAlign: "right", marginTop: 16}}
                            rowKey="key"
                            rowSelection={{
                                onChange: (e) => {
                                    console.log(e)
                                }
                            }}
                        />
                    </Row>
                </Col>
            </Row>
        </div>
    )
}
export default AssetDefined;
