import { CancelOrderApi } from "@/api/order"
import { alert } from "@/common/common"
import { ORDER_STATUS } from "@/common/enum"
import { View } from "@tarojs/components"
import Taro from "@tarojs/taro"
import { useCallback, useRef, memo } from "react"
import styles  from './index.module.scss'

type Param = {
    orderInfo: {
        status: number, //订单状态
        orderId: number, //订单id
        actual_amount: number, //实付金额
        wait_pay_amount: number, //待付金额
    }|null,
    onClick?: (val: number) => void //点击后触发的事件，返回订单状态
}

// export const OrderBtnsemus = [{id:1, label:'取消订单'},{id:2, label:'去付款'},{id:3, label:'申请退款'},{id:4, label:'查看物流'}, {id:5, label:'申请退货'}, {id:6, label:'确认收货'}, {id:7, label:'再次购买'}]
export default memo(({orderInfo, onClick}:Param) => {
    const {
            SaleOrderStatusBooking,
            SaleOrderStatusArranging,
            SaleOrderStatusArranged,
            SaleOrderStatusWaitingDelivery,
            SaleOrderStatusComplete,
            SaleOrderStatusCancel,
            SaleOrderStatusRefund,
            SaleOrderStatusWaitingPayment,
            SaleOrderStatusWaitingReceipt,
            SaleOrderStatusAlreadyReceipt
        } = ORDER_STATUS
    //订单按钮按订单状态归类
    const orderBtnsList = useRef([
        {
            id: 1,
            value: [SaleOrderStatusBooking.value, SaleOrderStatusArranging.value, SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value], //取消订单按钮对应： 待接单，配布中，已配布, 待付款， 待发货
            label: '取消订单'
        },
        {
            id: 2,
            value: [SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value], //去付款按钮对应：待付款， 待发货, 待收货, 已收货, 已完成
            label: '去付款'
        },
        {
            id: 3,
            value: [SaleOrderStatusWaitingDelivery.value], //取消订单按钮对应： 待发货
            label: '申请退款'
        },
        {
            id: 4,
            value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款
            label: '查看物流'
        },
        {
            id: 5,
            value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货, 已收货, 已退款
            label: '申请退货'
        },
        {
            id: 6,
            value: [SaleOrderStatusWaitingReceipt.value], //取消订单按钮对应： 待收货
            label: '确认收货'
        },
        {
            id: 7,
            value: [SaleOrderStatusWaitingReceipt.value,SaleOrderStatusAlreadyReceipt.value,SaleOrderStatusComplete.value,SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货，已收货，已完成, 已退款
            label: '再次购买'
        }
    ])
    //判断是否显示该按钮
    const orderBtnsShow = useCallback((item) => {
        if(orderInfo) {
            if(item.id == 1) {
                //取消订单按钮
                return( orderInfo.actual_amount == 0 && item.value.includes(orderInfo.status)) //在代发货之前没有付过款
            } else if (item.id == 2) {
                //去付款按钮
                return( orderInfo.wait_pay_amount != 0 && item.value.includes(orderInfo.status)) //只要没有付完款就显示
            } else if(item.id == 3) {
                //申请退款
                return (orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //在代发货之前付过款
            } else {
                return item.value.includes(orderInfo.status)
            }
        }
    },[orderInfo])

    //点击按钮操作
    const submitBtns = (val) => {
        (val == 1)&&cancelOrder(); //取消订单按钮
        (val == 2)&&onClick?.(val); //去付款按钮
    }

    //取消订单
    const {fetchData: cancelFetchData} = CancelOrderApi()
    const cancelOrder = () => { 
        Taro.showModal({
            title: '要取消该订单吗？',
            success: async function (res) {
              if (res.confirm) {
                let res = await cancelFetchData({id: orderInfo?.orderId})
                if(res.success) {
                    alert.success('取消成功')
                    onClick?.(1)
                } else {
                    alert.none(res.msg)
                }
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
    }

    return (
        <View className={styles.btns_list}>
            {orderBtnsList.current.map((item) => 
                orderBtnsShow(item)&&<View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id)}>{item.label}</View>
            )}
        </View>
    )
})