import { message, Modal, Select, Space } from "antd";
import { SelectValue } from "antd/lib/select";
import React, { useCallback, useEffect, useState } from "react";
import { useModel } from "umi";


interface Props {
    show?: boolean,
    onClose?: () => void,
    onChange?: (value: string[]) => void,
    ajax?: any
}

function BatchAddLabel(props: Props) {
    const { show = false, onClose, onChange, ajax } = props

    /** 变量开始 */
    const [labelIds, setLabelIds] = useState<string[] | undefined>([])
    /** 变量结束 */

    const { getLabels } = useModel('useLaunch.useMaterial')

    useEffect(() => {
        getLabels.run({ pageNum: 1, pageSize: 200 })
    }, [])
    
    // 设置标签
    const setLable = (value: any) => {
        setLabelIds(value)
    }

    // 确定按钮
    const handleOk = useCallback(() => {
        if (labelIds && labelIds.length > 0) {
            onChange && onChange(labelIds)
        } else {
            message.error('请选择标签')
        }
    }, [labelIds])

    return <Modal 
        visible={show}
        width={460}
        title="批量添加标签"
        onCancel={() => {onClose && onClose()}}
        maskClosable={false}
        onOk={handleOk}
        confirmLoading={ajax && ajax?.loading}
    >
        <Space>
            <span>标签：</span>
            <Select value={labelIds} style={{width: 350}} onChange={(value: SelectValue) => { setLable(value) }} placeholder="选择标签" mode="multiple">
                {getLabels?.data?.records.map((item: any) => (<Select.Option value={item?.id?.toString()} key={item?.label + item?.id}>{item?.label}</Select.Option>))}
            </Select>
        </Space>
    </Modal>
}

export default React.memo(BatchAddLabel)