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

const { Column, ColumnGroup } = Table;
const getH5List = fetch(apis.h5Activity.EffectiveList)
const { Search } = Input;
export default 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.drainageId == val)[0] || {}).name || '请选择'
  }
  const updateGroup = val => setGroup({ groupId: val, groupName: getGroupTitle(val) })

  const buildingId = props.buildingId()

  useEffect(() => {
    getH5List({
      params: {
        pageNum: 1,
        pageSize: 999,
        isMiniapp: 1,
        status: 1,
        source: 2,
        buildingId,
      },
    }).then(data => {
      const getGroupTitle = val => {
        return (data.records.filter(x => x.drainageId == val)[0] || {}).name || '请选择'
      }
      const updateGroup = val => setGroup({ groupId: val, groupName: getGroupTitle(val) })
      setList(data.records || [])

      updateGroup(buildingId ? undefined : value);
    })
  }, [buildingId]);
  const searchH5 = e => {
    getH5List({
      params: {
        pageNum: 1,
        pageSize: 999,
        isMiniapp: 1,
        status: 1,
        source: 2,
        name: e
      },
    }).then(data => {
      setList(data.records || [])
      const getGroupTitle = val => {
        return (data.records.filter(x => x.drainageId == val)[0] || {}).name || '请选择'
      }
      const updateGroup = val => setGroup({ groupId: val, groupName: getGroupTitle(val) })
      setList(data.records || [])
      updateGroup(value ? undefined : value);
    })
  }

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

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

  const setData = val => {
    updateGroup(val)
    onChange(val)
    setVisible(false)
  }

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

  const columns = [
    {
      title: '标题',
      dataIndex: 'name',
      key: 'drainageId',
      align: 'center',
      ellipsis: true,
      render: text => <a>{text}</a>,
    },
    {
      title: '操作',
      align: 'center',
      width: '20%',
      render: (text, record) => (
        <Navigate onClick={() => setData(record.drainageId)}>选择</Navigate>
      ),
    },
  ];

  return (
    <div>
      <div ><Navigate onClick={() => setVisible(true)}>{group.groupName}</Navigate></div>
      <Modal
        title="请选择"
        visible={visible}
        onCancel={() => setVisible(false)}
        footer={[]}
      >
        <Row>
          <Col span={18}>
            <Search
              placeholder="请输入标题"
              enterButton="搜索"
              size="default"
              allowClear="true"
              onSearch={value => searchH5(value)}
              style={{ marginBottom: '16px' }}
            />
          </Col>
          <Col span={4} offset={1}>
            <Button type="primary" onClick={() => clearVal('')}>清除选择</Button>
          </Col>
        </Row>

        <Table rowKey={list => list.drainageId} columns={columns} dataSource={list} />

      </Modal>
    </div>
  )
}
