import React, { useState, useEffect } from 'react';
import { Modal, Table } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import { set } from 'lodash';

function DepCompareModal(props) {
  const {
    dispatch,
    visible,
    onOk,
    onCancel,
    depCompare,
    depUserProject,
    depUser,
    filter,
    loading,
  } = props;
  const [userVisible, setUserVisible] = useState(false);
  //本部门
  const columns = [
    { title: '用户名称', dataIndex: 'c_name' },
    { title: '员工号', dataIndex: 'user_name' },
    { title: '执行项目人日', dataIndex: 'type_project_cnt' },
    { title: '售前支持', dataIndex: 'type_sale_cnt' },
    { title: '市场品牌', dataIndex: 'type_market_cnt' },
    { title: '日常', dataIndex: 'type_normal_cnt' },
    { title: '标准化', dataIndex: 'type_standardize_cnt' },
    { title: '研发', dataIndex: 'type_rd_cnt' },
    // { title: '漏填工时', dataIndex: 'type_lost_cnt' },
    { title: '应填报总工时', dataIndex: 'total_cnt' },
    {
      title: '有效利用率',
      dataIndex: 'usage_percent',
      render: (percent = 0) => (percent * 100).toFixed(2) + '%',
    },
  ];
  // 其他部门
  const columnsDep = [
    {
      width: 350,
      render: record =>
        // record.dep_name || <a onClick={() => onClickUser(record)}>{record.c_name}</a>,
        record.dep_name || record.c_name,
    },
    { title: '执行项目', dataIndex: 'type_project_cnt' },
    { title: '售前项目', dataIndex: 'type_sale_cnt' },
    { title: '研发项目', dataIndex: 'type_rd_cnt' },
    { title: '运营项目', dataIndex: 'type_opt_cnt' },
    { title: '质保项目', dataIndex: 'type_wty_cnt' },
    { title: '总计', dataIndex: 'total_cnt' },
  ];
  const columnsUser = [
    { title: '项目名称', dataIndex: 'project_name' },
    { title: '总工时', dataIndex: 'total_cnt' },
  ];

  const onChangePage = pagination => {
    dispatch({
      type: 'report/queryUserReport',
      payload: {
        ...filter,
        currentPage: pagination.current,
      },
    });
  };

  const onExpand = (expanded, record) => {
    if (expanded && !record.isLoad) {
      dispatch({
        type: 'report/queryDepCompareUser',
        payload: {
          s_time: filter.s_time,
          e_time: filter.e_time,
          project_dep_id: filter.dep_id,
          record: record,
        },
      });
    }
  };

  const onClickUser = user => {
    dispatch({
      type: 'report/queryDepUserProject',
      payload: {
        s_time: filter.s_time,
        e_time: filter.e_time,
        project_dep_id: filter.dep_id,
        dep_id: user.dep_id,
        user_id: user.user_id,
      },
    });
    setUserVisible(true);
  };

  useEffect(() => {
    if (!filter?.dep_id) return;
    dispatch({
      type: 'report/queryUserReport',
      payload: filter,
    });
    // dispatch({
    //   type: 'report/queryDepCompare',
    //   payload: filter,
    // });
  }, [filter]);

  return (
    <>
      <Modal
        title="部门对账单"
        width="80%"
        visible={visible}
        onCancel={onCancel}
        footer={false}
        destroyOnClose
      >
        <Table
          title={() => '本部门工时详情'}
          columns={columns}
          loading={loading}
          dataSource={depUser.list}
          pagination={depUser.pagination}
          onChange={onChangePage}
        ></Table>
        {/* <Table
          title={() => '本部门在所属项目下产生的工时'}
          columns={columns}
          loading={loading}
          dataSource={depCompare.length == 0 ? [] : [depCompare[0]]}
          rowKey="key"
          childrenColumnName="child"
          pagination={false}
          onExpand={onExpand}
        /> */}
        {/* {depCompare.length > 0 && (
          <Table
            title={() => '其他部门在所属项目下产生的工时'}
            columns={columnsDep}
            loading={loading}
            dataSource={depCompare}
            rowKey="key"
            childrenColumnName="child"
            pagination={false}
            onExpand={onExpand}
          />
        )} */}
      </Modal>

      {/* <Modal
        title="用户详情"
        width="80%"
        visible={userVisible}
        onCancel={() => setUserVisible(false)}
        footer={false}
        destroyOnClose
      >
        <Table
          columns={columnsUser}
          loading={loading}
          dataSource={depUserProject}
          pagination={false}
          rowKey="project_name"
        ></Table>
      </Modal> */}
    </>
  );
}

export default connect(({ report, loading }) => ({
  depCompare: report.depCompare,
  depUserProject: report.depUserProject,
  depUser: report.depUser,
  loading: loading.models.report,
}))(DepCompareModal);