import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Icon, Select, Table, Pagination, DatePicker } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import withActions from '@/components/ActionList';
import EditIcon from '@/components/EditIcon';
import AuthButton from '@/components/AuthButton';
import styles from '../../style/GoodsList.less';
import apis from '../../../services/apis';
import request from '../../../utils/request';
import Navigate from '@/components/Navigate';


const { RangePicker } = DatePicker;

const header = props => {
  const [data, setData] = useState({})

  useEffect(() => {
    getList({ pageNum: 1, pageSize: 10 });
  }, [])

  // 查询列表
  const getList = (params) => {
    request({ ...apis.manage.list, params: { ...params } }).then((data) => {
      console.log(data)
      setData(data)
    })
  }

  // 跳转到编辑
  const toDetail = id => () => {
    if (id) {
      router.push({
        pathname: '/eContract/manage/edit',
        query: {
          id,
        },
      });

    }
  }

  /**
   *
   *
   * @param {*} props
   * @returns
   */

  const columns = [
    {
      title: '合同标题',
      dataIndex: 'contractName',
      key: 'contractName',
      align: 'center',
      render:  (x, row) => <Navigate onClick={toDetail(row.contractId)}>{row.contractName}</Navigate>,
    },
    {
      title: '甲方名称',
      dataIndex: 'signatoryName',
      key: 'signatoryName',
      align: 'center',

    },
    {
      title: '甲方是否签署',
      align: 'center',
      render: (x, row) => <><span>{row.signatoryTime ? '是' : '否'}</span></>
    },
    {
      title: '甲方签署时间',
      dataIndex: 'signatoryTime',
      key: 'signatoryTime',
      align: 'center',
      render: (x, row) => <><span>{row.signatoryTime ? `${moment(row.signatoryTime).format('YYYY-MM-DD HH:mm:ss')}` : ''}</span></>
    },
    {
      title: '乙方名称',
      dataIndex: 'customerName',
      key: 'customerName',
      align: 'center',

    },
    {
      title: '乙方是否签署',
      align: 'center',
      render: (x, row) => <><span>{row.customerTime ? '是' : '否'}</span></>

    },
    {
      title: '乙方签署时间',
      dataIndex: 'customerTime',
      key: 'customerTime',
      align: 'center',
      render: (x, row) => <><span>{row.customerTime ? `${moment(row.customerTime).format('YYYY-MM-DD HH:mm:ss')}` : ''}</span></>
    },
    {
      title: '是否归档',
      dataIndex: 'archives',
      key: 'archives',
      align: 'center',
      render: (x, row) => <><span>{row.archives ? '是' : '否'}</span></>

    },
    {
      title: '归档时间',
      dataIndex: 'archivesTime',
      key: 'archivesTime',
      align: 'center',
      render: (x, row) => <><span>{row.archivesTime ? `${moment(row.archivesTime).format('YYYY-MM-DD HH:mm:ss')}` : ''}</span></>
    },
    {
      title: '操作',
      dataIndex: 'handle',
      key: 'handle',
      align: 'center',
      render: withActions((text, record) => [
        <AuthButton name="admin.eContractManager.detail.get" noRight={null}>
          <EditIcon text="查看详情" type="look" onClick={toDetail(record.contractId)} />
        </AuthButton>,
      ]),
    },
  ];

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      console.log('selectedRowKeys:', selectedRowKeys, 'selectedRows: ', selectedRows);
      setDemandIds(selectedRows)
    },
  };

  const changePageNum = pageNumber => {
    getList({ pageNum: pageNumber, pageSize: 10, ...props.form.getFieldsValue() })
  }

  // 提交事件
  const handleSubmit = (e, props) => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        const { archivesDate, ...submitValue } = values
        if (null != archivesDate && archivesDate.length > 0) {
          const [archivesStartDate, archivesEndDate] = archivesDate
          submitValue.archivesStartDate = moment(archivesStartDate).format('YYYY-MM-DD');
          submitValue.archivesEndDate = moment(archivesEndDate).format('YYYY-MM-DD');
        }
        console.log(submitValue)
        getList({ pageNum: 1, pageSize: 10, ...submitValue })
      }
    });
  }

  // 重置搜索
  function handleReset() {
    props.form.resetFields();
    getList({ pageNum: 1, pageSize: 10 })
  }


  const { getFieldDecorator } = props.form
  return (

    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('contractName')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="合同标题"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('signatoryName')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="请输入甲方名称"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('customerName')(
            <Input
              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="请输入乙方名称"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('signatoryStatus')(
            <Select style={{ width: '180px' }} placeholder="甲方是否签署">
              <option value="">全部</option>
              <option value="1">是</option>
              <option value="0">否</option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('customerStatus')(
            <Select style={{ width: '180px' }} placeholder="乙方是否签署">
              <option value="">全部</option>
              <option value="1">是</option>
              <option value="0">否</option>
            </Select>,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('archives')(
            <Select style={{ width: '180px' }} placeholder="是否归档">
              <option value="">全部</option>
              <option value="1">是</option>
              <option value="0">否</option>
            </Select>,
          )}
        </Form.Item>

        <Form.Item>

          {getFieldDecorator('archivesDate')(
            <RangePicker placeholder={['归档开始时间', '归档结束时间']} />,
          )}
        </Form.Item>
        <Form.Item>
          <AuthButton name="admin.taShareActivity.search" noRight={null}>
            <Button type="primary" htmlType="submit" className={styles.searchBtn}>
              搜索
                </Button>
          </AuthButton>
          <AuthButton name="admin.taShareActivity.search" noRight={null}>
            <Button style={{ marginLeft: 8 }} onClick={handleReset}>
              重置
                </Button>
          </AuthButton>
        </Form.Item>
      </Form>


      <Table style={{ marginTop: '30px' }} dataSource={data.records} columns={columns} pagination={false} rowKey="activityList" />
      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current} />
      </div>
    </>
  )
}
const WrappedHeader = Form.create({ name: 'header' })(header);

export default WrappedHeader
