import React, { useState, useEffect, useRef } from 'react';
import { Table, Modal, Select } from 'antd';
import * as echarts from 'echarts';
import styles from './report.less';
import { index } from '@antv/x6/lib/util/dom/elem';

function ProjectTable(props) {
  const { type, expandedTable, setMemberVisible } = props;

  const temp = [
    { index: 1, name: '项目A' },
    { index: 2, name: '项目B' },
    { index: 3, name: '项目C' },
  ];

  const column0 = [
    { title: '未提交', render: () => 0 },
    { title: '已提交', render: () => 0 },
    { title: '已审批', render: () => 0 },
    { title: '已拒绝', render: () => 0 },
    { title: '计入考核范围', render: () => 0 },
  ];

  const column1 = [
    { title: '序号', dataIndex: 'index' },
    {
      title: '项目名称',
      dataIndex: 'name',
      render: text => <a onClick={() => setMemberVisible(true)}>{text}</a>,
    },
    { title: '项目编号' },
    { title: '技术中心', children: column0 },
    { title: '招采中心', children: column0 },
    { title: '总计', render: () => 0 },
  ];

  const column2 = [
    { title: '序号', dataIndex: 'index' },
    Table.EXPAND_COLUMN,
    { title: '项目名称', dataIndex: 'name' },
    { title: '项目编号' },
    { title: '本月人日数', render: () => 0 },
    { title: '累计人日数', render: () => 0 },
    { title: '项目预算人日数', render: () => '未设置' },
  ];

  switch (type) {
    case 1:
      return (
        <Table
          columns={column1}
          dataSource={temp}
          pagination={false}
          rowKey="index"
          expandable={expandedTable ? { expandedRowRender: () => expandedTable } : null}
        />
      );
    case 2:
      return (
        <Table
          columns={column2}
          dataSource={temp}
          pagination={false}
          rowKey="index"
          expandable={expandedTable ? { expandedRowRender: () => expandedTable } : null}
        />
      );
  }
}

function ProjectManagerTable(props) {
  const { expandedTable } = props;
  const column = [
    { title: '序号', dataIndex: 'index' },
    { title: '项目经理', dataIndex: 'name' },
    Table.EXPAND_COLUMN,
    { title: '本月人日数', render: () => 0 },
    { title: '截止到目前为止的人日数', render: () => 0 },
    { title: '预算人日数', render: () => 0 },
  ];
  const temp = [
    { index: 1, name: '项目经理A' },
    { index: 2, name: '项目经理B' },
    { index: 3, name: '项目经理C' },
  ];
  return (
    <Table
      columns={column}
      dataSource={temp}
      pagination={false}
      rowKey="index"
      expandable={expandedTable ? { expandedRowRender: () => expandedTable } : null}
    />
  );
}

function ProjectTypeTable(props) {
  const { expandedTable } = props;

  const temp = [
    { type: '建设期项目管理人日' },
    { type: '运营期项目管理人日' },
    { type: '工程设计人日(设计联络、工艺、电气自控、机械、审核）' },
    { type: '培训人日' },
    { type: '金科陪客户培训人日' },
    { type: '运营期培训人日' },
    { type: '采购和质量控制人日' },
  ];

  const column = [
    { title: '分项工作代码', dataIndex: 'type' },
    { title: '本月人日数', render: () => 0 },
    { title: '累计人日数', render: () => 0 },
    { title: '项目预算人日数', render: () => <a>设置</a> },
  ];

  return (
    <Table
      columns={column}
      dataSource={temp}
      expandable={expandedTable ? { expandedRowRender: () => expandedTable } : null}
    />
  );
}

function MemberModal(props) {
  const { memberVisible, setMemberVisible } = props;

  const column = [
    { title: '序号', dataIndex: 'index' },
    { title: '员工名称', dataIndex: 'name' },
    { title: '归属部门' },
    { title: '未提交', render: () => 0 },
    { title: '已提交', render: () => 0 },
    { title: '已审批', render: () => 0 },
    { title: '已拒绝', render: () => 0 },
    { title: '小计', render: () => 0 },
  ];

  const temp = [
    { index: 1, name: '员工A' },
    { index: 2, name: '员工B' },
    { index: 3, name: '员工C' },
  ];

  return (
    <Modal visible={memberVisible} onCancel={() => setMemberVisible(false)} width="80%">
      <Table columns={column} dataSource={temp} pagination={false} />
    </Modal>
  );
}

