import React, { useEffect, useState } from "react"
import './global.less'
import { businessPlanData, GENDER_TYPE } from "../../page/businessPlan/create/const"
import weComTaskStore from '@/pages/weComTask/store'
import { toJS } from 'mobx';

const targetingData = [
    { key: 'msgTagIds', name: '智能标签' },
    { key: 'msgExcludeTagIds', name: '排除智能标签' },
    { key: 'platformKey', name: '书城' },
    { key: 'platformUserId', name: '书城用户ID' },
    { key: 'rechargeBook', name: '充值小说' },
    { key: 'begin', name: '关注时间' },
    { key: 'genders', name: '性别' },
    { key: 'rechargeCount', name: '充值次数' },
    { key: 'rechargeMoney', name: '充值金额' },
    { key: 'lastRechargeTime', name: '最后充值时间' },
    { key: 'firstRechargeMoney', name: '首充金额' },
    { key: 'rechargeMoneyMax', name: '单笔最大充值金额' },
    { key: 'subHour', name: '关注距今时间' },
    { key: 'subDay', name: '关注距今天' },
    { key: 'lastRechargeHour', name: '最近充值时间距今（小时）' },
    { key: 'opers', name: '手机系统' }
]

const targetingGroupData = [
    { key: 'groupChatNames', name: '群名称列表' },
    { key: 'groupChatTime', name: '群创建时间' },
    { key: 'groupChatHour', name: '群创建时长' },
    { key: 'groupChatUser', name: '群人数' }
]
interface Props {
    data: any,
    bookCityList: { label: string, value: string }[]
    configName?: string
    configType?: BUSINES_SPLAN_API.ConfigTypeProps
}
interface ContentProps {
    unlimited?: string,         // 不限
    msgTagIds?: { [x: string]: string }[], // 智能标签
    msgExcludeTagIds?: { [x: string]: string }[], // 排除智能标签
    platformKey?: string,   // 书城
    platformUserId?: string,// 书城用户ID
    rechargeBook?: string,  // 充值小说
    begin?: {               // 关注时间
        beginTime?: string,
        endTime?: string
    },
    genders?: string[],     // 性别
    rechargeCount?: {       // 充值次数
        rechargeCountMin?: number,
        rechargeCountMax?: number
    },
    rechargeMoney?: {       // 充值金额
        rechargeMoneyMin?: number
        rechargeMoneyMax?: number
    },
    lastRechargeTime?: {        // 最后充值时间
        lastRechargeTimeMin?: string,
        lastRechargeTimeMax?: string
    },
    firstRechargeMoney?: { // 首充金额
        firstRechargeMoneyMin?: number,
        firstRechargeMoneyMax?: number
    },
    rechargeMoneyMax?: {  // 单笔最大充值金额
        rechargeMoneyMaxMin?: number,
        rechargeMoneyMaxMax?: number
    },
    subHour?: {          // 关注距今时间
        subHourMin?: number,
        subHourMax?: number
    },
    subDay?: {          // 关注距今天
        subDayMin?: number
        subDayMax?: number
    },
    lastRechargeHour?: {  // 最近一次充值距今
        lastRechargeHourMin?: number,
        lastRechargeHourMax?: number
    },
    opers?: string[]   // 手机系统
    // 群
    groupChatNames?: string,
    groupChatTime?: {
        groupChatBeginTime?: string,
        groupChatEndTime?: string
    }
    groupChatHour?: {
        groupChatHourMin?: number,
        groupChatHourMax?: number
    }
    groupChatUser?: {
        groupChatUserMin?: number,
        groupChatUserMax?: number
    }
}

