import { Image, Input, Text, View } from "@tarojs/components"

import empty from '@/images/empty.png'
import './index.scss'
import { Button } from "@nutui/nutui-react-taro"
import { useState } from "react"
import Taro from "@tarojs/taro"
import backNav from '@/images/backNav.png'
import { Picker } from "@nutui/nutui-react-taro"
import { Infiniteloading } from "@nutui/nutui-react-taro"
import { useEffect } from "react"
import { orderList } from "../../utils/api"
import { navigateTo, orderState } from "../../utils/utils"



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

    // 返回页面
    const backFn = () => {
        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
    }

    useEffect(() => {
        const offset = (page - 1) * limit
        let state = tabKey
        if (tabKey == '0') {
            state = ''
        }
        orderList(chanel, { state, offset, limit }).then(re => {
            setList(re.items)
            setTotal(re.total)
        })
    }, [tabKey, page])


    return <View className="order-frame bg-slate-50 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="order-container relative">

            <View className="order-tabs flex-around">
                <View className={'order-tab-pane ' + (tabKey == '0' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('0')}>全部</View>
                <View className={'order-tab-pane ' + (tabKey == 'paid' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('paid')}>待发货</View>
                <View className={'order-tab-pane ' + (tabKey == 'sent' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('sent')}>已发货</View>
                <View className={'order-tab-pane ' + (tabKey == 'received' ? 'order-tab-pane-active' : '')} onClick={() => setTabKey('received')}>已收货</View>
            </View>
            <View className="orderScroll" id="orderScroll">
                {
                    list.length > 0 && <Infiniteloading
                        containerId="orderScroll"
                        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="order-item-container mt20 flex-col" key={item.id}>
                                    <View className="flex-between">
                                        <Text>订单号：{item.id}</Text>
                                        <Text className="text-gold">{orderState.get(item.state)}</Text>
                                    </View>
                                    <View className="order-goods flex-between" onClick={() => Taro.navigateTo({ url: `/pages/order-detail/index?id=${item.id}` })}>
                                        <View className="order-goods-left flex-start">
                                            <Image src={item.product.cover_image} className="order-goods-img" />
                                            <View className="flex-col ml17">
                                                <Text>{item.product.name}</Text>
                                                <Text>¥{item.amount}</Text>
                                            </View>
                                        </View>
                                        <View className="order-goods-num">X1</View>
                                    </View>
                                    <View className="order-goods-action flex-between">
                                        <View className="order-goods-settle">
                                            <Text>已付金额:</Text>
                                            <Text className="text-gold">¥{item.amount}</Text>
                                        </View>
                                        <Button className="order-goods-btn flex-center order-btn-algin" onClick={() => {
                                            navigateTo(`/pages/settle/index?id=${item.product_id}`)
                                        }}>再次购买</Button>
                                        {/* <Button className="order-goods-btn flex-center order-btn-pay">立即付款</Button> */}
                                    </View>
                                </View>
                            })
                        }

                    </Infiniteloading>
                }
                {
                    !list.length && <Image src={empty} className="order-empty" />
                }
            </View>

        </View>
    </View>
}


export default Login