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 styles from '../style.less';

const { Column, ColumnGroup } = Table;
const SelectContact = props => {

    const [data, setData] = useState([]);
    const [visible, setVisible] = useState(false);
    const [group, setGroup] = useState({ groupId: undefined, groupName: '请选择' })
    const [selectedData, setSelectedData] = useState([]);

    useEffect(() => {
        if (props.value && props.value != selectedData) {
            setSelectedData(props.value)
        }
    }, [props.value])

    // 查询列表
    const getList = (params) => {
        request({ ...apis.sample.h5Template, params: { ...params } }).then((data) => {
            console.log(data)
            setData(data)
        })
    }

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



    const handleChange = val => {
    }

    const selectData = val => {
        const list = selectedData.filter(x => x.h5TemplateId !== val.h5TemplateId).concat(val)
        setSelectedData(list)
        props.onChoosed(list)
        setVisible(false)
    }


    // 提交事件
    const handleSubmit = (e, props) => {
        e.preventDefault();
        e.stopPropagation();
        props.form.validateFields((err, values) => {
            if (!err) {
                getList({ pageNum: 1, pageSize: 10, ...values })
            }
        });
    }

    function handleReset() {
        props.form.resetFields();
        getList({ pageNum: 1, pageSize: 10 })
    }

    const changePageNum = (pageNumber) => {
        getList({ pageNum: pageNumber, pageSize: 10, ...props.form.getFieldsValue() })
    }

    const removeSelected = (val) => {
        const list = selectedData.filter(x => x.h5TemplateId !== val.h5TemplateId)
        setSelectedData(list)
        props.onChoosed(list)
    }

    const columns = [
        {
            title: '模板编号',
            dataIndex: 'h5TemplateId',
            key: 'h5TemplateId',
            align: 'center',
            ellipsis: true,
            width: '20%',
        },
        {
            title: '模板名称',
            dataIndex: 'name',
            key: 'name',
            align: 'center',
            ellipsis: true,
            width: '60%',
        },
        {
            title: '操作',
            align: 'center',
            width: '20%',
            render: (text, record) => (
                <span>
                    <a onClick={() => selectData(record)} style={{ color: 'blue' }}>选择</a>
                </span>
            ),
        },
    ];

    const { getFieldDecorator } = props.form

    return (
        <div>
            <Row gutter={24}>
                <Col span={2}><div onClick={() => setVisible(true)}><a>{group.groupName}</a></div></Col>
                <Col span={16}><div>
                    {selectedData.map(x => {
                        return <Tag size="large" key={x.h5TemplateId} closable onClose={() => removeSelected(x)}>{x.name}</Tag>
                    })}
                </div></Col>
            </Row>

            <Modal
                title="请选择"
                width="1200px"
                visible={visible}
                onCancel={() => setVisible(false)}
                footer={[]}
            >

                <Form layout="inline" onSubmit={e => handleSubmit(e, props)} style={{marginBottom:'16px'}}>
                    <Form.Item>
                        {getFieldDecorator('h5TemplateId')(
                            <Input
                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                placeholder="模板编号"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('name')(
                            <Input
                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                placeholder="模板名称"
                            />,
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" className={styles.searchBtn}>
                            搜索
                        </Button>
                        <Button style={{ marginLeft: 8 }} onClick={handleReset}>
                            重置
                        </Button>
                    </Form.Item>
                </Form>

                <Table rowKey={r => r.h5TemplateId}  dataSource={data.records || []} columns={columns} pagination={false} />
                <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
                    <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current} />
                </div>

            </Modal>
        </div>
    )
}

const WrappedRegistrationForm = Form.create()(SelectContact);
export default WrappedRegistrationForm;