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

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

  const [list, setList] = useState([]);
  const [visible, setVisible] = useState(false);
  const [group, setGroup] = useState({ groupId: undefined, groupName: '甲方企业' })
  const getGroupTitle = val => {
    return (list.filter(x => x.companyId == val)[0] || {}).companyName || '请选择'
  }
  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.taCompanyList, params: { ...params } }).then((data) => {
      setList(data.records || [])

      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.name);
  }

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

  //重置搜索
  function handleReset () {
    props.form.resetFields();
  }

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

  const columns = [
    {
      title: '企业名称',
      dataIndex: 'companyName',
      key: 'companyName',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '企业编号',
      dataIndex: 'companyCode',
      key: 'companyCode',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '实名认证状态',
      dataIndex: 'certifiedStatus',
      key: 'certifiedStatus',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '印章数',
      dataIndex: 'sealNum',
      key: 'sealNum',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '自动签章授权状态',
      dataIndex: 'authorizeStatus',
      key: 'authorizeStatus',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '操作',
      align: 'center',
      width: '20%',
      render: (text, record) => (
        <span>
          <a onClick={() => setData({id:record.companyId, name:record.companyName})} style={{ color: 'blue' }}>选择</a>
        </span>
      ),
    },
  ];

  const { getFieldDecorator } = props.form

  return (
    <div>
      <div>{group.groupName}<a style={{marginLeft:'30px', color: 'blue' }} onClick={() => setVisible(true)}>选择关联企业</a></div>
      <Modal
        title="选择关联企业"
        visible={visible}
        onCancel={() => setVisible(false)}
        footer={[]}
        width={900}
      >
        <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('companyName')(
            <Input
            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
            placeholder="企业名称"
          />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('companyCode')(
            <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} />

      </Modal>
    </div>
  )
}

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

export default WrappedHeader