/** 重置筛选用户数据 */
export const resetFilterUserData = (data: { [x: string]: any }): ContentProps => {
    const {
        beginTime, endTime, rechargeCountMin, rechargeCountMax, rechargeMoneyMin, rechargeMoneyMax, lastRechargeTimeMin, lastRechargeTimeMax,
        firstRechargeMoneyMin, firstRechargeMoneyMax, rechargeMoneyMaxMin, rechargeMoneyMaxMax, subHourMin, subHourMax, subDayMin, subDayMax,
        lastRechargeHourMin, lastRechargeHourMax, groupChatNames, groupChatBeginTime, groupChatEndTime, groupChatHourMin, groupChatHourMax, groupChatUserMin, groupChatUserMax,
        ...params
    } = data

    const newData: ContentProps = { ...params }
    if (beginTime || endTime) {
        newData.begin = { beginTime, endTime }
    }
    if (rechargeCountMin || rechargeCountMax) {
        newData.rechargeCount = { rechargeCountMin, rechargeCountMax }
    }
    if (rechargeMoneyMin || rechargeMoneyMax) {
        newData.rechargeMoney = { rechargeMoneyMin, rechargeMoneyMax }
    }
    if (lastRechargeTimeMin || lastRechargeTimeMax) {
        newData.lastRechargeTime = { lastRechargeTimeMin, lastRechargeTimeMax }
    }
    if (firstRechargeMoneyMin || firstRechargeMoneyMax) {
        newData.firstRechargeMoney = { firstRechargeMoneyMin, firstRechargeMoneyMax }
    }
    if (rechargeMoneyMaxMin || rechargeMoneyMaxMax) {
        newData.rechargeMoneyMax = { rechargeMoneyMaxMin, rechargeMoneyMaxMax }
    }
    if (subHourMin || subHourMax) {
        newData.subHour = { subHourMin, subHourMax }
    }
    if (subDayMin || subDayMax) {
        newData.subDay = { subDayMin, subDayMax }
    }
    if (lastRechargeHourMin || lastRechargeHourMax) {
        newData.lastRechargeHour = { lastRechargeHourMin, lastRechargeHourMax }
    }
    if (groupChatNames?.length) {
        newData.groupChatNames = groupChatNames.join('、')
    }
    if (groupChatBeginTime && groupChatEndTime) {
        newData.groupChatTime = { groupChatBeginTime, groupChatEndTime }
    }
    if (groupChatHourMin || groupChatHourMax) {
        newData.groupChatHour = { groupChatHourMin, groupChatHourMax }
    }
    if (groupChatUserMin || groupChatUserMax) {
        newData.groupChatUser = { groupChatUserMin, groupChatUserMax }
    }
    return newData
}

/**
 * 定向处理展示
 * @returns 
 */
