import React, { useState, useEffect } from 'react';
import { Form, Select, Modal, Button, Table, Divider, Tag, Input,Row,Col,Icon, Avatar, 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.sealId == val)[0] || {}).sealImg || '请选择'
  }
  const updateGroup = val => setGroup({ groupId: val, groupName: getGroupTitle(val) })

  const companyId = props.companyId

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

  // 查询列表
  const getList = (params) => {
    request({ ...apis.taEcontract.taCompanySealList, params: { ...params, companyId:companyId } }).then((data) => {
      setList(data.records || [])
      setDataInfo(data)
      updateGroup(companyId ? 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, sealName:values.sealName })
      }
    });
  }

  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 columns = [
    {
      title: '印章编号',
      dataIndex: 'sealId',
      key: 'sealId',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '印章名称',
      dataIndex: 'sealName',
      key: 'sealName',
      align: 'center',
      ellipsis: true,
    },
    {
      title: '印章图',
      dataIndex: 'sealImg',
      key: 'sealImg',
      align: 'center',
      ellipsis: true,
      render: (_, record) => <Avatar shape="square" style={{color: 'blue',cursor: 'pointer'}} src={record.sealImg} size={64} icon="user" />,
    },
    {
      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.sealId, name:record.sealName})}>选择</Navigate>
      ),
    },
  ];

  const { getFieldDecorator } = props.form

  return (
    <div>
      <div>
        <Avatar shape="square" style={{color: 'blue',cursor: 'pointer'}} src={group.groupName} size={54} icon="user" />
  <a style={{marginLeft:'30px', color: '#1D74D9' }} onClick={() => setVisible(true)}>{companyId != undefined && '选择企业印章'}</a>
      </div>
      <Modal
        title="选择企业印章"
        visible={visible}
        onCancel={() => setVisible(false)}
        footer={[]}
        width={900}
      >
        <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('sealName')(
            <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