<template>
    <view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden order-list" :style="themeColor()">
        <view class="fixed left-0 top-0 right-0 z-10" v-if="statusLoading">
            <scroll-view :scroll-x="true" class="tab-style-2">
                <view class="tab-content">
                    <view class="tab-items" :class="{ 'class-select': orderState === item.status.toString() }" @click="orderStateFn(item.status)" v-for="(item, index) in orderStateList">{{ item.name }}</view>
                </view>
            </scroll-view>
        </view>

        <mescroll-body ref="mescrollRef" top="88rpx" @init="mescrollInit" :down="{ use: false }" @up="getSeckillOrderFn">
            <view class="sidebar-margin pt-[var(--top-m)]" v-if="list.length">
                <template v-for="(item, index) in list" :key="index">
                    <view class="mb-[var(--top-m)] card-template">
                        <view @click.stop="toLink(item)">
                            <view class="flex justify-between items-center">
                                <view class="text-[#303133] text-[26rpx] font-400 leading-[36rpx] flex items-center">
                                    <view v-if="item.third_name" class="text-primary text-[18rpx] border-primary border-[2rpx] border-solid rounded-[4rpx] leading-[24rpx] px-[3rpx]">{{ item.third_name }}</view>
                                    <view class="ml-[10rpx] text-[24rpx] font-400 text-[#303133]">{{ item.create_time }}</view> 
                                    <!-- <text>{{ t('orderNo') }}:</text>
                                    <text class="ml-[10rpx]">{{ item.order_no }}</text>
                                    <text class="text-[#303133] text-[26rpx] font-400 nc-iconfont nc-icon-fuzhiV6xx1 ml-[11rpx]" @click.stop="copy(item.order_no)"></text> -->
                                </view>
								<!-- <view v-if="item.status  == -1" class="text-[#303133] text-[26rpx] max-w-[85px] leading-[34rpx] truncate" :class="{'text-primary': item.status  == 1,'!text-[var(--text-color-light9)]' :item.status  == 5 || item.status  == -1}">{{ item.close_type_name }}</view> -->
                                <view class="text-[#303133] text-[26rpx] leading-[34rpx]" :class="{'text-primary': item.status  == 1,'!text-[var(--text-color-light9)]' :item.status  == 1 || item.status  == -1}">{{ item.status_name }}</view>
                            </view>
                            <view>
                                <view class="flex box-border mt-[20rpx]">
                                    <u--image width="150rpx" height="150rpx" :radius="'var(--goods-rounded-big)'" :src="img(item.goods?.goods_cover_thumb_small ? item.goods?.goods_cover_thumb_small : '')" mode="aspectFill">
                                        <template #error>
                                            <image class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill" />
                                        </template>
                                    </u--image>
                                    <view class="ml-[20rpx] flex flex-1 flex-col box-border">
                                        <view class="flex justify-between items-baseline">
                                            <view class="max-w-[322rpx] text-[28rpx] leading-[40rpx] font-400 multi-hidden text-[#303133]">{{ item.goods_name }}</view>
                                            <template>
                                                <view class="text-right leading-[42rpx] ml-[10rpx]">
                                                    <text class="text-[22rpx] price-font">￥</text>
                                                    <text class="text-[36rpx] font-500 price-font">{{ parseFloat(item.goods_money).toFixed(2).split('.')[0] }}</text>
                                                    <text class="text-[22rpx] font-500 price-font">.{{ parseFloat(item.goods_money).toFixed(2).split('.')[1] }}</text>
                                                </view>
                                            </template>
                                        </view>
                                        <view class="flex justify-between items-baseline text-[#303133] mt-[14rpx]">
                                            <view>
                                                <view class="text-[24rpx] text-[var(--text-color-light6)] font-400 truncate leading-[34rpx] max-w-[369rpx] mb-[10rpx]" v-if="item.sku_name">{{ item.sku_name }}</view>
                                                
                                            </view>
                                            <text class="text-right text-[26rpx] font-400 w-[90rpx] leading-[36rpx]">x{{ item.num }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="flex justify-end items-center mt-[20rpx]">
                            <view class="flex items-baseline">
                                <view class="text-[22rpx] font-400 leading-[30rpx] text-[#303133]">{{ t('actualPayment') }}：</view>
                                <view class="leading-[1] text-[var(--price-text-color)]">
                                    <text class="text-[22rpx] leading-[26rpx] price-font">￥</text>
                                    <text class="text-[36rpx] font-500 leading-[40rpx] price-font">{{ parseFloat(item.order_money).toFixed(2).split('.')[0] }}</text>
                                    <text class="text-[22rpx] font-500 leading-[28rpx] price-font">.{{ parseFloat(item.order_money).toFixed(2).split('.')[1] }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="flex justify-end text-[28rpx] mt-[20rpx] items-center" v-if="(item.status == 0) || (item.status == 3) || (item.status == 5 && evaluateConfig.evaluate_is_show && evaluateConfig.is_evaluate == 1)">
                            <view class="text-[24rpx] font-500 leading-[52rpx] h-[56rpx] min-w-[150rpx] text-center border-[2rpx] border-solid border-[#ccc] rounded-full text-[var(--text-color-light3)] box-border" v-if="item.status == 0" @click.stop="orderBtnFn(item, 'close')">{{ t('orderClose') }}</view>
                            <view class="text-[24rpx] font-500 flex-center h-[56rpx] min-w-[150rpx] text-center border-[0] text-[#fff] primary-btn-bg rounded-full ml-[20rpx] box-border" v-if="item.status == 0" @click.stop="orderBtnFn(item, 'pay')">{{ t('topay') }}</view>
                        </view>
                    </view>
                </template>
            </view>
            <mescroll-empty v-if="!list.length && loading" :option="{tip : '暂无订单'}"></mescroll-empty>
        </mescroll-body>
        <pay ref="payRef" @close="payClose" :ignore-pay="['friendspay']"></pay>
        <!-- #ifdef MP-WEIXIN -->
        <!-- 小程序隐私协议 -->
        <wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
        <!-- #endif -->
    </view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { t } from '@/locale'
import { img, redirect, copy } from '@/utils/common'
import { getSeckillOrderStatus, getSeckillOrder ,seckillOrderClose} from '@/addon/seckill/api/order';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onLoad, onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app';
import useConfigStore from "@/stores/config";

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
const list = ref<Array<Object>>([]);
const loading = ref<boolean>(false);
const statusLoading = ref<boolean>(false);
const orderState = ref('')
const orderStateList: any = ref([]);
const evaluateConfig = ref("")

const mch_id = ref('')
const isTradeManaged = ref(false)

const wxPrivacyPopupRef: any = ref(null)

onLoad((option: any) => {
    orderState.value = option.status || "";
    getSeckillOrderStatusFn();
    // #ifdef MP
    nextTick(() => {
        if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
    })
    // #endif
});

onShow(() => {
    nextTick(() => {
        // 评价完成之后，会返回到订单列表，需要请求最新数据
        if (getMescroll()) {
            getMescroll().resetUpScroll();
        }
    })
})

const getSeckillOrderFn = (mescroll: any) => {
    loading.value = false;
    let data: object = {
        page: mescroll.num,
        limit: mescroll.size,
        status: orderState.value
    };

    getSeckillOrder(data).then((res: any) => {
        let newArr = (res.data.data as Array<Object>);
        //设置列表数据
        if (mescroll.num == 1) {
            list.value = []; //如果是第一页需手动制空列表
        }

        list.value = list.value.concat(newArr);
        mescroll.endSuccess(newArr.length);

        mch_id.value = res.data.mch_id;
        isTradeManaged.value = res.data.is_trade_managed;
        loading.value = true;
    }).catch(() => {
        loading.value = true;
        mescroll.endErr(); // 请求失败, 结束加载
    })
}

const getSeckillOrderStatusFn = () => {
    statusLoading.value = false;
    orderStateList.value = [];
    let obj = { name: '全部', status: '' };
    orderStateList.value.push(obj);

    getSeckillOrderStatus().then((res: any) => {
        Object.entries(res.data).forEach(([key, value]) => {
            orderStateList.value.push({
                name: value,  
                status: key   
            });
        });
        statusLoading.value = true;
    }).catch(() => {
        statusLoading.value = true;
    })
}

const orderStateFn = (status: any) => {
    orderState.value = status.toString();
    list.value = [];
    getMescroll().resetUpScroll();
};

const toLink = (data: any) => {
    redirect({ url: '/addon/seckill/pages/order/detail', param: { order_id: data.id } })
}

// 支付
const payRef = ref(null)
const orderBtnFn = (data: any, type = '') => {
    if (type == 'pay')
        payRef.value?.open(data.order_type, data.id, `/addon/seckill/pages/order/detail?order_id=${ data.id }`);
    else if (type == 'close') {
        close(data);
    }
}

//关闭订单
const close = (item: any) => {
    uni.showModal({
        title: '提示',
        content: '您确定要关闭该订单吗？',
        confirmColor: useConfigStore().themeColor['--primary-color'],
        success: res => {
            if (res.confirm) {
                seckillOrderClose({id: item.id}).then((data) => {
                    getMescroll().resetUpScroll();
                })
            }
        }
    })
}

</script>
<style>
.order-list .mescroll-body {
    padding-bottom: constant(safe-area-inset-bottom) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.order-list :deep(.u-count-down__text) {
    font-size: 24rpx !important;
    color: #EF000C !important;
}
</style>
<style lang="scss" scoped>
.text-color {
    color: var(--primary-color);
}

.bg-color {
    background-color: var(--primary-color);
}
</style>
