import React, { useState, useEffect } from 'react';
import { Card, TreeSelect, Space, Button, Table, Input, Row, Col } from 'antd';
import PageContainer from '@/components/BasePageContainer';
import { connect } from 'react-redux';
import TestModal from './ModalComponent';
import ListCard from './ListCard';
import { get, post, CITY_SERVICE } from '../../services';
import { orgGet, orgTest } from '../../services/orgnazation/api';
import styles from './DefaultComponent.less';
const { Search } = Input;
const { TreeNode } = TreeSelect;
// const treeData = [
//   {
//     title: 'Node1',
//     value: '0-0',
//     children: [
//       {
//         title: 'Child Node1',
//         value: '0-0-1',
//       },
//       {
//         title: 'Child Node2',
//         value: '0-0-2',
//       },
//     ],
//   },
//   {
//     title: 'Node2',
//     value: '0-1',
//   },
// ];

const DefaultComponent = () => {
  const [treeValue, setTreeValue] = useState(null); // 树节点选中的值
  const [tableData, setTableData] = useState([]); // table的值
  const [selectedRowKeys, setSelectedRowKeys] = useState([]); // table表格checkbox配置
  const [modalVisible, setModalVisible] = useState(false); // 展示Modal弹窗
  const [testPeoList, setTestPeoList] = useState([]); // 测试card数组
  const [treeData, setTreeData] = useState([]);
  // 树节点选中的值
  const treeChange = e => {
    setTreeValue(e);
  };
  // 用户搜索
  const handleSearch = () => {
    console.log('handleSearch');
    setModalVisible(true);
  };
  // 导入
  const handleImport = () => {
    setModalVisible(true);
  };
  // 搜索框时间
  const inputSearch = e => {
    console.log(e, 'inputSearch');
  };
  const columns = [
    {
      title: '用户ID',
      dataIndex: 'userID',
      key: 'userID',
    },
    {
      title: '登录名',
      dataIndex: 'loginName',
      key: 'loginName',
    },
    {
      title: '用户姓名',
      dataIndex: 'userName',
      key: 'userName',
    },
    {
      title: '手机号码',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '钉钉账户',
      dataIndex: 'ddid',
      key: 'ddid',
    },
    {
      title: '微信账户',
      dataIndex: 'wxid',
      key: 'wxid',
      ellipsis: true,
    },
  ];
  useEffect(() => {
    orgGet().then(res => {
      console.log(res, 'orgGet');
      if (res) {
        let arr = transTree(res);
        console.log(transTree(res), 'arr');
        setTreeData(arr);
      }
    });
  }, []);
  // 处理返回的树形结构
  const transTree = (value, isChild = false) => {
    let arr = value;
    if (arr.length < 0) {
      return;
    }
    let obj = {};
    return arr.map(item => {
      if (isChild) {
        item.title = item.userName;
        item.value = item.userID;
      } else {
        item.title = item.text;
        item.value = item.id;
      }

      if (item.children && item.children.length > 0) {
        transTree(item.children, false);
        return (obj = item);
      }
      return item;
    });
  };
  useEffect(() => {
    get('${CITY_SERVICE}/OMS.svc/U_GetOneOUUserListNew', {
      OUID: 24,
      _version: 9999,
      _dc: new Date().getTime(),
    }).then(res => {
      if (res.success) {
        setTableData(res.root);
      }
    });
    const testData = [];
    const test2list = [];
    for (let i = 1; i < 10; i++) {
      testData.push({
        key: i,
        ID: i,
      });
      test2list.push({
        label: `${i}测试`,
        value: `${i}测试`,
      });
    }
    console.log(test2list);

    setTestPeoList(test2list);
  }, []);
  // table选中框的值
  const selectChange = e => {
    console.log(e, 'e');
    setSelectedRowKeys(e);
  };
  const confirmModal = () => {
    setModalVisible(false);
  };
  // table复选的配置
  const rowSelection = {
    selectedRowKeys,
    onChange: selectChange,
  };
  const btnLable = [
    {
      label: '查找用户',
      handle: handleSearch,
      config: { type: 'primary', danger: true },
    },
    { label: '用户导入', handle: handleImport, config: { type: 'info' } },
  ];

  return (
    <>
      <PageContainer>
        <Card>
          <Row>
            <Col span={1}>
              <div style={{ height: '30px', lineHeight: '30px' }}>机构选择</div>
            </Col>
            <Col span={12}>
              <TreeSelect
                style={{ width: '50%' }}
                treeData={treeData}
                value={treeValue}
                onChange={e => {
                  treeChange(e);
                }}
              />
            </Col>
            <Col span={8} />
          </Row>
          <div style={{ marginTop: '20px', textAlign: 'center' }}>
            <Space>
              {btnLable &&
                btnLable.map((item, index) => {
                  const { config } = item;
                  return (
                    <Button
                      key={index}
                      {...config}
                      onClick={() => {
                        item.handle &&
                          typeof item.handle === 'function' &&
                          item.handle();
                      }}
                    >
                      {item.label}
                    </Button>
                  );
                })}
            </Space>
          </div>
          <TestModal
            title="用户选择"
            visible={modalVisible}
            maskClosable
            onOk={() => confirmModal()}
            onCancel={() => setModalVisible(false)}
            bodyStyle={{ width: '100%', height: '100%' }}
            style={{ top: 20 }}
            width="1000px"
            destroyOnClose
            cancelText="取消"
            okText="确认选择"
          >
            <ListCard optionsList={testPeoList} />
          </TestModal>
        </Card>
        <Card className={styles.mgTop20}>
          <div classNam={styles.tableTitle}>一般用户的用户列表</div>
          <Table
            className={styles.mgTop20}
            rowSelection={rowSelection}
            columns={columns}
            dataSource={tableData}
            bordered
            rowKey="userID"
            scroll={{ y: 400 }}
          />
        </Card>
      </PageContainer>
    </>
  );
};

export default connect()(DefaultComponent);
