<template>
    <view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden" :style="themeColor()">

        <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getSeckillRefundListFn">
            <view class="sidebar-margin pt-[var(--top-m)]" v-if="list.length">
                <view class="mb-[var(--top-m)] card-template" v-for="(item,index) in list" :key="index">
                    <view @click="toLink(item)">
                        <view class="flex justify-between items-center">
                            <view class="text-[#303133] text-[26rpx] font-400 leading-[34rpx]">
                                <text>{{ t('refundNo') }}:</text>
                                <text class="ml-[10rpx]">{{ item.order_no }}</text>
                                <text class="text-[#303133] text-[24rpx] font-400 nc-iconfont nc-icon-fuzhiV6xx1 ml-[11rpx]"
                                    @click.stop="copy(item.order_no)"></text>
                            </view>
                            <view class="text-[26rpx] leading-[34rpx] !text-[var(--primary-color)]">{{ item.refund_type_name }}</view>
                        </view>
                        <view class="flex 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 : '')" model="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="text-[28rpx] leading-[40rpx] text-[#303133] max-w-[322rpx]  truncate font-400">{{ item.goods_name }}</view>
                                    <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_price).toFixed(2).split('.')[0] }}</text>
                                        <text class="text-[22rpx] font-500 price-font">.{{ parseFloat(item.goods_price).toFixed(2).split('.')[1] }}</text>
                                    </view>
                                </view>
                                <view class="flex justify-between items-baseline mt-[14rpx]">
                                    <view class="flex flex-col">
                                        <view class="text-[26rpx] truncate text-[var(--text-color-light6)] leading-[36rpx] max-w-[369rpx] mb-[10rpx]" v-if="item.sku_name">{{ item.sku_name }}</view>
                                        <view class="text-[26rpx] font-400 leading-[36rpx] text-[var(--text-color-light6)]">退款状态：{{ item.refund_status_name }}</view>
                                    </view>
                                    <text class="text-right text-[26rpx] font-400 w-[90rpx] leading-[36rpx]">x{{ item.num }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="flex justify-end items-baseline mt-[20rpx]">
                        <view class="flex items-center">
                            <text class="text-[22rpx] leading-[30rpx] font-400 mr-[4rpx]">{{ t('refundMoney') }}：</text>
                            <view class="price-font leading-[42rpx] text-[var(--price-text-color)]">
                                <text class="text-[22rpx]">￥</text>
                                <template v-if="item.status == 8">
                                    <text class="text-[36rpx] font-500">{{ parseFloat(item.money).toFixed(2).split('.')[0] }}</text>
                                    <text class="text-[22rpx] font-500">.{{ parseFloat(item.money).toFixed(2).split('.')[1] }}</text>
                                </template>
                                <template v-else>
                                    <text class="text-[36rpx] font-500">{{ parseFloat(item.refund_money).toFixed(2).split('.')[0] }}</text>
                                    <text class="text-[22rpx] font-500">.{{ parseFloat(item.refund_money).toFixed(2).split('.')[1] }}</text>
                                </template>
                            </view>
                        </view>
                    </view>
                    <view class="mt-[20rpx] flex flex-wrap justify-end">
                        <view class="text-[24rpx] text-[var(--text-color-light3)] font-500 h-[56rpx] leading-[52rpx] box-border px-[23rpx] border-[2rpx] border-solid border-[#ccc] rounded-full ml-[20rpx]"
                            @click.stop="refundBtnFn(item,'cancel')"
                            v-if="item.refund_status==1">{{ t('refundApply') }}</view>
                        <view v-if="item.refund_status==3"
                              class="text-[24rpx] font-500 text-[var(--text-color-light3)] h-[56rpx] box-border leading-[52rpx] px-[23rpx] border-[2rpx] border-solid border-[#ccc] rounded-full ml-[20rpx]"
                              @click.stop="refundBtnFn(item,'edit')">编辑退款信息</view>
                    </view>
                </view>
            </view>
            <mescroll-empty :option="{tip : '暂无订单'}" v-if="!list.length && loading"></mescroll-empty>

        </mescroll-body>
        <u-modal :show="cancelRefundShow" confirmColor="var(--primary-color)" :content="t('cancelRefundContent')"
                 :showCancelButton="true" :closeOnClickOverlay="true" @cancel="refundCancel"
                 @confirm="refundConfirm"></u-modal>
        <!-- #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 { getSeckillRefundList, cancelRefund } 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 } from '@dcloudio/uni-app';

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
const list = ref<Array<Object>>([]);
const loading = ref<boolean>(false);
const cancelRefundShow = ref(false);

const wxPrivacyPopupRef: any = ref(null)

onLoad(() => {
    // #ifdef MP
    nextTick(() => {
        if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
    })
    // #endif
})

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

    getSeckillRefundList(data).then((res) => {
        let newArr = (res.data.data as Array<Object>);
        //设置列表数据
        if (mescroll.num == 1) {
            list.value = []; //如果是第一页需手动制空列表
        }
        list.value = list.value.concat(newArr);
        mescroll.endSuccess(newArr.length);
        loading.value = true;
    }).catch(() => {
        loading.value = true;
        mescroll.endErr(); // 请求失败, 结束加载
    })
}

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

let currRefundOn = "";
const refundBtnFn = (data, type) => {
    if (type == 'cancel') {
        currRefundOn = data.id;
        cancelRefundShow.value = true;
    } else if (type == 'edit') {
        redirect({ url: '/addon/seckill/pages/refund/edit_apply', param: { order_id: data.id } })
    }
}

const refundConfirm = () => {
    cancelRefund({id:currRefundOn}).then((res) => {
        cancelRefundShow.value = false;
        getMescroll().resetUpScroll();
    }).catch(() => {
        cancelRefundShow.value = false;
    })
}

const refundCancel = () => {
    cancelRefundShow.value = false;
}

</script>
<style lang="scss" scoped>
</style>
