<template>
    <view :style="themeColor()">
        <swiper :indicator-dots="false" :autoplay="false" :disable-touch="true" :current="step" class="h-screen" :duration="300" v-if="orderDetail">
            <swiper-item>
                <scroll-view scroll-y="true" class="bg-page min-h-screen overflow-hidden">
                    <view class="m-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] py-[var(--pad-top-m)] rounded-[var(--rounded-big)] bg-white">
                        <view class="flex">
                            <view class="w-[120rpx] h-[120rpx] flex items-center justify-center">
                                <u--image :radius="'var(--goods-rounded-small)'" width="120rpx" height="120rpx" :src="img(orderDetail.order_info?.sku_snapshot?.goods?.cover_thumb_small)" model="aspectFill">
                                    <template #error>
                                        <image class="w-[120rpx] h-[120rpx] rounded-[var(--goods-rounded-small)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"/>
                                    </template>
                                </u--image>
                            </view>
                            <view class="flex-1 w-0 ml-[20rpx]">
                                <view class="text-ellipsis text-[28rpx] leading-normal truncate">{{ orderDetail.order_info?.sku_snapshot?.goods?.title }}</view>
                                <view v-if="orderDetail.order_info?.sku_snapshot?.sku_name" class="mt-[6rpx] text-[24rpx] leading-[1.3] text-[var(--text-color-light9)] truncate">{{  orderDetail.order_info?.sku_snapshot?.sku_name }}</view>
                            </view>
                        </view>
                    </view>

                    <view class="my-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)] bg-white">
                        <view class="py-[var(--pad-top-m)] flex items-center" @click="selectRefundType(1)">
                            <view class="flex-1">
                                <view class="text-[30rpx]">仅退款</view>
                                <view class="text-[24rpx] mt-[20rpx] text-[var(--text-color-light9)]">与商家协商一致不用退货只退款</view>
                            </view>
                            <text class="nc-iconfont nc-icon-youV6xx text-[28rpx] text-[var(--text-color-light9)]"></text>
                        </view>
                        <view class="py-[var(--pad-top-m)] flex items-center border-0 !border-t !border-[#f5f5f5] border-solid"
                            @click="selectRefundType(2)" v-if="orderDetail && orderDetail.delivery_type_config && orderDetail.delivery_type_config.verify_type == 'default'">
                            <view class="flex-1">
                                <view class="text-[30rpx]">退货退款</view>
                                <view class="text-[24rpx] mt-[20rpx] text-[var(--text-color-light9)]">已收到货，与商家协商处理</view>
                            </view>
                            <text class="nc-iconfont nc-icon-youV6xx text-[28rpx] text-[var(--text-color-light9)]"></text>
                        </view>
                    </view>
                </scroll-view>
            </swiper-item>
            <swiper-item>
                <scroll-view scroll-y="true" class="bg-page min-h-screen overflow-hidden">
                    <view class="my-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)] bg-white">
                        <view class="py-[var(--pad-top-m)] flex justify-between items-center">
                            <view class="text-[28rpx]">退款原因</view>
                            <view class="flex ml-[auto] items-center h-[30rpx]" @click="refundCausePopup = true">
                                <text class="text-[26rpx] text-[var(--text-color-light9)] truncate max-w-[460rpx]">{{ formData.reason || '请选择' }}</text>
                                <text class="nc-iconfont nc-icon-youV6xx pt-[4rpx] text-[24rpx] text-[var(--text-color-light9)]"></text>
                            </view>
                        </view>
                    </view>
                    <view
                        class="my-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)] bg-white">
                        <view class="py-[var(--pad-top-m)]">
                            <view class="flex items-center justify-between">
                                <view class="text-[28rpx] font-500">退款金额</view>
                                <view class="flex justify-end items-center text-[var(--price-text-color)] price-font">
                                    <text class="font-500 text-[36rpx] leading-none">￥</text>
                                    <text class="font-500 text-[36rpx] leading-none">{{ formData.apply_money }}</text>
                                </view>
                            </view>
                            <view  v-if="formData.refund_charge_money >0" class="text-right text-[24rpx] mt-[10rpx]">扣除手续费￥ <text class="text-[var(--price-text-color)] price-font">{{ formData.refund_charge_money }}</text> </view>
                        </view>
                        
                    </view>
                     <!-- <view
                        v-if="formData.refund_charge_money >0"
                        class="my-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)] bg-white">
                        <view class="py-[var(--pad-top-m)]">
                            <view class="flex items-center justify-between">
                                <view class="text-[28rpx] font-500">扣除手续费</view>
                                <view class="flex justify-end items-center text-[var(--price-text-color)] price-font">
                                    <text class="font-500 text-[36rpx] leading-none">￥</text>
                                    <text class="font-500 text-[36rpx] leading-none">{{ formData.refund_charge_money }}</text>
                                </view>
                            </view>
                        </view>
                    </view> -->
                    <view
                        class="my-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)] bg-white">
                        <view class="pt-[var(--pad-top-m)] pb-[14rpx] ">
                            <view class="text-[28rpx] flex items-center">
                                <text class="font-500">上传凭证</text>
                                <text class="text-[24rpx] text-[var(--text-color-light9)] ml-[10rpx]">选填</text>
                            </view>
                            <view class="mt-[30rpx]">
                                <u-upload :fileList="voucherListPreview" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="9" />
                            </view>
                        </view>
                    </view>
                    <view class="my-[var(--top-m)] sidebar-margin px-[var(--pad-sidebar-m)] rounded-[var(--rounded-big)] bg-white">
                        <view class="py-[var(--pad-top-m)]">
                            <view class="text-[28rpx] flex items-center">
                                <text class="font-500">补充描述</text>
                                <text class="text-[24rpx] text-[var(--text-color-light9)] ml-[10rpx]">选填</text>
                            </view>
                            <view class="mt-[30rpx] h-[200rpx]">
                                <textarea class="leading-[1.5] h-[100%] w-[100%] text-[28rpx]" v-model="formData.remark"
                                          cols="30" rows="5" placeholder="补充描述,有助于更好的处理售后问题"
                                          placeholder-class="text-[26rpx] text-[var(--text-color-light9)]"></textarea>
                            </view>
                        </view>
                    </view>
                    <view class="w-full">
                        <view class="py-[var(--top-m)] px-[var(--sidebar-m)] box-border">
                            <button class="primary-btn-bg !text-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[26rpx] font-500"
                                :loading="operateLoading" @click="save">提交</button>
                        </view>
                    </view>

                    <!-- 退款原因 -->
                    <u-popup :show="refundCausePopup" @close="refundCausePopup = false">
                        <view class="popup-common" @touchmove.prevent.stop>
                            <view class="title">退款原因</view>
                            <scroll-view scroll-y="true" class="h-[450rpx] px-[30rpx] box-border">
                                <u-radio-group v-model="currReasonName" placement="column" iconPlacement="right">
                                    <u-radio activeColor="var(--primary-color)" :labelSize="'30rpx'" labelColor="#333"
                                             :customStyle="{marginBottom: '34rpx'}" v-for="(item, index) in reason"
                                             :key="index" :label="item" :name="item"></u-radio>
                                </u-radio-group>
                            </scroll-view>
                            <view class="btn-wrap">
                                <button class="primary-btn-bg btn" @click="refundCausePopupFn">确定</button>
                            </view>
                        </view>
                    </u-popup>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { redirect, img, moneyFormat, goback } from '@/utils/common'
