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 BuildSelect from '../../../../components/SelectButton/BuildSelect'
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 targetType = props.targetType;
  
  const getGroupTitle = val => {
    return (list.filter(x => x.raiseId == val)[0] || {}).salesBatchName || '请选择业务类型'
  }
  const updateGroup = val => setGroup({ groupId: val, groupName: getGroupTitle(val) })

  const buildingId = props.buildingId

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

  // 查询列表
  const getList = (params) => {
    request({ ...apis.house.taRaiseList, 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 changePageNum = pageNumber => {
    getList({ pageNum: pageNumber, pageSize: 10, status: 1, ...props.form.getFieldsValue() })
  }
  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, buildingId:values.buildingId, salesBatchName:values.salesBatchName })
      }
    });
  }

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

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

  const columns = [
    {
      title: '销售批次名',
      dataIndex: 'salesBatchName',
      key: 'salesBatchName',
      align: 'center',
    },
    {
      title: '楼盘名称',
      dataIndex: 'buildingName',
      key: 'buildingName',
      align: 'center',
    },
    {
      title: '认筹开始时间',
      dataIndex: 'raiseStartTime',
      key: 'raiseStartTime',
      align: 'center',
      render: (x, row) => <><span>{`${moment(row.raiseStartTime).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
    },
    {
      title: '认筹结束时间',
      dataIndex: 'raiseEndTime',
      key: 'raiseEndTime',
      align: 'center',
      render: (x, row) => <><span>{`${moment(row.raiseEndTime).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
    },
    {
      title: '锁房方式',
      dataIndex: 'houseLockingType',
      key: 'houseLockingType',
      align: 'center',
      render: (x, row) => <><span>{row.houseLockingType == 'auto' ? "自动锁房" : "手动锁房"}</span></>,
    },
    {
      title: '缴费方式',
      dataIndex: 'payType',
      key: 'payType',
      align: 'center',
      render: (x, row) => <><span>{row.payType == 'offLine' ? "线下缴费" : row.payType == 'onLine' ? "线上缴费" : "线上缴费，线下缴费"}</span></>,
    },
    {
      title: '操作',
      align: 'center',
      width: '20%',
      render: (text, record) => (
        <Navigate onClick={() => setData({id:record.raiseId, name:record.salesBatchName})}>选择</Navigate>
      ),
    },
  ];

  const { getFieldDecorator } = props.form

  return (
    <div>
      <div>{group.groupName}<Navigate onClick={() => setVisible(true)}>{targetType != undefined && '选择关联业务'}</Navigate></div>
      <Modal
        title="选择关联业务"
        visible={visible}
        onCancel={() => setVisible(false)}
        footer={[]}
        width={900}
      >
        <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
        <Form.Item>
          {getFieldDecorator('buildingId')(
            <BuildSelect />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('salesBatchName')(
            <Input
            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
            placeholder="销售批次名"
          />,
          )}
        </Form.Item>
        <Form.Item>
          <span style={{color:'#AAAAAA'}}>仅显示已发布的销售批次对应的认筹</span>
        </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