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

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

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

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

   //打开新页面
   const openIndexImg = () => {
    const newWin=window.open('about:blank');
    newWin.location.href="https://easydoc.xyz/s/24703398/3SqDkJDw/F8szOMk0"
  }

  const columns = [
    {
      title: '企业名称',
      dataIndex: 'companyName',
      key: 'companyName',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '企业编号',
      dataIndex: 'companyCode',
      key: 'companyCode',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '实名认证状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      ellipsis: true,
      render: (status) => <span>{status === 0 ? '未认证' : status === 1 ? "管理员资料已提交" : status === 2 ? "企业基本资料（没有申请表）已提交" : status === 3 ? "已提交待审核" : 
      status === 4 ? '审核通过' : status === 5 ? "审核不通过" : status === 6 ? "人工初审通过" : "" }</span>,
    },
    {
      title: '印章数',
      dataIndex: 'sealNum',
      key: 'sealNum',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '自动签章授权状态',
      dataIndex: 'authorizeStatus',
      key: 'authorizeStatus',
      align: 'center',
      ellipsis: true,
      render: (authorizeStatus) => <span>{authorizeStatus === '3000' ? '已授权' : '未授权' }</span>,
    },
    {
      title: '操作',
      align: 'center',
      width: '20%',
      render: (text, record) => (
        <span>
          {record.sealNum >0 && record.authorizeStatus === '3000' && <Navigate onClick={() => setData({id:record.companyId, name:record.companyName})}>选择</Navigate>}
        </span>
      ),
    },
  ];

  const { getFieldDecorator } = props.form

  return (
    <div>
      <div>{group.groupName}<Navigate onClick={() => setVisible(true)}>选择关联企业</Navigate></div>
      <Modal
        title="选择关联企业"
        visible={visible}
        onCancel={() => setVisible(false)}
        footer={[]}
        width={1500}
      >
        <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>
          <span style={{color:'#999'}}>可选企业必须已认证通过、已上传印章且授权了自动签章。</span><Navigate onClick={openIndexImg}>查看电子合同接入手册</Navigate>
        </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