import { Image, Text, View } from "@tarojs/components"
import next from '@/images/next.png'
import './index.scss'
import { useState } from "react"
import Taro from "@tarojs/taro"
import backNav from '@/images/backNav.png'
import { useEffect } from "react"
import { Infiniteloading } from "@nutui/nutui-react-taro"
import empty from '@/images/empty.png'
import { msgList } from "../../utils/api"
import { formatDateByStr } from "../../utils/utils"

const Login = () => {
    const limit = 20
    const [page, setPage] = useState(1)
    const [list, setList] = useState([])
    const [total, setTotal] = useState(0)

    useEffect(() => {
        const offset = (page - 1) * limit

        msgList({ offset, limit }).then(re => {
            setList(it => [...it, ...re.items])
            setTotal(re.total)
        })
    }, [page])
    // 返回页面
    const backFn = () => {
        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
    }

    const navDetail = (id) => {
        Taro.navigateTo({
            url: '/pages/message-detail/index?id=' + id
        })
    }

    return <View className="message-frame  h-screen text-base">
        <View className='addr-detail-title'>
            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
            消息中心
        </View>
        <View className="message-list-container flex-col" id="newsScroll">

            <Infiniteloading
                containerId="newsScroll"
                useWindow={false}
                loadTxt="loading"
                loadMoreTxt={<View></View>}
                loadIcon='loading'
                hasMore={total > list.length}
                onLoadMore={(x) => {
                    setPage(p => p + 1)
                    x()
                }}
            >
                {
                    list.map(item => {
                        return <View className="message-item flex-col items-center mt32" key={item.id}>
                            <View className="message-time">{formatDateByStr(item.created_at)}</View>
                            <View className="message-item-body mt-22">
                                <View className="message-item-content">
                                    <View className="message-item-title">{item.title}</View>
                                    <View className="mt20">{item.summary}</View>
                                </View>
                                <View className="flex-between message-item-action" onClick={() => { navDetail(item.id) }}>
                                    <Text>查看详情</Text>
                                    <Image src={next} className="next-icon" />
                                </View>
                            </View>
                        </View>
                    })
                }
            </Infiniteloading>
            {
                !list.length && <Image src={empty} className="order-empty" />
            }
        </View>
    </View>
}


export default Login