import { View, Image, ScrollView, Text } from "@tarojs/components"
import './rank.less'
import rankBg from '@/assets/bg/rankBg.png'
import { useEffect, useReducer, useState } from "react"
import MyNavBar from "@/components/MyNavBar/MyNavBar"
import TabSwitch from "@/components/TabSwitch/TabSwitch"
import rank1 from '@/assets/icon/rank1.png'
import rank2 from '@/assets/icon/rank2.png'
import rank3 from '@/assets/icon/rank3.png'
import Taro from "@tarojs/taro"
import { complaintReportPageList, liftFingerPageList } from "@/services/rank"
import { objectToQuery } from "@/utils"

const imgs = { rank1, rank2, rank3 }

const Rank = () => {
    const [switchs, setSwitchs] = useState([
        { txt: '举手之劳榜', active: true },
        { txt: '投诉举报榜', active: false },
    ])
    const switchClick = (index: number) => {
        const list = switchs.map((v, i) => {
            v.active = index === i
            return v
        })
        setSwitchs(list)
        setTotal(0)
        listQueryDispatch({ page: 1 })
    }

    // const [dateOptions] = useState([
    //     { label: '月', value: 'month' },
    //     { label: '周', value: 'week' },
    //     { label: '日', value: 'day' }
    // ])
    const defaultQuery = { page: 1, count: 10 }
    type queryType = typeof defaultQuery
    const [listQuery, listQueryDispatch] = useReducer((state: queryType, action: Partial<queryType>) => ({ ...state, ...action }), { ...defaultQuery })
    const [list, setList] = useState<any[]>([])
    const [total, setTotal] = useState(0)

    const getRankLiftFingerList = async () => {
        if (list.length >= total && total !== 0) {
            Taro.showToast({ title: '没有更多了', mask: true, icon: 'none' })
            return
        }
        let res: any
        if (switchs[0].active) {
            res = await liftFingerPageList(listQuery)
        } else {
            res = await complaintReportPageList(listQuery)
        }
        if (res.code === 200) {
            console.log(res);
            setTotal(Number(res.data.total))
            const newList = res.data.items
            if (listQuery.page === 1) {
                setList(newList)
            } else {
                setList([...list, ...newList])
            }
        }
    }

    const loadData = () => {
        listQueryDispatch({ page: listQuery.page + 1 })
    }
    useEffect(() => {
        getRankLiftFingerList()
    }, [listQuery])

    const toMyGood = ({ nickname, score, avatar, informantId }: any) => {
        const type = switchs.findIndex((v) => v.active)
        const queryStr = objectToQuery({
            nickname,
            score,
            avatar,
            type,
            informantId
        })
        console.log(queryStr);
        Taro.navigateTo({
            url: '/pages/rank/myGood/myGood?' + queryStr
        })
        // Taro.navigateTo({
        //     url: '/pages/rank/myGood/myGood?userInfo=' + JSON.stringify(userInfo) + '&type=' + type
        // })
    }

    return <View className="box">
        <MyNavBar background="transparent" isPerch={false} leftColor="#fff" />
        <Image style={{ width: '100%', height: '510rpx' }} src={rankBg} />
        <View className="contentBox">
            <View className="topSwitch">
                {switchs.map((v, i) => {
                    const { txt, active } = v
                    const zIndex = switchs.length - i
                    return <View className={`switchItem ${active ? 'active' : ''}`} key={i} style={{ zIndex }} onClick={() => switchClick(i)}>
                        {txt}
                    </View>
                })}
            </View>
            {/* <View className="timeBox">
                <View className="time">2024年 9月</View>
                <TabSwitch options={dateOptions} />
            </View> */}
            <ScrollView className="scrollBox" scrollY onScrollToLower={loadData}>
                {list.map((v, i) => {
                    const { avatar, score, serialNumber, nickname, informantId } = v
                    return <View className="rankItem" key={i} onClick={() => toMyGood(v)}>
                        <View className="left">
                            <View className="imgBox">
                                {serialNumber > 3 ? serialNumber : <Image style={{ width: '50rpx', height: '50rpx' }} src={imgs[`rank${serialNumber}`]} />}
                            </View>
                            <Image className="headPortrait" src={avatar} />
                            <Text className="name">{nickname}</Text>
                        </View>
                        <Text className="num">{score}</Text>
                    </View>
                })}
            </ScrollView>
        </View>
    </View>
}

export default Rank