import { Select, Space, Tag, Tooltip } from 'antd'
import React, { useState, useCallback, useEffect } from 'react'
import { useModel } from 'umi'
import { bgColor } from '@/utils/color'
import style from './index.less'
import { QuestionCircleFilled } from '@ant-design/icons'
type Props = {
    labelWith?: number,
    change: (v: any) => void,
    value: {
        sex: 'all' | 0 | 1 | 2,// 'all'全部，0未知，1男，2女
        tagIds: any[],
        tagType: 0 | 1 | 2, // 0：并集,1：交集,2：取反
    }
}
/**
 * 粉丝标签选定
 * @param labelWith label的宽度
 * @param change 回调
 * 
 */
const TagSelect = React.memo((props: Props) => {
    const { labelWith, change, value } = props
    const [selectedTags, setSelectedTags] = useState<any[]>([])
    const [tagType, setTagType] = useState<number>(0)
    const { fansTagList } = useModel('useOperating.useFans', model => ({ fansTagList: model.get }))
    const { actionWX } = useModel('useOperating.useWxGroupList', model => ({ actionWX: model.state.actionWX }))
    const wx = useModel('useOperating.useNews', model => model.state.actionWX)

    /**
     * 标签选择
     */
    const handleChange = useCallback((tag: number, checked: any) => {
        const nextSelectedTags = checked ? [...selectedTags, tag] : selectedTags.filter(t => t !== tag);
        setSelectedTags(nextSelectedTags);
        change({ tagType, tagIds: nextSelectedTags })
    }, [selectedTags, tagType])
    /**
     * 标签类型
     */
    const handleTagType = useCallback((tagType: number) => {
        setTagType(tagType)
        change({ tagType, tagIds: selectedTags })
    }, [selectedTags])
    /**
     * 获取粉丝列表
    */
    useEffect(() => {
        if (actionWX || wx) {
            fansTagList.run({ mpId: actionWX?.id || wx?.id })
        }
    }, [actionWX, wx])
    /**
     * 回填
     */
    useEffect(() => {
        setTagType(value.tagType)
        setSelectedTags(value.tagIds && Array.isArray(value.tagIds) ? value.tagIds : [value.tagIds])
    }, [value])
   
    return <div className={style.tag}>
        <div className={style.select}>
            <label style={{ width: labelWith }}>标签：</label>
            <Space>
                <Select style={{ width: 100 }} value={tagType} onChange={handleTagType}>
                    <Select.Option value={0}>并集</Select.Option>
                    <Select.Option value={1}>交集</Select.Option>
                    <Select.Option value={2}>反向</Select.Option>
                </Select>
                <Tooltip
                    placement="right"
                    title={
                        <>
                            <div>【并集】：包含A标签或者包含B标签的粉丝；</div>
                            <div>【交集】：同时包含A标签和B标签的粉丝；</div>
                            <div>【反向】：剔除包含所选标签的粉丝。</div>
                        </>
                    }>
                    <QuestionCircleFilled />
                </Tooltip>
            </Space>
        </div>
        <div className={style.tags} style={{ paddingLeft: labelWith }}>
            {
                fansTagList?.data?.map((tag: { id: number, moId: number, name: string }, index: number) => {
                    return <Tag.CheckableTag
                        checked={selectedTags.indexOf(tag?.id) > -1}
                        onChange={checked => handleChange(tag?.id, checked)}
                        key={tag?.id}
                        style={selectedTags.indexOf(tag?.id) > -1 ? { background: bgColor[index] } : { background: '#f9f9f9' }}
                    >
                        {tag.name}
                    </Tag.CheckableTag>
                })
            }
        </div>
    </div>
})
export default TagSelect