import React, { useEffect, useState, useRef } from 'react';
import { connect } from 'dva';
import { Form, Table, DatePicker, Input, Button } from 'antd';
import report from './models/report';
import moment from 'moment';

const { RangePicker } = DatePicker;

function Resource(props) {
  const { dispatch, form, loading, res } = props;
  const columns = [
    {
      title: '用户名称',
      dataIndex: 'user_name',
    },
    // {
    //   title: '资源编号',
    //   dataIndex: 'name',
    // },
    {
      title: '部门',
      dataIndex: 'dep_name',
    },
    {
      title: '报工类型',
      dataIndex: 'type_type_id',
      render: type => (type == 1 ? '非项目' : '项目'),
    },
    {
      title: '工时类型',
      dataIndex: 'type_name',
    },
    {
      title: '项目名称',
      dataIndex: 'project_name',
    },
    {
      title: '项目编号',
      dataIndex: 'project_code',
    },
    {
      title: '项目归属部门',
      dataIndex: 'project_dep_name',
    },
    {
      title: '工时统计',
      children: [
        {
          title: '保存未提交',
          dataIndex: 'un_audit_cnt',
        },
        {
          title: '提交未审批',
          dataIndex: 'pending_audit_cnt',
        },
        {
          title: '审批通过',
          dataIndex: 'pass_audit_cnt',
        },
        {
          title: '已拒绝',
          dataIndex: 'refuse_audit_cnt',
        },
      ],
    },
  ];
  const filterRef = useRef({});
  const onChangePage = pagination => {
    dispatch({
      type: 'report/queryResReport',
      payload: {
        ...filterRef.current,
        currentPage: pagination.current,
      },
    });
  };
  const handleSearch = () => {
    form.validateFields((error, { time }) => {
      let params = {};
      params.s_time = time[0] ? moment(time[0]).format('YYYY-MM-DD 00:00:00') : null;
      params.e_time = time[1] ? moment(time[1]).format('YYYY-MM-DD 23:59:59') : null;
      filterRef.current = params;

      dispatch({
        type: 'report/queryResReport',
        payload: params,
      });
    });
  };
  const renderSearch = () => {
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
    };

    return (
      <Form layout="inline" {...formItemLayout}>
        <Form.Item label="时间">
          {form.getFieldDecorator('time')(<RangePicker placeholder="选择时间" />)}
        </Form.Item>
        <Form.Item>
          <Button type="primary" loading={loading} onClick={handleSearch}>
            查询
          </Button>
        </Form.Item>
      </Form>
    );
  };

  useEffect(() => {
    dispatch({
      type: 'report/queryResReport',
    });
  }, []);

  return (
    <div>
      {renderSearch()}
      <Table
        style={{ marginTop: 20 }}
        columns={columns}
        dataSource={res.list}
        pagination={res.pagination}
        onChange={onChangePage}
      />
    </div>
  );
}

export default connect(({ report, loading }) => ({
  res: report.res,
  loading: loading.models.report,
}))(Form.create()(Resource));