import React, { useState, useEffect, useMemo } from 'react';
import { Button, Form, Modal, Pagination, Table, Input } from 'antd';
import Navigate from '@/components/Navigate';
import EditIcon from '@/components/EditIcon';
import withActions from '@/components/ActionList';
import { apis, fetch } from '../../../../utils/request';

const getH5List = fetch(apis.h5Activity.EffectiveList)
const getActivities = fetch(apis.activity.listSelected)
const getHelpList = fetch(apis.helpActivity.effectiveList)
const getGroupList = fetch(apis.groupActivity.EffectiveList)
const getLiveList = fetch(apis.taliveActivity.taLiveActivity)
const getNewsList = fetch(apis.news.getList)
const getSalesBatchList = fetch(apis.house.taSalesBatch)


const qrText = props => {
    const {
        value,
        onChange,
        targetType,
        buildingId,
        ...rest
    } = props;
    const [data, setData] = useState([])
    const [visible, setVisible] = useState(false);
    const [info, setInfo] = useState({ name: value }, [value]);

    // activity
    const getActivitiesData = e => getActivities({
        params: {
            buildingId,
            pageNum: 1,
            pageSize: 999,
            activityStatus: 2,
            name: e,
        },
    }).then(data => {
        const list = []

        let obj = {};
        data.list.map(item => {
            obj = item;
            obj['name'] = item['title'];
            obj['id'] = item['dynamicId'];
            delete obj['title'];
            delete obj['dynamicId'];
            list.push(obj)
        })
        setData(list)
    })

    // help
    const getHelpData = e => getHelpList({
        params: {
            buildingId,
            pageNum: 1,
            pageSize: 999,
            status: 1,
            name: e,
        },
    }).then(data => {
        const list = []

        let obj = {};
        data.records.map(item => {
            obj = item;
            obj['name'] = item['title'];
            obj['id'] = item['helpActivityId'];
            delete obj['title'];
            delete obj['helpActivityId'];
            list.push(obj)
        })
        setData(list)

    })

    //  group
    const getGroupData = e => getGroupList({
        params: {
            buildingId,
            pageNum: 1,
            pageSize: 999,
            status: 1,
            name: e,
        },
    }).then(data => {
        const list = []

        let obj = {};
        data.records.map(item => {
            obj = item;
            obj['name'] = item['activityName'];
            delete obj['activityName'];
            obj['id'] = item['groupActivityId'];
            delete obj['groupActivityId'];

            list.push(obj)
        })
        setData(list)
    })

    // h5
    const getH5Data = e => getH5List({
        params: {
            pageNum: 1,
            pageSize: 999,
            isMiniapp: 1,
            status: 1,
            buildingId,
            name: e,
        },
    }).then(data => {
        const list = []

        let obj = {};
        data.records.map(item => {
            obj = item;
            obj['id'] = item['drainageId'];
            delete obj['drainageId'];

            list.push(obj)
        })
        setData(list)
    })

    //  live
    const getLiveData = e => getLiveList({
        params: {
            buildingId,
            pageNum: 1,
            pageSize: 999,
            status: 1,
            liveActivityTitle: e,
        },
    }).then(data => {
        const list = []
        let obj = {};
        data.records.map(item => {
            obj = item;
            obj['name'] = item['liveActivityTitle'];
            delete obj['liveActivityTitle'];
            obj['id'] = item['liveActivityId'];
            delete obj['liveActivityId'];
            list.push(obj)
        })


        setData(list)
    })

    // news
    const getNewsData = e => getNewsList({
        params: {
            buildingId,
            pageNum: 1,
            pageSize: 999,
            newsStatus: 0,
            title: e,
        },
    }).then(data => {
        const list = []

        let obj = {};
        data.records.map(item => {
            obj = item;
            obj['name'] = item['newsName'];
            delete obj['newsName'];
            obj['id'] = item['newsId'];
            delete obj['newsId'];
            list.push(obj)
        })


        setData(list)
    })

    // salesBatch
    const getSalesBatchData = e => getSalesBatchList({
        params: {
            buildingId,
            pageNum: 1,
            pageSize: 999,
            status: 1,
            salesBatchName: e,
        },
    }).then(data => {
        const list = []

        let obj = {};
        data.records.map(item => {
            obj = item;
            obj['name'] = item['salesBatchName'];
            delete obj['salesBatchName'];
            obj['id'] = item['salesBatchId'];
            delete obj['salesBatchId'];
            list.push(obj)
        })
        setData(list)
        // salesBatchNamesalesBatchId
    })

    useEffect(() => {
        console.log(value, '23423333333334')
        // eslint-disable-next-line default-case
        if (value) {
            setInfo({ name: value.name })
        } else {
            setInfo({ name: value })
        }
        // setInfo({ name: value.name })
    }, [value])

    // getNewsList
    useEffect(() => {
        console.log(targetType, buildingId, '234234')
        // eslint-disable-next-line default-case

        getData()
    }, [targetType, buildingId])

    const getData = e => {
        // eslint-disable-next-line default-case
        switch (targetType) {
            // case 'project': { getActivitiesData(e); break; }
            case 'activity': { getActivitiesData(e); break; }
            case 'help': { getHelpData(e); break; }
            case 'group': { getGroupData(e); break; }
            case 'h5': { getH5Data(e); break; }
            case 'live': { getLiveData(e); break; }
            case 'news': { getNewsData(e); break; }
            case 'salesBatch': { getSalesBatchData(e); break; }
        }
    }


    function handleSubmit(e) {

        e.preventDefault();
        props.form.validateFields((err, values) => {
            if (!err) {
                console.log(values)
                getData(values.name)
            }
        }
        )
    }

    const onChoice = e => {
        console.log(e)
        setInfo(e)
        setVisible(false)
        onChange(e)
    }

    const columns = [

        {
            title: '标题',
            dataIndex: 'name',
            key: 'name',
            align: 'center',

        },
        {
            title: '操作',
            dataIndex: '',
            key: '2',
            align: 'center',
            render: withActions((text, record) => [
                <EditIcon type="start" text="选择" onClick={() => onChoice(record)}></EditIcon>,
            ]),
        },
    ];


    const { getFieldDecorator } = props.form

    return (
        <>
            <div onClick={() => setVisible(true)}>{info.name} {!info.name && <Navigate >请选择</Navigate>}</div>

            <Modal
                title="请选择"
                visible={visible}
                onCancel={() => setVisible(false)}
                footer={[]}
                width="500px"
            >
                <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
                    <Form.Item>
                        {getFieldDecorator('name')(
                            <Input placeholder="请输入标题" />,
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" >搜索 </Button>
                        {/* <Button style={{ marginLeft: 8 }} onClick={handleReset}>重置</Button> */}
                    </Form.Item>
                </Form>
                <Table columns={columns} dataSource={data} />
                {/* <Pagination defaultCurrent={1} total={dataInfo.total} onChange={e => changePageNum(e)} current={dataInfo.current} /> */}
            </Modal>
        </>

    )
}
const WrappedQrText = Form.create({ name: 'qrText' })(qrText);

export default WrappedQrText
