import React, { useMemo, useState } from 'react';
import { Select, Tree } from 'antd';
import styles from './BasicAttribute.less';
import { ReactComponent as Icon1 } from '@/assets/business_basic/icon1.svg';
import { ReactComponent as Icon2 } from '@/assets/business_basic/icon2.svg';

const buildingOptions = [
    { label: '工厂建筑', value: 'plant' },
    
    { label: '仓储设施', value: 'warehouse' },
];

const factoryOptions = [
    { label: '全部工厂', value: 'all' },
    { label: '上海油库', value: 'shanghai' },
    { label: '南京油库', value: 'nanjing' },
];

const rawTreeData = [
    {
        title: '上海油库',
        key: 'shanghai',
        tag: { label: '工厂', type: 'depot' },
        children: [
            {
                title: '汽油罐区',
                key: 'gasoline-area',
                tag: { label: '罐区', type: 'area' },
                children: [
                    {
                        title: '汽油调合罐组',
                        key: 'blend-group',
                        tag: { label: '罐组', type: 'group' },
                        children: [
                            {
                                title: 'T-101 汽油储罐',
                                key: 't101',
                                tag: { label: '储罐', type: 'tank' },
                                children: [
                                    {
                                        title: 'LT-101 液位变送器',
                                        key: 'lt101',
                                        tag: { label: '测点', type: 'sensor' },
                                    },
                                    {
                                        title: 'TT-101 温度变送器',
                                        key: 'tt101',
                                        tag: { label: '测点', type: 'sensor' },
                                    },
                                    {
                                        title: 'PT-101 压力变送器',
                                        key: 'pt101',
                                        tag: { label: '测点', type: 'sensor' },
                                    },
                                    {
                                        title: 'P-101A 输送泵',
                                        key: 'p101a',
                                        tag: { label: '设备', type: 'device' },
                                    },
                                    {
                                        title: 'P-101B 输送泵',
                                        key: 'p101b',
                                        tag: { label: '设备', type: 'device' },
                                    },
                                    {
                                        title: 'SP-101 密度计',
                                        key: 'sp101',
                                        tag: { label: '测点', type: 'sensor' },
                                    },
                                ],
                            },
                            {
                                title: 'T-102 汽油储罐',
                                key: 't102',
                                tag: { label: '储罐', type: 'tank' },
                            },
                            {
                                title: 'T-103 汽油储罐',
                                key: 't103',
                                tag: { label: '储罐', type: 'tank' },
                            },
                        ],
                    },
                ],
            },
            {
                title: '柴油罐区',
                key: 'diesel-area',
                tag: { label: '罐区', type: 'area' },
            },
            {
                title: '化危品库',
                key: 'hazard',
                tag: { label: '库区', type: 'depot' },
            },
        ],
    },
];

const TreeNodeTitle = ({ text, tag }) => (
    <span className={styles.treeNodeTitle}>
        <span className={styles.nodeText}>{text}</span>
        {tag ? (
            <span className={`${styles.nodeTag} ${styles[`tag-${tag.type}`] || ''}`}>
                {tag.label}
            </span>
        ) : null}
    </span>
);

const formatTreeNodes = data =>
    data.map(item => ({
        key: item.key,
        title: <TreeNodeTitle text={item.title} tag={item.tag} />,
        children: item.children ? formatTreeNodes(item.children) : undefined,
    }));

