import { formatImgUrl } from "@/common/fotmat";
import { Image, Text, View } from "@tarojs/components";
import { memo, useEffect, useMemo, useRef, useState } from "react";
import classnames from "classnames";
import styles  from './index.module.scss'
import dayjs from "dayjs";
import { useTimeCountDown } from "@/use/useCommon";
import { ORDER_STATUS, PAYMENT_METHOD } from "@/common/enum";

type List = {
    status: string,
    time: string,
    tag: string,
    desc: string,
    expire_time: string
}

type Param = {
    onRefresh?: () => void,
    orderInfo?: {
        logistics_details:List[], //订单状态列表
        payment_method: number, //支付方式
        status: number, //订单状态
    }
}


export default memo(({orderInfo, onRefresh}:Param) => {

    const {showTime, onStart, timeStatus} = useTimeCountDown()

    //订单状态枚举
    const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS

    //获取预付款最后时间
    const endTime = useMemo(() => {
        if(orderInfo?.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) {
            return orderInfo.logistics_details[0].expire_time
        } 
        return ''
    }, [orderInfo])

    useEffect(() => {
        if(endTime) onStart(endTime)
    }, [endTime])

    useEffect(() => {
       if(timeStatus == 2) onRefresh?.()
    }, [timeStatus])


    return (
        <View className={styles.advance_main}> 
            <View className={styles.time_con}>
                <View className={styles.times}>
                    <Text className={styles.text}>剩</Text>
                    <Text className={styles.num}>{showTime.HH}</Text>
                    <Text className={styles.separate}>:</Text>
                    <Text className={styles.num}>{showTime.MM}</Text>
                    <Text className={styles.separate}>:</Text>
                    <Text className={styles.num}>{showTime.SS}</Text>
                </View>
                <Text>等待买家付款，超时自动取消</Text>
            </View>
            <View className={styles.cardIcon}>
                <Image className={styles.image} src={formatImgUrl("/mall/my_cart.png")}/>
            </View>
            <View className={styles.refresh} onClick={() => onRefresh?.()}>
                <Text className={classnames(styles.mconfont, 'iconfont icon-shuaxin')}></Text>
                <Text className={classnames(styles.refresh_text)}>刷新</Text>
            </View>
        </View>
    )
})