import MyNavBar from "@/components/MyNavBar/MyNavBar"
import { View, Image, Text, ScrollView } from "@tarojs/components"
import './myGood.less'
import userPic from '@/assets/icon/userPic.png'
import icon16 from '@/assets/icon/icon16.png'
import { useEffect, useReducer, useState } from "react"
import Taro from "@tarojs/taro"
import { complaintReportDetailPageList, liftFingerDetailPageList } from "@/services/rank"


const MyGood = () => {
    const { params: { informantId, type, nickname, score, avatar } } = Taro.getCurrentInstance().router!

    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 getList = async () => {
        if (list.length >= total && total !== 0) {
            Taro.showToast({ title: '没有更多了', mask: true, icon: 'none' })
            return
        }
        let res: any
        const data = { ...listQuery, informantId }
        if (type === '0') {
            res = await liftFingerDetailPageList(data)
        } else {
            res = await complaintReportDetailPageList(data)
        }
        if (res.code === 200) {
            setTotal(Number(res.data.total))
            const newList = res.data.items
            if (listQuery.page === 1) {
                setList(newList)
            } else {
                setList([...list, ...newList])
            }
        }
    }
    useEffect(() => {
        getList()
    }, [listQuery])

    const loadData = () => {
        listQueryDispatch({ page: listQuery.page + 1 })
    }
    return <View className="box">
        <MyNavBar background="transparent" isPerch={false} />
        <View className='contentBox'>
            <View className="hedBox">
                <Image className="img" src={avatar as string} />
                <View className="txt">
                    <View className="name">{nickname}</View>
                    <View className="score">
                        <Image className="img" src={icon16} />
                        <Text className="txt1">积分</Text>
                        <Text className="txt2">{score}</Text>
                    </View>
                </View>
            </View>
            <View className="title">
                善举历史
                <View className="bottom" />
            </View>
            <ScrollView className='listBox' scrollY onScrollToLower={loadData}>
                {list.map((v, i) => {
                    const { title, photos, createTime } = v
                    return <View className="listItem" key={i}>
                        <Image className="img" src={photos} mode='aspectFit' />
                        <View className="txtBox">
                            <View className="txt">{title}</View>
                            <View className="time">{createTime}</View>
                        </View>
                    </View>
                })}
            </ScrollView>
        </View>
    </View>
}

export default MyGood