import React, { useState, useEffect } from 'react';
import { Form, Select, Modal, Button, Table, Divider, Tag, Input,Row,Col,Icon ,Pagination} from 'antd';
import request from '../../../../utils/request';
import apis from '../../../../services/apis';
import moment from 'moment';
import Navigate from '@/components/Navigate';

const { Column, ColumnGroup } = Table;
const { Search } = Input;
const SelectContractTemp = props => {
  const {
    value,
    onChange,
    ...rest
  } = props;

  const [list, setList] = useState([]);
  const [dataInfo, setDataInfo] = useState({ list: [], total: 0 });
  const [visible, setVisible] = useState(false);
  const [group, setGroup] = useState({ groupId: undefined, groupName: '合同标题' })
  const getGroupTitle = val => {
    return (list.filter(x => x.contractTemplateId == val)[0] || {}).contractTemplateName || '请选择'
  }
  const updateGroup = val => setGroup({ groupId: val, groupName: getGroupTitle(val) })

  const buildingId = props.buildingId

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

  // 查询列表
  const getList = (params) => {
    request({ ...apis.taEcontract.taContractTemplateList, params: { ...params } }).then((data) => {
      setList(data.records)
      setDataInfo(data)
      updateGroup(buildingId ? undefined : value);
    })
  }

  const searchContractTemp = (e) => {
    getList({ pageNum: 1, pageSize: 10 })
  }

  if (value !== group.groupId) {
    updateGroup(value);
  }

  const handleChange = val => {
    onChange(val)
  }

  const setData = val => {
    updateGroup(val.id)
    onChange(val.id)
    setVisible(false)
    props.onSuccess(val);
  }

  // 提交事件
  const handleSubmit = (e, props) => {
    e.preventDefault();
    e.stopPropagation();
    props.form.validateFields((err, values) => {
      if (!err) {
        getList({ pageNum: 1, pageSize: 10, contractTemplateName:values.contractTemplateName })
      }
    });
  }

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

  const clearVal = val => {
    onChange(val)
  }

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

  const columns = [
    {
      title: '合同编号',
      dataIndex: 'contractTemplateId',
      key: 'contractTemplateId',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '合同标题',
      dataIndex: 'contractTemplateName',
      key: 'contractTemplateName',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '新增时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
      ellipsis: true,
      render: (x, row) => <><span>{`${moment(row.createDate).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
    },
    {
      title: '操作',
      align: 'center',
      width: '20%',
      render: (text, record) => (
        <Navigate onClick={() => setData({id:record.contractTemplateId, name:record.contractTemplateName})}>选择</Navigate>
      ),
    },
  ];

  const { getFieldDecorator } = props.form

  return (
    <div>
      <div>{group.groupName}<Navigate onClick={() => setVisible(true)}>选择合同模板</Navigate></div>
      <Modal
        title="选择合同模板"
        visible={visible}
        onCancel={() => setVisible(false)}
        footer={[]}
        width='1000px'
      >
        <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('contractTemplateName')(
            <Input
            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
            placeholder="合同标题"
          />,
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" >
                 搜索
          </Button>
          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
                 重置
          </Button>     
        </Form.Item>
      </Form>
      <Table rowKey={list => list.drainageId} columns={columns} dataSource={list} pagination={false} />
      <Pagination defaultCurrent={1} total={dataInfo.total} onChange={e => changePageNum(e)} current={dataInfo.current}/>
      </Modal>
    </div>
  )
}

const WrappedHeader = Form.create({ name: 'SelectContractTemp' })(SelectContractTemp);

export default WrappedHeader