<template>
    <view class="wrap">
        <scroll-view
            v-if="!showEmpty"
            scroll-with-animation
            :scroll-y="true"
            :show-scrollbar="false"
            class="order-list"
        >
            <view v-for="item in dataList" :key="item?.id" class="order-item">
                <view class="item-lf">
                    <!-- 商品封面 -->
                    <image :src="item?.goodsCover" mode="widthFix" class="goods-cover" />
                    <!-- 标题信息 -->
                    <view class="content-wrap">
                        <view class="bottom-content">
                            <view v-if="item.goodsChildCategoryName" class="label text-ellipsis">{{
                                item.goodsChildCategoryName
                            }}</view>
                            <view class="title-wrap">
                                <view class="title text-ellipsis-2">{{ item.goodsName }}</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="item-rt">
                    <view class="content-top">
                        <view class="order-info">
                            <view class="order-info-item"> 订单号：{{ item?.orderNo }} </view>
                            <view class="order-info-item"
                                >订单状态：{{ ORDER_STATE_CONFIG?.[item?.state] || '未知' }}</view
                            >
                            <view v-if="item?.refundTime" class="order-info-item">
                                退款时间：{{ item?.refundTime }}
                            </view>
                            <view v-else-if="item?.completeTime" class="order-info-item">
                                完成时间：{{ item?.completeTime }}
                            </view>
                            <view v-else-if="item?.expireTime" class="order-info-item">
                                有效期至：{{ item?.expireTime }}
                            </view>
                            <view v-else-if="item?.payTime" class="order-info-item">
                                支付时间：{{ item?.payTime }}
                            </view>
                            <view v-else-if="item?.activeTime" class="order-info-item">
                                下单时间：{{ item?.activeTime }}
                            </view>
                            <view class="order-info-item">总金额：¥{{ item?.amount }}</view>
                        </view>
                        <view v-if="item.orderType" class="order-type">
                            {{ GOODS_TYPE?.[item.orderType] || '到店' }}
                        </view>
                    </view>
                    <view class="content-bottom">
                        <view
                            v-if="item?.state === BIZ_ORDER_STATE.WAIT_PAY && item?.payType === PAY_TYPE.WX_PAY"
                            class="btn btn-primary"
                            @click="handlePay(item)"
                            >继续支付</view
                        >
                        <!-- 待使用 -->
                        <view
                            v-if="item?.state === BIZ_ORDER_STATE.WAIT_USE"
                            class="btn btn-default"
                            @click="handleRefund(item.id)"
                            >申请退款</view
                        >
                        <view v-else class="blank" />
                        <view
                            v-if="item.stewardPhone"
                            class="order-service"
                            @click="onMakePhoneCall(item.stewardPhone)"
                        >
                            <text class="iconfont icon-a1x" />
                            飞行管家
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="isShowBottom" class="ui-no-more">没有更多了~</view>
        </scroll-view>
        <!-- 卡券空状态 -->
        <view v-if="showEmpty" class="empty-wrap">
            <empty-block :image-src="EMPTY_PNG" text="还没有订单信息哦" />
        </view>
        <!-- 登录弹框 -->
        <popup-login ref="popupLoginRef" />
    </view>
</template>

<script setup lang="ts">
import config from '@/../config/config';
import { getListBuzOrder, refundApply, repay } from '@/services/api-order';
import type { OrderListBuzOrderResponse } from '@/types/http-types/order/listBuzOrder';
import { subscribeMessage, uniRequestPayment } from '@/utils/BusinessUtils';
import { GOODS_TYPE } from '@/utils/constants';
import { BIZ_ORDER_STATE, PAY_TYPE } from '@/utils/enum';
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
import { computed, reactive, ref, toRaw, watch } from 'vue';
import { useStore } from 'vuex';
const EMPTY_PNG = `${config.assetPath}/images/book/empty-order.png`;
const showEmpty = ref(false); //是否显示空状态
const store = useStore();
const ORDER_STATE_CONFIG = {
    [BIZ_ORDER_STATE.WAIT_PAY]: '待支付',
    [BIZ_ORDER_STATE.WAIT_USE]: '待使用',
    [BIZ_ORDER_STATE.FINISHED]: '已核销',
    [BIZ_ORDER_STATE.WAIT_REFUND]: '待退款',
    [BIZ_ORDER_STATE.REFUNDED]: '已退款',
    [BIZ_ORDER_STATE.EXPIRED]: '已过期',
    [BIZ_ORDER_STATE.CLOSED]: '已关闭',
};

let totalNum = ref(0);
const queryState = reactive({
    page: 1,
    size: 10,
});

let dataList = ref<OrderListBuzOrderResponse['items']>([]);
const isShowBottom = computed(() => dataList.value.length >= totalNum.value && totalNum.value > 5);

// 请求列表数据
const getListData = async () => {
    const res = await getListBuzOrder({
        page: queryState.page,
        size: queryState.size,
    });
    console.log(res?.data, 'res?.data');

    const { items = [], totalItem = 0 } = res?.data || {};
    if (items?.length <= 0) {
        showEmpty.value = true; //没有数据的时候展示空状态
    } else {
        showEmpty.value = false; //有数据则正常展示数据
    }

    if (queryState.page === 1) {
        dataList.value = items;
    } else {
        dataList.value = toRaw(dataList.value)?.concat(items || []);
    }

    totalNum.value = totalItem;
};

const initPage = () => {
    if (queryState.page === 1) {
        getListData();
    } else {
        queryState.page = 1;
    }
};

//支付
const handlePay = async (item) => {
    try {
        const res = await repay(item?.id);
        const { payType, miniPayInfo = '' } = res?.data;
        if (payType === PAY_TYPE.WX_PAY) {
            await uniRequestPayment(miniPayInfo);
            const config = store?.state?.configStore?.globalConfig;
            const tempIds = [config.orderConfirmTemplateId, config.enableCheckInTemplateId];
            if (item?.orderType === 2) {
                tempIds.push(config.spliceSuccessTemplateId);
            }
            initPage();
            //微信支付发起消息订阅
            await subscribeMessage(tempIds).catch((err) => {
                uni.showToast({
                    title: '订阅消息失败',
                    icon: 'none',
                });
            });
        }
    } catch {
        // console.log('错误处理');
        initPage();
    }
};

//退款
const handleRefund = async (buzOrderId: number) => {
    uni.showModal({
        title: '',
        content: '是否申请退款',
        confirmText: '确认',
        success: async (data) => {
            if (data.confirm) {
                const res = await refundApply(buzOrderId);
                if (res.code === 0) {
                    uni.showToast({
                        title: '申请成功',
                        icon: 'success',
                    });
                    initPage();
                    const config = store?.state?.configStore?.globalConfig;
                    const tempIds = [config.refundSuccessTemplateId, config.refundFailTemplateId];
                    await subscribeMessage(tempIds);
                }
            } else if (data.cancel) {
                // initPage();
            }
        },
    });
};

//拨打电话
const onMakePhoneCall = (phone: string) => {
    uni.makePhoneCall({
        phoneNumber: phone,
    });
};

// 下拉刷新
onPullDownRefresh(() => {
    initPage();
    uni.stopPullDownRefresh();
});

//触底加载
onReachBottom(() => {
    if (totalNum.value <= dataList.value.length) return;
    queryState.page++;
});

onLoad(async () => {
    getListData();
});

watch(
    () => queryState.page,
    () => {
        getListData();
    },
    {
        deep: true,
    }
);
</script>

<style lang="scss">
@import './index.scss';
</style>
@/utils/enum