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

const getActivities = fetch(apis.activity.listSelected)
const { Search } = Input;

export default (props) => {
  const {
    value,
    onChange,
    ...rest
  } = props;

  const [list, setList] = useState([]);
  const [visible, setVisible] = useState(false);
  const [activity, setActivity] = useState({ dynamicId: undefined, title: '请选择活动' })
  const getActTitle = val => ((list.filter(x => x.dynamicId === val)[0]) || {}).title || '请选择活动'
  const setAct = val => setActivity({ dynamicId: val, title: getActTitle(val) })

  const buildingId = props.buildingId()

  useEffect(() => {
    getActivities({
      params: {
        buildingId,
        pageNum: 1,
        pageSize: 999,
        activityStatus: 2,
      }
    }).then((data) => {
      setList(data.list || [])

      console.log('----', buildingId, value)

      setAct(buildingId ? undefined : value);
    })
  }, [buildingId]);

  if (value !== activity.dynamicId) {
    setAct(value);
  }
  const searchActivity =(e)=>{
    getActivities({
      params: {
        buildingId,
        pageNum: 1,
        pageSize: 999,
        activityStatus: 2,
        name:e
      }
    }).then((data) => {
      setList(data.list || [])

      console.log('----', buildingId, value)

      // setAct(buildingId ? undefined : value);
    })
  }

  let chooseVal = value

  const handleChange = val => chooseVal = val

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

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

  return (

    <div>
      <div ><Navigate onClick={() => setVisible(true)}>{activity.title}</Navigate></div>
      <Modal
        title="请选择"
        visible={visible}
        onCancel={() => setVisible(false)}
        footer={[]}
      >
        <Search
          placeholder="请输入标题"
          enterButton="搜索"
          size="large"
          onSearch={value => searchActivity(value)}
          style={{ marginBottom: '16px' }}
        />
        <Table rowKey={list => list.dynamicId} columns={columns} dataSource={list} />
      </Modal>
    </div>

  );
}