import React, { useState, useEffect } from 'react';
import {
  Modal,
  Form,
  Select,
  Radio,
  Checkbox,
  Input,
  Row,
  Col,
  Button,
  InputNumber,
  Tree,
} from 'antd';
import Icon from '@/tenants-ui/SgIcon';
import styles from './index.less';
import cx from 'classnames';
import { useModel } from 'umi';
import { EllipsisOutlined } from '@ant-design/icons';
import { ExclamationCircleOutlined } from '@ant-design/icons';

import moment from 'moment';

const AreaTree = ({
  checkSign,
  spaceMap,
  checkedValues,
  radioValue,
  setCheckedValues,
  setRadioValue,
}) => {
  const { initialState } = useModel('@@initialState');
  const [treeData, setTreeData] = useState([]);
  const [allSpaces, setAllSpaces] = useState([]);
  // const treeData = [
  //   {
  //     title: '',
  //     key: '0',
  //     children: [],
  //     level: 0,
  //   },
  //   {
  //     title: 'parent 1',
  //     key: '0-0',
  //     level: 0,
  //     children: [
  //       {
  //         title: 'parent 1-0',
  //         key: '0-0-0',
  //         level: 1,
  //         children: [
  //           {
  //             title: 'leaf',
  //             key: '0-0-0-0',
  //             level: 2,
  //           },
  //           {
  //             title: 'leaf2',
  //             key: '0-0-0-1',
  //             level: 2,
  //           },
  //         ],
  //       },
  //       {
  //         title: 'parent 1-1',
  //         key: '0-0-1',
  //         level: 1,
  //         children: [
  //           {
  //             title: 'leaf3',
  //             key: '0-0-1-0',
  //             level: 2,
  //           },
  //           {
  //             title: 'leaf4',
  //             key: '0-0-1-1',
  //             level: 2,
  //           },
  //         ],
  //       },
  //     ],
  //   },
  //   {
  //     title: 'parent 2',
  //     key: '0-1',
  //     level: 0,
  //     children: [
  //       {
  //         title: 'leaf5',
  //         key: '0-1-1',
  //         level: 1,
  //       },
  //       {
  //         title: 'leaf6',
  //         key: '0-1-2',
  //         level: 1,
  //       },
  //     ],
  //   },
  // ];
  //处理数据 转成tree显示数据
  useEffect(() => {
    let allSpacesTemp = ['special'];
    let treeDataTemp = [
      {
        title: '',
        key: 'special',
        children: [],
        level: 0,
      },
    ];
    for (let skey in spaceMap) {
      var sval = spaceMap[skey] || [];
      var node = { title: skey, key: sval[0]?.floorId, level: 0 };
      var children = sval.map((sitem) => {
        var cnode = {
          title: sitem.spaceName,
          key: sitem.spaceId,
          level: 1,
          ...sitem,
        };
        allSpacesTemp.push(sitem.spaceId);
        return cnode;
      });
      node.children = children;
      treeDataTemp.push(node);
    }
    setAllSpaces(allSpacesTemp);
    setTreeData(treeDataTemp);
  }, [spaceMap]);

  const renderNode = (nodeData) => {
    return (
      <div className={styles.treeTitle}>
        <div style={{ width: 210 - 24 * nodeData.level + 'px' }}> {nodeData.title}</div>
        <div className={styles.residentSpan}>
          <Radio
            value={nodeData.key}
            disabled={checkSign == 'check'}
            // checked={nodeData.radioChecked}
          >
            {nodeData.key == 'special' ? '不选择' : ''}
          </Radio>
        </div>
        <div className={styles.controlSpan}>
          <Checkbox disabled={checkSign == 'check'} value={nodeData.key} onChange={onOneChange}>
            {nodeData.key == 'special' ? '全选' : ''}
          </Checkbox>
        </div>
      </div>
    );
  };

  const onOneChange = (event) => {
    // debugger;
    // event.target.value  event.target.checked
  };
  const onRadioChange = (event) => {
    var value = event.target.value;
    setRadioValue(event.target.value);
    var index = checkedValues.findIndex((ele) => ele === value);
    if (index == -1) {
      checkedValues.push(value);
    }
    setCheckedValues(checkedValues);
  };
  const onCheckboxChange = (values) => {
    debugger;
    var lastValue = values[values.length - 1];
    if (lastValue == 'special') {
      //全选选中
      setCheckedValues(allSpaces);
      return;
    }
    if (checkedValues.includes('special') && !values.includes('special')) {
      //全选取消
      setCheckedValues([]);
      return;
    }
    setCheckedValues(values);
  };

  const debounceHandle = (event) => {};
  return (
    <>
      <div className={styles.workArea}>
        <Input
          placeholder="搜索工区"
          onChange={(e) => debounceHandle(e)}
          prefix={<Icon type="search" weight={600} style={{ color: '#c4c4c4' }} />}
        />
        <div className={cx(styles.treeTitle, styles.areaHeader)}>
          <div className={styles.titleSpan}>工区</div>
          <div className={styles.residentSpan}>常驻工区选择</div>
          <div className={styles.controlSpan}>可控工区选择</div>
        </div>
        <Checkbox.Group onChange={onCheckboxChange} value={checkedValues}>
          <Radio.Group onChange={onRadioChange} value={radioValue}>
            <Tree
              height={310}
              defaultExpandedKeys={['0-0-0']}
              selectable={false}
              treeData={treeData}
              titleRender={(nodeData) => {
                if (nodeData.children && nodeData.children.length) {
                  return <div className={styles.treeTitle}>{nodeData.title}</div>;
                } else {
                  return renderNode(nodeData);
                }
              }}
            />
          </Radio.Group>
        </Checkbox.Group>
      </div>
    </>
  );
};

export default AreaTree;