const infoCards = [
    {
        title: '基本信息',
        items: [
            { label: '储罐编号', value: 'T-101' },
            { label: '设备名称', value: '汽油储罐' },
            { label: '所属园区', value: '汽油罐区' },
            { label: '所属罐组', value: '汽油调合罐组' },
            { label: '用途类型', value: '常规罐' },
            { label: '投用日期', value: '2020-05-18' },
            { label: '状态', value: '在用' },
        ],
    },
    {
        title: '结构参数',
        items: [
            { label: '几何容量', value: '5000 m³' },
            { label: '安全液位', value: '90%' },
            { label: '紧急高液位', value: '95%' },
            { label: '紧急低液位', value: '5%' },
            { label: '罐底留存量', value: '50 m³' },
            { label: '容积表 ID', value: 'VOL-T-101-2020' },
            { label: '罐顶类型', value: '浮顶' },
        ],
    },
    {
        title: '设备属性',
        items: [
            { label: '材质', value: 'Q235B 碳钢' },
            { label: '设计压力', value: '0.6 MPa' },
            { label: '设计温度', value: '-10 ~ 60 ℃' },
            { label: '直径', value: '22 m' },
            { label: '高度', value: '13.5 m' },
            { label: '防腐等级', value: 'C4' },
        ],
    },
    {
        title: '关联信息',
        items: [
            { label: '进油管线', value: ['P-1010', 'P-1011'], type: 'tags' },
            { label: '出油管线', value: ['P-1020', 'P-1021', 'P-1022'], type: 'tags' },
            { label: '配套泵', value: ['P-101A', 'P-101B'], type: 'tags' },
            { label: '测量点', value: ['SP-101'], type: 'tags' },
            { label: '安全联锁', value: ['高液位联锁关闭进口阀'], type: 'tags' },
        ],
    },
];

const BasicAttribute = () => {
    const [buildingType, setBuildingType] = useState('plant');
    const [factory, setFactory] = useState('all');
    const [selectedKeys, setSelectedKeys] = useState(['t101']);
    const [checkedKeys, setCheckedKeys] = useState(['t101']);

    const treeData = useMemo(() => formatTreeNodes(rawTreeData), []);

    return (
        <div className={styles.container}>
            <section className={styles.leftPanel}>
                <div className={styles.blockHeader}>
                    <span className={styles.titleIcon} />
                    <span className={styles.blockTitle}>工厂层级结构</span>
                </div>
                <div className={styles.filters}>
                    <Select
                        value={buildingType}
                        onChange={setBuildingType}
                        options={buildingOptions}
                        className={styles.filterSelect}
                        dropdownMatchSelectWidth={false}
                        size="small"
                    />
                    <Select
                        value={factory}
                        onChange={setFactory}
                        options={factoryOptions}
                        className={styles.filterSelect}
                        dropdownMatchSelectWidth={false}
                        size="small"
                    />
                </div>
                <div className={styles.treeWrapper}>
                    <Tree
                        showIcon={false}
                        showLine={{ showLeafIcon: false }}
                        defaultExpandAll
                        checkable
                        selectable
                        treeData={treeData}
                        checkedKeys={checkedKeys}
                        selectedKeys={selectedKeys}
                        onCheck={keys => setCheckedKeys(keys.checked || keys)}
                        onSelect={keys => setSelectedKeys(keys)}
                        className={styles.tree}
                        virtual={false}
                        // switcherIcon={<img src={icon1} alt="icon1" />}
                        switcherIcon={nodeProps =>{
                            // if (!nodeProps.children || nodeProps.children.length ===0){
                            //     return null;
                            // }
                            return nodeProps.expanded ? (
                                <Icon2 width={14} height={14} />
                            ) : (
                                <Icon1 width={14} height={14} />
                            );
                        }}
                    />
                </div>
            </section>

            <section className={styles.rightPanel}>
                <div className={styles.blockHeader}>
                    <span className={styles.titleIcon} />
                    <span className={styles.blockTitle}>基本属性</span>
                </div>
                <div className={styles.infoGrid}>
                    {infoCards.map(card => (
                        <div className={styles.infoCard} key={card.title}>
                            <div className={styles.cardTitle}>{card.title}</div>
                            <div className={styles.cardBody}>
                                {card.items.map(item => (
                                    <div className={styles.itemRow} key={`${card.title}-${item.label}`}>
                                        <span className={styles.itemLabel}>{item.label}</span>
                                        <span className={styles.itemValue}>
                                            {item.type === 'tags' && Array.isArray(item.value) ? (
                                                <span className={styles.tagList}>
                                                    {item.value.map(tag => (
                                                        <span className={styles.tag} key={tag}>
                                                            {tag}
                                                        </span>
                                                    ))}
                                                </span>
                                            ) : (
                                                item.value
                                            )}
                                        </span>
                                    </div>
                                ))}
                            </div>
                        </div>
                    ))}
                </div>
            </section>
        </div>
    );
};

export default BasicAttribute;

