ad-manage/src/components/FansSelect/index.tsx

import { UpCircleOutlined, DownCircleOutlined } from '@ant-design/icons'
import { Radio, Col, DatePicker, Input, Row, Space, Checkbox, Divider } from 'antd'
import { CheckboxValueType } from 'antd/lib/checkbox/Group'
import { RadioChangeEvent } from 'antd/lib/radio'
import moment from 'moment'
import React, { useEffect, useReducer, useState } from 'react'
import style from './index.less'
/**粉丝选项 */
type State = {
    fansFilterOsType?: any[],//操作系统
    fansFilterMember?: '' | boolean,//是否是会员
    fansFilterSubscribeTimeType?: '' | 1 | 2 | 3,//关注时间
    fansFilterSubscribeTimeBegin?: string | '',//关注起始时间
    fansFilterSubscribeTimeEnd?: string | '',//关注截至时间
    rechargeType?: '' | number,//充值情况选项
    fansFilterRechargeCountMin?: string | '',//充值次数（最少）
    fansFilterRechargeCountMax?: string | '',//充值次数（最多）
    dayType?: '' | number,//天数选项
    fansFilterRechargeTimeMin?: string | '',//上次充值时间（最少 n天内）
    fansFilterRechargeTimeMax?: string | '',//上次充值时间（最大 n天内）
    fansFilterRechargeMin?: string | '',//最低充值金额
    fansFilterRechargeMax?: string | '',//最大充值金额
    countType?: '' | number,//书币选项
    fansFilterCoinCountMin?: string | '',//最低书币余额
    fansFilterCoinCountMax?: string | '',//最高书币余额
    timeType?: '' | number,//时间选项
    fansFilterActiveTimeMin?: string | '',//上次活跃距今时间（最低）
    fansFilterActiveTimeMax?: string | '',//上次活跃距今时间（最高）
    fansFilterSex?: any[],//粉丝性别
}
type Action = {
    type: 'setData' | 'initData',
    params: State
}
function reducer(state: State, action: Action) {
    let { type, params } = action
    let newState = JSON.parse(JSON.stringify(state))
    switch (type) {
        case 'setData':
            Object.keys(params as State).forEach((key: string) => {
                newState[key] = (params as State)[key]
            })
            return newState
        case 'initData':
            let data: any = initialState
            if (params) {
                data = { ...data, ...params }
            }
            return data
        default:
            return state
    }
}
const initialState = {
    fansFilterOsType: [],//操作系统
    fansFilterMember: '',//是否是会员
    fansFilterSex: [],//粉丝性别
    fansFilterSubscribeTimeType: '',//关注时间
    fansFilterSubscribeTimeBegin: '',//关注起始时间
    fansFilterSubscribeTimeEnd: '',//关注截至时间
    fansFilterRechargeCountMin: '',//充值次数（最少）
    fansFilterRechargeCountMax: '',//充值次数（最多）
    fansFilterRechargeTimeMin: '',//上次充值时间（最少 n天内）
    fansFilterRechargeTimeMax: '',//上次充值时间（最大 n天内）
    fansFilterRechargeMin: '',//最低充值金额
    fansFilterRechargeMax: '',//最大充值金额
    fansFilterCoinCountMin: '',//最低书币余额
    fansFilterCoinCountMax: '',//最高书币余额
    fansFilterActiveTimeMin: '',//上次活跃距今时间（最低）
    fansFilterActiveTimeMax: '',//上次活跃距今时间（最高）
    rechargeType: '',//充值情况选项
    dayType: '',//天数选项
    countType: '',//书币选项
    timeType: ''//时间选项
}
type Props = {
    callback: (value: State) => void;//回调函数获取数据
    defaultValue?: any;//回填数据
    openConfig?: {
        /**活跃时间*/
        activeTime: boolean
    }
}
function FansSelect(props: Props) {
    const [open, setOpen] = useState<any>({ a: 1, b: 1, c: 1, d: 1 })
    const [state, dispatch] = useReducer(reducer, initialState)
    const { callback, defaultValue = initialState,openConfig} = props
    let [activeTime,setActiveTime] =useState(openConfig?.activeTime !== undefined ? openConfig?.activeTime : true)
    const {
        fansFilterMember, fansFilterSubscribeTimeType, fansFilterSubscribeTimeBegin,
        fansFilterSubscribeTimeEnd, fansFilterRechargeCountMin, fansFilterRechargeCountMax,
        fansFilterRechargeTimeMin, fansFilterRechargeTimeMax, fansFilterRechargeMin, fansFilterRechargeMax,
        fansFilterCoinCountMin, fansFilterCoinCountMax, fansFilterActiveTimeMin, fansFilterActiveTimeMax,
        rechargeType, dayType, countType, timeType, fansFilterSex, fansFilterOsType
    } = state
    //数据回填
    useEffect(() => {
        if (defaultValue && JSON.stringify(defaultValue) !== '{}') {
            let {
                fansFilterMember, fansFilterSubscribeTimeType, fansFilterSubscribeTimeBegin,
                fansFilterSubscribeTimeEnd, fansFilterRechargeCountMin, fansFilterRechargeCountMax,
                fansFilterRechargeTimeMin, fansFilterRechargeTimeMax, fansFilterRechargeMin, fansFilterRechargeMax,
                fansFilterCoinCountMin, fansFilterCoinCountMax, fansFilterActiveTimeMin, fansFilterActiveTimeMax, fansFilterSex, fansFilterOsType
            } = defaultValue
            dispatch({
                type: 'initData', params: {
                    fansFilterMember, fansFilterSubscribeTimeType, fansFilterSubscribeTimeBegin,
                    fansFilterSubscribeTimeEnd, fansFilterRechargeCountMin, fansFilterRechargeCountMax,
                    fansFilterRechargeTimeMin, fansFilterRechargeTimeMax, fansFilterRechargeMin, fansFilterRechargeMax,
                    fansFilterCoinCountMin, fansFilterCoinCountMax, fansFilterActiveTimeMin, fansFilterActiveTimeMax, fansFilterSex, fansFilterOsType,
                    rechargeType: fansFilterRechargeCountMin === null && fansFilterRechargeCountMax === null ? '' :
                        fansFilterRechargeCountMin == 0 && fansFilterRechargeCountMax == 0 ? 0 :
                            fansFilterRechargeCountMin == 1 && fansFilterRechargeCountMax == null ? -1 :
                                fansFilterRechargeCountMin == 1 && fansFilterRechargeCountMax == 1 ? 1 :
                                    fansFilterRechargeCountMin == 2 && fansFilterRechargeCountMax == 2 ? 2 :
                                        fansFilterRechargeCountMin == 3 && fansFilterRechargeCountMax == 3 ? 3 :
                                            fansFilterRechargeCountMin == 4 && fansFilterRechargeCountMax == 4 ? 4 :
                                                fansFilterRechargeCountMin == 5 && fansFilterRechargeCountMax == 5 ? 5 :
                                                    fansFilterRechargeCountMin == 6 && fansFilterRechargeCountMax == 6 ? 6 :
                                                        fansFilterRechargeCountMin == 7 && fansFilterRechargeCountMax == 7 ? 7 :
                                                            fansFilterRechargeCountMin == 8 && fansFilterRechargeCountMax == 8 ? 8 :
                                                                fansFilterRechargeCountMin == 10 && fansFilterRechargeCountMax == 10 ? 10 :
                                                                    fansFilterRechargeCountMin > 10 && fansFilterRechargeCountMax > 10 ? 11 : -2,
                    dayType: fansFilterRechargeTimeMin === null && fansFilterRechargeTimeMax === null ? '' :
                        fansFilterRechargeTimeMin == 0 && fansFilterRechargeTimeMax == 15 ? 15 :
                            fansFilterRechargeTimeMin == 0 && fansFilterRechargeTimeMax == 30 ? 30 :
                                fansFilterRechargeTimeMin == 30 && fansFilterRechargeTimeMax == 0 ? 31 :
                                    fansFilterRechargeTimeMin == 0 && fansFilterRechargeTimeMax == 45 ? 45 :
                                        fansFilterRechargeTimeMin == 0 && fansFilterRechargeTimeMax == 60 ? 60 : 61,
                    timeType: fansFilterActiveTimeMin == null && fansFilterActiveTimeMax == null ? '' :
                        fansFilterActiveTimeMin == 0 && fansFilterActiveTimeMax == 1 ? 1 :
                            fansFilterActiveTimeMin == 1 && fansFilterActiveTimeMax == 3 ? 2 :
                                fansFilterActiveTimeMin == 3 && fansFilterActiveTimeMax == 12 ? 3 :
                                    fansFilterActiveTimeMin == 12 && fansFilterActiveTimeMax == 24 ? 4 : 5
                }
            })
        }
    }, [defaultValue])
    useEffect(() => {
        let { rechargeType, dayType, countType, timeType, ...obj } = state
        callback(obj)
    }, [state])

    console.log('rechargeType--->', rechargeType);

    return <Row gutter={[10, 20]}>
        {/* <Col span={24}>
            <Space>
                <label style={{ width: 100, display: 'inline-block', textAlign: 'right' }}>性别：</label>
                <Checkbox.Group
                    onChange={(checkedValue: CheckboxValueType[]) => {
                        dispatch({ type: 'setData', params: { fansFilterSex: checkedValue } })
                    }}
                    value={fansFilterSex}
                >
                    <Checkbox value={''}>不限</Checkbox>
                    <Checkbox value={1}>男</Checkbox>
                    <Checkbox value={2}>女</Checkbox>
                    <Checkbox value={0}>未知</Checkbox>
                </Checkbox.Group>
            </Space>
        </Col> */}
        <Col span={24}>
            <Space>
                <label style={{ width: 100, display: 'inline-block', textAlign: 'right' }}>操作系统：</label>
                <Checkbox.Group
                    onChange={(checkedValue: CheckboxValueType[]) => {
                        dispatch({ type: 'setData', params: { fansFilterOsType: checkedValue } })
                    }}
                    value={fansFilterOsType}
                >
                    <Checkbox value={0}>未知</Checkbox>
                    <Checkbox value={1}>安卓</Checkbox>
                    <Checkbox value={2}>IOS</Checkbox>
                </Checkbox.Group>
            </Space>
        </Col>
        <Divider style={{ margin: 0 }} />
        {/* <Col span={24}>
            <Space>
                <label style={{ width: 100, display: 'inline-block', textAlign: 'right' }}>是否VIP：</label>
                <div>
                    <Radio.Group onChange={(e: RadioChangeEvent) => { dispatch({ type: 'setData', params: { fansFilterMember: e.target.value } }) }} value={fansFilterMember}>
                        <Radio value={''}>不限</Radio>
                        <Radio value={true}>是</Radio>
                        <Radio value={false}>否</Radio>
                    </Radio.Group>
                </div>
            </Space>
        </Col>
        <Divider style={{padding:0}}/> */}
        <Col span={24}>
            <Space>
                <label style={{ width: 100, display: 'inline-block', textAlign: 'right' }}>关注时间：</label>
                <div>
                    <Radio.Group
                        onChange={(e: RadioChangeEvent) => {
                            dispatch({
                                type: 'setData',
                                params: {
                                    fansFilterSubscribeTimeType: e.target.value,
                                    fansFilterSubscribeTimeBegin: '',
                                    fansFilterSubscribeTimeEnd: '',
                                }
                            })
                        }}
                        value={fansFilterSubscribeTimeType === null ? '' : fansFilterSubscribeTimeType}
                    >
                        <Radio value={''}>不限</Radio>
                        <Radio value={0}>具体时间</Radio>
                        <Radio value={1}>常用日期</Radio>
                        <Radio value={2}>动态日期</Radio>
                    </Radio.Group>
                </div>
            </Space>
            {
                fansFilterSubscribeTimeType === 0 && <div style={{ paddingLeft: 100, marginTop: 8 }}>
                    <DatePicker.RangePicker
                        showTime={{ format: 'HH:mm:ss' }}
                        format="YYYY-MM-DD HH:mm:ss"
                        onChange={(values: any, formatString: [string, string]) => {
                            dispatch({
                                type: 'setData', params: {
                                    fansFilterSubscribeTimeBegin: formatString[0],
                                    fansFilterSubscribeTimeEnd: formatString[1],
                                }
                            })
                        }}
                        value={fansFilterSubscribeTimeBegin ? [moment(fansFilterSubscribeTimeBegin), moment(fansFilterSubscribeTimeEnd)] : undefined}
                    />
                </div>
            }
            {
                fansFilterSubscribeTimeType === 1 && <div style={{ paddingLeft: 100, marginTop: 8 }}>
                    <Input.Group compact>
                        <Input
                            style={{ width: 100, textAlign: 'center', borderRightWidth: 0 }}
                            placeholder="起始(小时)"
                            value={fansFilterSubscribeTimeBegin}
                            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                                let v = event.target.value
                                dispatch({ type: 'setData', params: { fansFilterSubscribeTimeBegin: v } })
                            }}
                        />
                        <Input
                            style={{
                                width: 30,
                                borderLeft: 0,
                                borderRight: 0,
                                pointerEvents: 'none',
                                backgroundColor: '#fff'
                            }}
                            placeholder="~"
                            disabled
                        />
                        <Input
                            className="site-input-right"
                            style={{
                                width: 100,
                                textAlign: 'center',
                                borderLeftWidth: 0
                            }}
                            value={fansFilterSubscribeTimeEnd}
                            placeholder="结束(小时)"
                            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                                let v = event.target.value
                                dispatch({ type: 'setData', params: { fansFilterSubscribeTimeEnd: v } })
                            }}
                        />
                    </Input.Group>
                    <Radio.Group
                        onChange={(e: RadioChangeEvent) => {
                            let arr = ['', ['0', '1'], ['0', '24'], ['0', '48'], ['48', '']]
                            dispatch({
                                type: 'setData',
                                params: {
                                    fansFilterSubscribeTimeBegin: arr[e.target.value][0],
                                    fansFilterSubscribeTimeEnd: arr[e.target.value][1],
                                }
                            })
                        }} value={
                            fansFilterSubscribeTimeBegin === "48" && fansFilterSubscribeTimeEnd === '' ?
                                4 : fansFilterSubscribeTimeBegin === "0" && fansFilterSubscribeTimeEnd === '48' ?
                                    3 : fansFilterSubscribeTimeBegin === "0" && fansFilterSubscribeTimeEnd === '24' ?
                                        2 :
                                        fansFilterSubscribeTimeBegin === "0" && fansFilterSubscribeTimeEnd === '1' ?
                                            1 : ''}>
                        <Radio value={1}>1小时内</Radio>
                        <Radio value={2}>24小时内</Radio>
                        <Radio value={3}>48小时内</Radio>
                        <Radio value={4}>48小时外</Radio>
                    </Radio.Group>
                </div>
            }
            {
                fansFilterSubscribeTimeType === 2 && <div style={{ paddingLeft: 100, marginTop: 8 }}>
                    <Input.Group compact>
                        <Input
                            style={{ width: 100, textAlign: 'center', borderRightWidth: 0 }}
                            placeholder="第n天"
                            value={fansFilterSubscribeTimeBegin}
                            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                                let v = event.target.value
                                dispatch({ type: 'setData', params: { fansFilterSubscribeTimeBegin: v } })
                            }}
                        />
                        <Input
                            style={{
                                width: 30,
                                borderLeft: 0,
                                borderRight: 0,
                                pointerEvents: 'none',
                                backgroundColor: '#fff'
                            }}
                            placeholder="~"
                            disabled
                        />
                        <Input
                            className="site-input-right"
                            style={{
                                width: 100,
                                textAlign: 'center',
                                borderLeftWidth: 0
                            }}
                            placeholder="第n天"
                            value={fansFilterSubscribeTimeEnd}
                            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                                let v = event.target.value
                                dispatch({ type: 'setData', params: { fansFilterSubscribeTimeEnd: v } })
                            }}
                        />
                    </Input.Group>
                </div>
            }
        </Col>
        <Divider style={{ margin: 0 }} />
        <Col span={24}>
            <Space className={style.s_label}>
                <label style={{ width: 100, display: 'inline-block', textAlign: 'right' }}> 充值情况：</label>
                <div>
                    <div style={{ marginBottom: 5 }}>
                        <Input.Group compact>
                            <Input
                                style={{ width: 100, textAlign: 'center', borderRightWidth: 0 }}
                                placeholder="最小次数"
                                value={fansFilterRechargeCountMin}
                                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                                    let v = event.target.value
                                    dispatch({ type: 'setData', params: { fansFilterRechargeCountMin: v } })
                                }}
                            />
                            <Input
                                style={{
                                    width: 30,
                                    borderLeft: 0,
                                    borderRight: 0,
                                    pointerEvents: 'none',
                                    backgroundColor: '#fff'
                                }}
                                placeholder="~"
                                disabled
                            />
                            <Input
                                className="site-input-right"
                                style={{
                                    width: 100,
                                    textAlign: 'center',
                                    borderLeftWidth: 0
                                }}
                                value={fansFilterRechargeCountMax}
                                placeholder="最大次数"
                                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                                    let v = event.target.value
                                    dispatch({ type: 'setData', params: { fansFilterRechargeCountMax: v } })
                                }}
                            />
                        </Input.Group>
                    </div>
                    <Radio.Group
                        style={{ width: '100%' }}
                        onChange={(e: RadioChangeEvent) => {
                            dispatch({
                                type: 'setData', params: {
                                    rechargeType: e.target.value,
                                    fansFilterRechargeCountMin: e.target.value === '' ? '' : e.target.value === 11 ? 10 : e.target.value === -1 ? 1 : e.target.value,
                                    fansFilterRechargeCountMax: e.target.value === 11 ? '' : e.target.value === -1 ? '' : e.target.value
                                }
                            })
                        }}
                        value={rechargeType}
                    >
                        <Radio value={''}>不限</Radio>
                        <Radio value={0}>未充值</Radio>
                        <Radio value={-1}>已充值</Radio>
                        {
                            !!open.a && <>
                                <Radio value={1}>充值1次</Radio>
                                <Radio value={2}>充值2次</Radio>
                                <Radio value={3}>充值3次</Radio>
                                <Radio value={5}>充值5次</Radio>
                                <Radio value={8}>充值8次</Radio>
                                <Radio value={10}>充值10次</Radio>
                                <Radio value={11}>充值10次以上</Radio>
                            </>
                        }
                    </Radio.Group >
                    <span className={style.open_span} onClick={() => setOpen({ ...open, a: !open.a })}>{!!open.a ? <UpCircleOutlined style={{ color: '#1890ff' }} /> : <DownCircleOutlined style={{ color: '#1890ff' }} />}</span>
                </div>
            </Space>
        </Col>
        <Divider style={{ margin: 0 }} />
        <Col span={24}>
            <Space className={style.s_label}>
                <label style={{ width: 100, display: 'inline-block', textAlign: 'right' }}>上次充值距今：</label>
                <div>
                    <div style={{ marginBottom: 5 }}>
                        <Input.Group compact>
                            <Input
                                style={{ width: 100, textAlign: 'center', borderRightWidth: 0 }}
                                placeholder="最小天数"
                                value={fansFilterRechargeTimeMin}
                                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                                    let v = event.target.value
                                    dispatch({ type: 'setData', params: { fansFilterRechargeTimeMin: v } })
                                }}
                            />
                            <Input
                                style={{
                                    width: 30,
                                    borderLeft: 0,
                                    borderRight: 0,
                                    pointerEvents: 'none',
                                    backgroundColor: '#fff'
                                }}
                                placeholder="~"
                                disabled
                            />
                            <Input
                                className="site-input-right"
                                style={{
                                    width: 100,
                                    textAlign: 'center',
                                    borderLeftWidth: 0
                                }}
                                value={fansFilterRechargeTimeMax}
                                placeholder="最大天数"
                                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                                    let v = event.target.value
                                    dispatch({ type: 'setData', params: { fansFilterRechargeTimeMax: v } })
                                }}
                            />
                        </Input.Group>
                    </div>
                    <Radio.Group
                        style={{ width: '100%' }}
                        onChange={(e: RadioChangeEvent) => {
                            dispatch({
                                type: 'setData',
                                params: {
                                    dayType: e.target.value,
                                    fansFilterRechargeTimeMin: e.target.value === '' ? '' : e.target.value === 31 ? '30' : e.target.value === 61 ? '60' : '0',
                                    fansFilterRechargeTimeMax: e.target.value === 31 ? '' : e.target.value === 61 ? '' : e.target.value
                                }
                            })
                        }}
                        value={dayType}
                    >
                        <Radio value="">不限</Radio>
                        <Radio value={15}>15天之内</Radio>
                        <Radio value={30}>30天之内</Radio>
                        {
                            !!open.b && <>
                                <Radio value={31}>30天以上</Radio>
                                <Radio value={45}>45天之内</Radio>
                                <Radio value={60}>60天之内</Radio>
                                <Radio value={61}>60天以上</Radio>
                            </>
                        }
                    </Radio.Group>

                    <span className={style.open_span} onClick={() => setOpen({ ...open, b: !open.b })}>{!!open['b'] ? <UpCircleOutlined style={{ color: '#1890ff' }} /> : <DownCircleOutlined style={{ color: '#1890ff' }} />}</span>
                </div>
            </Space>
        </Col>
        <Divider style={{ margin: 0 }} />
        <Col span={24}>
            <Space>
                <label style={{ width: 100, display: 'inline-block', textAlign: 'right' }}>累计充值金额：</label>
                <Input.Group compact>
                    <Input
                        style={{ width: 100, textAlign: 'center', borderRightWidth: 0 }}
                        placeholder="最小金额"
                        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                            let v = event.target.value
                            dispatch({ type: 'setData', params: { fansFilterRechargeMin: v } })
                        }}
                        value={fansFilterRechargeMin}
                    />
                    <Input
                        style={{
                            width: 30,
                            borderLeft: 0,
                            borderRight: 0,
                            pointerEvents: 'none',
                            backgroundColor: '#fff'
                        }}
                        placeholder="~"
                        disabled
                    />
                    <Input
                        className="site-input-right"
                        style={{
                            width: 100,
                            textAlign: 'center',
                            borderLeftWidth: 0
                        }}
                        placeholder="最大金额"
                        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                            let v = event.target.value
                            dispatch({ type: 'setData', params: { fansFilterRechargeMax: v } })
                        }}
                        value={fansFilterRechargeMax}
                    />
                </Input.Group>
            </Space>
        </Col>
        <Divider style={{ margin: 0 }} />
        {/* <Col span={24}>
            <Space className={style.s_label}>
                <label style={{ width: 100, display: 'inline-block', textAlign: 'right' }}>书币余额：</label>
                <div>
                    <div style={{ marginBottom: 5 }}>
                        <Input.Group compact>
                            <Input
                                style={{ width: 100, textAlign: 'center', borderRightWidth: 0 }}
                                placeholder="最小书币"
                                value={fansFilterCoinCountMin}
                                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                                    let v = event.target.value
                                    dispatch({ type: 'setData', params: { fansFilterCoinCountMin: v } })
                                }}
                            />
                            <Input
                                style={{
                                    width: 30,
                                    borderLeft: 0,
                                    borderRight: 0,
                                    pointerEvents: 'none',
                                    backgroundColor: '#fff'
                                }}
                                placeholder="~"
                                disabled
                            />
                            <Input
                                className="site-input-right"
                                style={{
                                    width: 100,
                                    textAlign: 'center',
                                    borderLeftWidth: 0
                                }}
                                placeholder="最大书币"
                                value={fansFilterCoinCountMax}
                                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                                    let v = event.target.value
                                    dispatch({ type: 'setData', params: { fansFilterCoinCountMax: v } })
                                }}
                            />
                        </Input.Group>
                    </div>
                    <Radio.Group
                        style={{ width: '100%' }}
                        onChange={(e: RadioChangeEvent) => {
                            let arr = [['', ''], ['0', '500'], ['501', '1000'], ['1001', '3000'], ['3001', '10000'], ['10000', '']]
                            dispatch({
                                type: 'setData',
                                params: {
                                    countType: e.target.value,
                                    fansFilterCoinCountMin: e.target.value === '' ? arr[0][0] : arr[e.target.value][0],
                                    fansFilterCoinCountMax: e.target.value === '' ? arr[0][1] : arr[e.target.value][1],
                                }
                            })
                        }}
                        value={countType}>
                        <Radio value="">不限</Radio>
                        <Radio value={1}>低于500</Radio>
                        <Radio value={2}>501-1000</Radio>
                        {
                            !!open.c && <>
                                <Radio value={3}>1001-3000</Radio>
                                <Radio value={4}>3001-10000</Radio>
                                <Radio value={5}>10000以上</Radio>
                            </>
                        }
                    </Radio.Group>
                    <span className={style.open_span} onClick={() => setOpen({ ...open, c: !open.c })}>{!!open['c'] ? <UpCircleOutlined style={{ color: '#1890ff' }} /> : <DownCircleOutlined style={{ color: '#1890ff' }} />}</span>
                </div>
            </Space>
        </Col>
        <Divider style={{padding:0}}/> */}
       {activeTime && <Col span={24}>
            <Space className={style.s_label}>
                <label style={{ width: 100, display: 'inline-block', textAlign: 'right' }}>活跃时间：</label>
                <div>
                    <div style={{ marginBottom: 5 }}>
                        <Input.Group compact>
                            <Input
                                style={{ width: 100, textAlign: 'center', borderRightWidth: 0 }}
                                placeholder="最小时间"
                                value={fansFilterActiveTimeMin}
                                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                                    let v = event.target.value
                                    dispatch({ type: 'setData', params: { fansFilterActiveTimeMin: v } })
                                }}
                            />
                            <Input
                                style={{
                                    width: 30,
                                    borderLeft: 0,
                                    borderRight: 0,
                                    pointerEvents: 'none',
                                    backgroundColor: '#fff'
                                }}
                                placeholder="~"
                                disabled
                            />
                            <Input
                                className="site-input-right"
                                style={{
                                    width: 100,
                                    textAlign: 'center',
                                    borderLeftWidth: 0
                                }}
                                placeholder="最大时间"
                                value={fansFilterActiveTimeMax}
                                onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
                                    let v = event.target.value
                                    dispatch({ type: 'setData', params: { fansFilterActiveTimeMax: v } })
                                }}
                            />
                        </Input.Group>
                    </div>
                    <Radio.Group
                        style={{ width: '100%' }}
                        onChange={(e: RadioChangeEvent) => {
                            let arr = [['', ''], ['0', '1'], ['1', '3'], ['3', '12'], ['12', '24'], ['24', '48']]
                            dispatch({
                                type: 'setData',
                                params: {
                                    timeType: e.target.value,
                                    fansFilterActiveTimeMin: e.target.value === '' ? arr[0][0] : arr[e.target.value][0],
                                    fansFilterActiveTimeMax: e.target.value === '' ? arr[0][1] : arr[e.target.value][1],
                                }
                            })
                        }}
                        value={timeType}
                    >
                        <Radio value="">不限</Radio>
                        <Radio value={1}>1小时</Radio>
                        <Radio value={2}>1-3小时</Radio>
                        {
                            !!open.d && <>
                                <Radio value={3}>3-12小时</Radio>
                                <Radio value={4}>12-24小时</Radio>
                                <Radio value={5}>24-48小时</Radio>
                            </>
                        }
                    </Radio.Group>
                    <span className={style.open_span} onClick={() => setOpen({ ...open, d: !open.d })}>{!!open['d'] ? <UpCircleOutlined style={{ color: '#1890ff' }} /> : <DownCircleOutlined style={{ color: '#1890ff' }} />}</span>
                </div>

            </Space>
        </Col>}
    </Row >
}

export default React.memo(FansSelect, (a, b) => {
    if (JSON.stringify(a) === JSON.stringify(b)) {
        return true
    }
    return false
})