import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'dva';
import { Form, Table, DatePicker, Input, Button } from 'antd';
import styles from './report.less';
import UserRptModal from './UserRptModal';
import DepCompareModal from './DepCompareModal';
import moment from 'moment';
import { downloadFile, getToken } from '@/utils/utils.js';

const { RangePicker } = DatePicker;

function Department(props) {
  const { dispatch, loading, dep } = props;
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const [modalFilter, setModalFilter] = useState({});
  const columns = [
    {
      title: '部门名称',
      // render: record => <a onClick={() => showUserModal(record)}>{record.dep_name}</a>,
      render: record => <a onClick={() => showDepCompare(record)}>{record.dep_name}</a>,
    },
    {
      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 => (percent * 100).toFixed(2) + '%',
    },
    // {
    //   title: '付费工时数',
    //   dataIndex: 'pay_workload_cnt',
    // },
    // {
    //   title: '付费工时率',
    //   dataIndex: 'pay_workload_percent',
    //   render: percent => (percent * 100).toFixed(2) + '%',
    // },
  ];
  const filterRef = useRef({ pageSize: 99999 });
  const handleSearch = () => {
    const { time } = form.getFieldsValue();
    filterRef.current.s_time = time[0] ? moment(time[0]).format('YYYY-MM-DD') : null;
    filterRef.current.e_time = time[1] ? moment(time[1]).format('YYYY-MM-DD') : null;

    dispatch({
      type: 'report/queryDepReport',
      payload: {
        filter: filterRef.current,
      },
    });
  };
  const handleDownload = () => {
    const token = getToken();
    const s_time = !filterRef.current.s_time ? '' : filterRef.current.s_time;
    const e_time = !filterRef.current.e_time ? '' : filterRef.current.e_time;
    downloadFile(
      `/api/v2/workload/rpt/dep/export2excel?JWT-TOKEN=${token}&s_time=${s_time}&e_time=${e_time}`,
      `项目报表${moment().format('YYYYMMDDHHMMSS')}.xlsx`
    );
  };
  const renderSearch = () => {
    return (
      <Form layout="inline" form={form}>
        <Form.Item label="时间" name="time" initialValue={[moment().startOf('years'), moment()]}>
          <RangePicker placeholder="选择时间" allowClear={false} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" loading={loading} onClick={handleSearch}>
            查询
          </Button>
        </Form.Item>
      </Form>
    );
  };
  const onExpand = (expanded, record) => {
    if (expanded && !record.isLoad) {
      dispatch({
        type: 'report/queryDepReport',
        payload: {
          filter: filterRef.current,
          record: record,
        },
      });
    }
  };
  // const showUserModal = item => {
  const showDepCompare = item => {
    const { s_time, e_time } = filterRef.current;
    setModalFilter({
      s_time: s_time,
      e_time: e_time,
      dep_id: item.dep_id,
    });
    setVisible(true);
  };
  useEffect(() => {
    // dispatch({
    //   type: 'report/queryUserReport',
    // });
    handleSearch();
  }, []);

  return (
    <div>
      <div className={styles.topPart}>
        {renderSearch()}
        <Button type="primary" onClick={handleDownload}>
          导出
        </Button>
      </div>
      <Table
        loading={loading}
        rowKey="dep_id"
        style={{ marginTop: 20 }}
        columns={columns}
        dataSource={dep.list}
        pagination={false}
        onExpand={onExpand}
      />
      {/* <UserRptModal filter={modalFilter} visible={visible} onCancel={() => setVisible(false)} /> */}
      <DepCompareModal filter={modalFilter} visible={visible} onCancel={() => setVisible(false)} />
    </div>
  );
}

export default connect(({ report, loading }) => ({
  dep: report.dep,
  loading: loading.models.report,
}))(Department);