const FilterUserTooltip: React.FC<Props> = (props) => {

    /**********************/
    const { bookPlatForm, bookList } = toJS(weComTaskStore.data)
    const { data, configName, bookCityList, configType = 'USER_GROUP' } = props
    const [content, setContent] = useState<ContentProps>({})

    // const getAllBook = useAjax(() => getAllBookApi()) //书
    // const getBookPlatInfoAll = useAjax(() => getBookPlatInfoAllApi()) //书城
    /**********************/

    // useEffect(() => {
    //     if (configType === 'USER_GROUP') {
    //         getBookPlatInfoAll.run().then((res) => {
    //             if (res?.data) setBookPlatForm(res.data)
    //         })
    //         getAllBook.run().then(res => {
    //             if (res?.data) {
    //                 setBookList(res.data)
    //             }
    //         })
    //     }
    // }, [configType])

    useEffect(() => {
        const currentTargetingData = configType === 'GROUP_GROUP' ? targetingGroupData : targetingData
        if (data) {
            const newData = resetFilterUserData(data)
            let newConten: ContentProps = newData
            newConten.unlimited = currentTargetingData.filter((item: any) => !Object.keys(newData).includes(item.key))?.map((item: any) => item?.name)?.toString()
            setContent(newConten)
        } else {
            setContent({ unlimited: currentTargetingData?.map((item: any) => item?.name)?.toString() })
        }
    }, [data, configType])



    return <div className='targetingTooltip'>
        {configName && <div style={{ fontWeight: 'bold', marginBottom: 4 }}>{configName}</div>}
        {content?.msgTagIds && <div>
            <strong>智能标签：</strong><span>{`${content?.msgTagIds?.['business'] ? `业务：${businessPlanData.find(i => i.value == content?.msgTagIds['business'])?.label}` : ''}--${content?.msgTagIds?.['bookCity'] ? `书城：${bookPlatForm.find(i => i.id == content?.msgTagIds['bookCity'])?.platformName}` : ''}--${content?.msgTagIds?.['product'] ? `产品：${bookList.find(i => i.id == content?.msgTagIds['product'])?.bookName}` : ''}`}</span>
        </div>}
        {content?.msgExcludeTagIds && <div>
            <strong>排除智能标签：</strong><span>{`${content?.msgExcludeTagIds?.['business'] ? `业务：${businessPlanData.find(i => i.value == content?.msgExcludeTagIds['business'])?.label}` : ''}--${content?.msgExcludeTagIds?.['bookCity'] ? `书城：${bookPlatForm.find(i => i.id == content?.msgExcludeTagIds['bookCity'])?.platformName}` : ''}--${content?.msgExcludeTagIds?.['product'] ? `产品：${bookList.find(i => i.id == content?.msgExcludeTagIds['product'])?.bookName}` : ''}`}</span>
        </div>}
        {content?.platformKey && <div>
            <strong>书城：</strong><span>{bookCityList?.find(item => item.value === content?.platformKey)?.label || '--'}</span>
        </div>}
        {content?.platformUserId && <div>
            <strong>书城用户ID：</strong><span>{content?.platformUserId}</span>
        </div>}
        {content?.rechargeBook && <div>
            <strong>充值小说：</strong><span>{content?.rechargeBook}</span>
        </div>}
        {content?.begin && <div>
            <strong>关注时间：</strong><span>{content?.begin?.beginTime ? content?.begin?.beginTime : '不限'} - {content?.begin?.endTime ? content?.begin?.endTime : '不限'}</span>
        </div>}
        {content?.genders?.length > 0 && <div>
            <strong>性别：</strong><span>{content?.genders.map(g => GENDER_TYPE[g]).toString()}</span>
        </div>}
        {content?.rechargeCount && <div>
            <strong>充值次数：</strong><span>{content?.rechargeCount?.rechargeCountMin ? content?.rechargeCount?.rechargeCountMin : '不限'} - {content?.rechargeCount?.rechargeCountMax ? content?.rechargeCount?.rechargeCountMax : '不限'}</span>
        </div>}
        {content?.rechargeMoney && <div>
            <strong>充值金额：</strong><span>{content?.rechargeMoney?.rechargeMoneyMin ? content?.rechargeMoney?.rechargeMoneyMin : '不限'} - {content?.rechargeMoney?.rechargeMoneyMax ? content?.rechargeMoney?.rechargeMoneyMax : '不限'}</span>
        </div>}
        {content?.lastRechargeTime && <div>
            <strong>最后充值时间：</strong><span>{content?.lastRechargeTime?.lastRechargeTimeMin ? content?.lastRechargeTime?.lastRechargeTimeMin : '不限'} - {content?.lastRechargeTime?.lastRechargeTimeMax ? content?.lastRechargeTime?.lastRechargeTimeMax : '不限'}</span>
        </div>}
        {content?.firstRechargeMoney && <div>
            <strong>首充金额：</strong><span>{content?.firstRechargeMoney?.firstRechargeMoneyMin ? content?.firstRechargeMoney?.firstRechargeMoneyMin : '不限'} - {content?.firstRechargeMoney?.firstRechargeMoneyMax ? content?.firstRechargeMoney?.firstRechargeMoneyMax : '不限'}</span>
        </div>}
        {content?.rechargeMoneyMax && <div>
            <strong>单笔最大充值金额：</strong><span>{content?.rechargeMoneyMax?.rechargeMoneyMaxMin ? content?.rechargeMoneyMax?.rechargeMoneyMaxMin : '不限'} - {content?.rechargeMoneyMax?.rechargeMoneyMaxMax ? content?.rechargeMoneyMax?.rechargeMoneyMaxMax : '不限'}</span>
        </div>}
        {content?.subHour && <div>
            <strong>关注距今时间：</strong><span>{content?.subHour?.subHourMin ? content?.subHour?.subHourMin + '小时' : '不限'} - {content?.subHour?.subHourMax ? content?.subHour?.subHourMax + '小时' : '不限'}</span>
        </div>}
        {content?.subDay && <div>
            <strong>关注距今天：</strong><span>{content?.subDay?.subDayMin ? content?.subDay?.subDayMin + '天' : '不限'} - {content?.subDay?.subDayMax ? content?.subDay?.subDayMax + '天' : '不限'}</span>
        </div>}
        {content?.lastRechargeHour && <div>
            <strong>最近一次充值距今（小时）：</strong><span>{content?.lastRechargeHour?.lastRechargeHourMin ? content?.lastRechargeHour?.lastRechargeHourMin + '小时' : '不限'} - {content?.lastRechargeHour?.lastRechargeHourMax ? content?.lastRechargeHour?.lastRechargeHourMax + '小时' : '不限'}</span>
        </div>}
        {content?.opers?.length > 0 && <div>
            <strong>手机系统：</strong><span>{content?.opers.map(g => ({ '0': '未知', '1': '安卓', '2': 'IOS' } as any)[g]).toString()}</span>
        </div>}
        {content?.groupChatNames && <div>
            <strong>群名称列表：</strong><span>{content?.groupChatNames?.toString()}</span>
        </div>}
        {content?.groupChatTime && <div>
            <strong>群创建时间：</strong><span>{content?.groupChatTime?.groupChatBeginTime ? content?.groupChatTime?.groupChatBeginTime : '不限'} - {content?.groupChatTime?.groupChatEndTime ? content?.groupChatTime?.groupChatEndTime : '不限'}</span>
        </div>}
        {content?.groupChatHour && <div>
            <strong>群创建时长：</strong><span>{content?.groupChatHour?.groupChatHourMin ? content?.groupChatHour?.groupChatHourMin + '小时' : '不限'} - {content?.groupChatHour?.groupChatHourMax ? content?.groupChatHour?.groupChatHourMax + '小时' : '不限'}</span>
        </div>}
        {content?.groupChatUser && <div>
            <strong>群人数：</strong><span>{content?.groupChatUser?.groupChatUserMin ? content?.groupChatUser?.groupChatUserMin : '不限'} - {content?.groupChatUser?.groupChatUserMax ? content?.groupChatUser?.groupChatUserMax : '不限'}</span>
        </div>}
        {content?.unlimited && <div>
            <strong>不限：</strong><span>{content?.unlimited}</span>
        </div>}
    </div>
}

export default React.memo(FilterUserTooltip)