function Demo(props) {
  const [memberVisible, setMemberVisible] = useState(false);

  var chartRef = useRef(null);

  const expandedRowRender = record => {
    switch (record.index) {
      case 1:
        return <ProjectTable type={1} setMemberVisible={setMemberVisible} />;
      case 2:
        return <ProjectTable type={2} expandedTable={<ProjectTypeTable />} />;
    }
  };

  const getData = value => {
    switch (value) {
      case 1:
        return [
          { value: 1048, name: '执行' },
          { value: 735, name: '售前' },
          { value: 580, name: '市场品牌' },
          { value: 484, name: '日常' },
          { value: 300, name: '标准化' },
          { value: 520, name: '研发' },
        ];
      case 2:
        return [
          { value: 345, name: '执行' },
          { value: 316, name: '售前' },
          { value: 650, name: '市场品牌' },
          { value: 484, name: '日常' },
          { value: 981, name: '标准化' },
          { value: 489, name: '研发' },
        ];
      case 3:
        return [
          { value: 987, name: '执行' },
          { value: 916, name: '售前' },
          { value: 354, name: '市场品牌' },
          { value: 451, name: '日常' },
          { value: 266, name: '标准化' },
          { value: 781, name: '研发' },
        ];
      case 4:
        return [
          { value: 519, name: '执行' },
          { value: 313, name: '售前' },
          { value: 974, name: '市场品牌' },
          { value: 597, name: '日常' },
          { value: 351, name: '标准化' },
          { value: 259, name: '研发' },
        ];
      case 5:
        return [
          { value: 149, name: '执行' },
          { value: 159, name: '售前' },
          { value: 245, name: '市场品牌' },
          { value: 518, name: '日常' },
          { value: 259, name: '标准化' },
          { value: 678, name: '研发' },
        ];
    }
  };

  const onSelect = value => {
    chartRef.current.setOption({ series: [{ data: getData(value) }] });
  };

  useEffect(() => {
    chartRef.current = echarts.init(document.getElementById('chart'));
    chartRef.current.setOption({
      tooltip: {
        trigger: 'item',
      },
      series: [
        {
          type: 'pie',
          radius: '70%',
          data: getData(1),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    });
  }, []);

  const temp = [
    { index: 1, type: '售前项目' },
    { index: 2, type: '执行项目' },
  ];
  const column0 = [
    { title: '未提交', render: () => 0 },
    { title: '已提交', render: () => 0 },
    { title: '已审批', render: () => 0 },
    { title: '已拒绝', render: () => 0 },
    { title: '计入考核范围', render: () => 0 },
  ];
  const column1 = [
    { title: '序号', dataIndex: 'index' },
    Table.EXPAND_COLUMN,
    { title: '人日类型', dataIndex: 'type' },
    { title: '技术中心', children: column0 },
    { title: '招采中心', children: column0 },
  ];
  const select = [
    { value: 1, key: '部门A' },
    { value: 2, key: '部门B' },
    { value: 3, key: '部门C' },
    { value: 4, key: '部门D' },
    { value: 5, key: '部门E' },
  ];
  return (
    <>
      <div>事业部总</div>
      <Table
        columns={column1}
        dataSource={temp}
        expandable={{
          expandedRowRender,
        }}
        rowKey="index"
        pagination={false}
      />

      <div>销售副总/执行副总</div>
      <ProjectManagerTable expandedTable={<ProjectTable type={2} />} />

      <div>销售项目经理</div>
      <ProjectTable type={2} />

      <div>执行项目经理</div>
      <ProjectTable type={2} expandedTable={<ProjectTypeTable />} />

      <Select style={{ width: '100px' }} defaultValue={1} onChange={onSelect}>
        {select.map(item => (
          <Select.Option value={item.value} key={item.value}>
            {item.key}
          </Select.Option>
        ))}
      </Select>
      <div id="chart" style={{ width: '600px', height: '600px' }}></div>
      <MemberModal memberVisible={memberVisible} setMemberVisible={setMemberVisible} />
    </>
  );
}

export default Demo;
