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

const { RangePicker } = DatePicker;

function FinanceResource(props) {
  const { dispatch, loading, resource } = props;
  const [form] = Form.useForm();
  const columns = [
    // {
    //   title: '序号',
    //   render: (_, __, index) => index + 1,
    // },
    { title: '事业部名称 ', dataIndex: 'dep_name' },
    { title: '资源中心人日使用量', dataIndex: 'workload' },
    { title: '技术中心人日数', dataIndex: 'tech_workload' },
    { title: '招采中心人日数', dataIndex: 'purchase_workload' },
    { title: '技术中心售前人日数', dataIndex: 'tech_sale_workload' },
    { title: '技术中心执行人日数', dataIndex: 'tech_exe_workload' },
    { title: '招采中心售前人日数', dataIndex: 'purchase_sale_workload' },
    { title: '招采中心执行人日数', dataIndex: 'purchase_exe_workload' },
  ];

  var initDate;
  if (dayjs().date() > 25) {
    initDate = [
      dayjs().subtract(1, 'month').set('date', 26),
      dayjs().set('date', 25),
    ];
  } else {
    initDate = [
      dayjs().subtract(2, 'month').set('date', 26),
      dayjs().subtract(1, 'month').set('date', 25),
    ];
  }

  const handleSearch = () => {
    const { time } = form.getFieldsValue();
    let s_time = time[0] ? dayjs(time[0]).format('YYYY-MM-DD') : null;
    let e_time = time[1] ? dayjs(time[1]).format('YYYY-MM-DD') : null;

    dispatch({
      type: 'finance/queryFinanceResReport',
      payload: {
        s_time,
        e_time,
      },
    });
  };

  const renderSearch = () => {
    return (
      <Form layout="inline" form={form}>
        <Form.Item label="时间" name="time" initialValue={initDate}>
          <RangePicker placeholder="选择时间" allowClear={false} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" loading={loading} onClick={handleSearch}>
            查询
          </Button>
        </Form.Item>
      </Form>
    );
  };

  const handleDownload = () => {
    const { time } = form.getFieldsValue();
    const token = getToken();
    let s_time = time[0] ? dayjs(time[0]).format('YYYY-MM-DD') : '';
    let e_time = time[1] ? dayjs(time[1]).format('YYYY-MM-DD') : '';
    console.log(
      `/api/v2/workload/finance/resource/export?JWT-TOKEN=${token}&s_time=${s_time}&e_time=${e_time}`,
    );

    downloadFile(
      `/api/v2/workload/finance/resource/export?JWT-TOKEN=${token}&s_time=${s_time}&e_time=${e_time}`,
      `财务报表_资源${dayjs().format('YYYYMMDDHHMMSS')}.xlsx`,
    );
  };

  useEffect(() => {
    handleSearch();
  }, []);

  return (
    <div>
      <div className={styles.topPart}>
        {renderSearch()}
        <Button type="primary" onClick={handleDownload}>
          导出
        </Button>
      </div>
      <Table
        loading={loading}
        style={{ marginTop: 20 }}
        rowKey={'dep_name'}
        columns={columns}
        dataSource={resource}
        pagination={false}
      />
    </div>
  );
}

export default connect(({ finance, loading }) => ({
  resource: finance.resource,
  loading: loading.models.finance,
}))(FinanceResource);