import { t } from '@/locale'
import {getPintuanRefundInit ,applyPintuanRefund,getPintuanRefundCalculate} from '@/addon/pintuan/api/refund'
import { getPintuanOrderInfo} from '@/addon/pintuan/api/order'
import { uploadImage } from '@/app/api/system'
import { useSubscribeMessage } from "@/hooks/useSubscribeMessage";

const orderDetail = ref({})
const step = ref(0)
const refundCausePopup = ref(false)
const formData = ref({
    order_no: 0,
    refund_type: '',
    apply_money: '',
    reason: '',
    remark: '',
    voucher: []
})
const reason = ref<string[]>([])
const currReasonName = ref('')

getPintuanRefundInit().then(({ data }) => {
    reason.value = data.reason_list
    if (reason.value && reason.value.length) currReasonName.value = reason.value[0];
})

onLoad((data) => {
    formData.value.order_no = data.order_no || ''
    if (data.order_no ) {
        getPintuanOrderInfo(data.order_no).then(({ data }) => {
            orderDetail.value = data;
            // console.log(data.refund_charge_money)
            // formData.value.refund_money =moneyFormat(orderDetail.value.refund_money)
            // formData.value.refund_charge_money = moneyFormat(orderDetail.value.refund_charge_money)
            //  moneyFormat(orderDetail.value.order_money) 
        })
        // 获取可退款金额
        getPintuanRefundCalculate(data.order_no).then(res => {
            formData.value.apply_money = res.data.refund_money
            formData.value.refund_charge_money = res.data.refund_info.expense_money.amount
        })
    } else {
        let parameter = {
            url: '/addon/pintuan/pages/order/list',
            title: '缺少订单id'
        };
        goback(parameter);
    }

})

const selectRefundType = (type: number) => {
    formData.value.refund_type = type
    step.value = 1
}

const voucherListPreview = computed(() => {
    return formData.value.voucher.map(item => {
        return { url: img(item) }
    })
})

const afterRead = (event: any) => {
    event.file.forEach(item => {
        uploadImage({
            filePath: item.url,
            name: 'file'
        }).then(res => {
            if (formData.value.voucher.length < 9) {
                formData.value.voucher.push(res.data.url)
            }
        })
    })
}

const deletePic = (event: any) => {
    formData.value.voucher.splice(event.index, 1)
}

const operateLoading = ref(false)
const save = () => {

    if (!formData.value.reason) {
        uni.showToast({
            title: '请选择退款原因',
            icon: 'none'
        });
        return false;
    }

    if (operateLoading.value) return
    operateLoading.value = true

    useSubscribeMessage().request('pintuan_refund_agree,pintuan_refund_refuse')

    applyPintuanRefund(formData.value).then((res) => {
        operateLoading.value = false
        setTimeout(() => {
            redirect({ url: '/addon/pintuan/pages/order/detail', param: { order_no: formData.value.order_no } })
        }, 1000)
    }).catch(() => {
        operateLoading.value = false
    })
}

const refundCausePopupFn = () => {
    formData.value.reason = currReasonName.value;
    refundCausePopup.value = false;
}

</script>
<style lang="scss" scoped>
:deep(.u-upload__button) {
    width: 70px !important;
    height: 70px !important;
    border: 1px dashed #ddd;
    background-color: #fff;
    border-radius: 20rpx !important;
}

:deep(.u-upload__wrap__preview__image) {
    width: 70px !important;
    height: 70px !important;
}
</style>
