<template>
    <view :style="themeColor()">
        <view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden" v-if="!loading">
            <view class="pb-[200rpx]">
                <view class="bg-linear">
                    <!-- #ifdef MP-WEIXIN -->
                    <top-tabbar :data="topTabbarData" :scrollBool="topTabarObj.getScrollBool()" />
                    <!-- #endif -->
                    <view v-if="detail.status_name"
                          class="flex justify-between items-center pl-[40rpx] pr-[50rpx]  h-[280rpx] box-border pb-[90rpx]">
                        <view class="text-[36rpx] font-500 leading-[42rpx] text-[#fff]">{{ detail.status_name }}</view>
                        <view class="flex items-center"></view>
                    </view>
                </view>
                <view class="sidebar-margin card-template flex justify-between flex-wrap mt-[-76rpx]">
                    <view class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" @click="goodsEvent(detail)">
                        <u--image radius="var(--goods-rounded-big)" width="150rpx" height="150rpx" :src="img(detail.order_info?.sku_snapshot?.goods?.cover_thumb_big || '')" 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>
                    <view class="ml-[20rpx] flex flex-1 flex-col justify-between">
                        <view>
                            <view class="text-[28rpx] max-w-[490rpx] truncate leading-[40rpx]">{{ detail.order_info.sku_snapshot?.goods?.title || '' }}</view>
                            <view class="text-[22rpx] mt-[10rpx] text-[var(--text-color-light9)] truncate max-w-[490rpx] leading-[28rpx]" v-if=" detail.order_info.sku_snapshot.goods.sub_title">{{  detail.order_info.sku_snapshot?.goods?.sub_title || '' }}</view>
                        </view>
                        <view class="flex justify-between items-center leading-[28rpx] ">
                            <view class="price-font">
                                <text class="text-[24rpx]">￥</text>
                                <text class="text-[40rpx] font-500">{{ parseFloat(detail.order_info.goods_money).toFixed(2).split('.')[0] }}</text>
                                <text class="text-[24rpx] font-500">.{{ parseFloat(detail.order_info.goods_money).toFixed(2).split('.')[1] }}</text>
                            </view>
                            <text class="text-right text-[26rpx]">x{{ detail.order_info.num }}</text>
                        </view>
                    </view>
                </view>
                <view class="sidebar-margin mt-[var(--top-m)] card-template">
                    <view class="justify-between text-[28rpx] card-template-item">
                        <view>{{ t('refundMoney') }}</view>
                        <view class="price-font text-[var(--price-text-color)]">
                            <text class="text-[24rpx] mr-[4rpx]">￥</text>
                            <!-- <text class="text-[28rpx]" v-if="detail.status == 8">{{ parseFloat(detail.money).toFixed(2) }}</text>
                            <text class="text-[28rpx]" v-else>{{ parseFloat(detail.refund_money ).toFixed(2) }}</text> -->
                            <text class="text-[28rpx]">{{ parseFloat(detail.apply_money ).toFixed(2) }}</text>
                            
                        </view>
                    </view>
                    <view class="justify-between text-[28rpx] card-template-item">
                        <view>{{ t('refundType') }}</view>
                        <view>{{ detail.refund_type_name }}</view>
                    </view>
                    <view class="justify-between text-[28rpx] card-template-item">
                        <view>{{ t('refundCause') }}</view>
                        <view class="w-[400rpx] multi-hidden text-right">{{ detail.reason || '--' }}</view>
                    </view>
                    <view class="justify-between text-[28rpx] card-template-item">
                        <view>{{ t('refundNo') }}</view>
                        <view>{{ detail.order_refund_no }}</view>
                    </view>
                    <view class="justify-between text-[28rpx] card-template-item">
                        <view>{{ t('createTime') }}</view>
                        <view>{{ detail.create_time }}</view>
                    </view>
                    <view class="justify-between text-[28rpx] card-template-item !items-baseline" v-if="detail.remark">
                        <view>{{ t('createExplain') }}</view>
                        <view class="flex-1 ml-[60rpx] text-right leading-[1.5] flex justify-end break-all">
                            {{ detail.remark }}
                        </view>
                    </view>
                    <view class="justify-between text-[28rpx] card-template-item !items-baseline break-all" v-if="detail.shop_reason">
                        <view>{{ t('reasonRefusal') }}</view>
                        <view class="flex-1 ml-[60rpx] leading-[1.5] text-right text-[#333]">{{ detail.shop_reason }}</view>
                    </view>
                </view>

                <view class="sidebar-margin mt-[var(--top-m)] card-template">
                    <view class="justify-between text-[28rpx] card-template-item">
                        <view>{{ t('record') }}</view>
                        <view class="flex items-center" @click="redirect({url: '/addon/pintuan/pages/refund/log', param: { order_id: orderRefundNo }})">
                            <text class="text-[26rpx] text-[var(--text-color-light9)]">{{ t('check') }}</text>
                            <text class="nc-iconfont nc-icon-youV6xx text-[24rpx] text-[var(--text-color-light9)] pt-[2rpx]"></text>
                        </view>
                    </view>
                </view>

                <view
                    class="flex tab-bar justify-between items-center bg-[#fff] fixed left-0 right-0 bottom-0 min-h-[100rpx] pl-[30rpx] pr-[20rpx] flex-wrap">
                    <view class="flex">
                        <!-- <view class="flex mr-[20rpx] flex-col justify-center items-center"
                              @click="redirect({ url: '/addon/pintuan/pages/index', mode: 'reLaunch' })">
                            <view class="nc-iconfont nc-icon-shouyeV6xx11 text-[36rpx]"></view>
                            <text class="text-[20rpx] mt-[10rpx]">{{ t('index') }}</text>
                        </view> -->
                        <!-- #ifdef MP-WEIXIN -->
                        <!-- <view>
                            <nc-contact
                                :send-message-title="sendMessageTitle"
                                :send-message-path="sendMessagePath"
                                :send-message-img="sendMessageImg">
                                <view class="flex flex-col justify-center items-center">
                                    <text class="nc-iconfont nc-icon-kefuV6xx-1 text-[36rpx]"></text>
                                    <text class="text-[20rpx] mt-[10rpx]">客服</text>
                                </view>
                            </nc-contact>
                        </view> -->
                        <!-- #endif -->
                    </view>

                    <view class="flex justify-end">
                        <view @click="redirect({ url: '/addon/pintuan/pages/index', mode: 'reLaunch' })" class="order-grey-hollow-btn ml-[20rpx]">
                              {{ t('index') }}
                        </view>
                          <!-- #ifdef MP-WEIXIN -->
                          <view>
                            <nc-contact :send-message-title="sendMessageTitle" :send-message-path="sendMessagePath" :send-message-img="sendMessageImg">
                                <view class="order-grey-hollow-btn ml-[20rpx]">
                                    客服
                                </view>
                            </nc-contact>
                        </view>
                        <!-- #endif -->
                        <view class="px-[35rpx] box-border text-[24rpx] h-[60rpx] flex-center border-[2rpx] border-solid border-[#ccc] text-[#333] rounded-full ml-[20rpx]"
                            @click="refundBtnFn('cancel')" v-if="detail.status!='refund_close'&&detail.status!='refund_finish'">取消退款</view>

                        <view v-if="detail.status=='refund_refuse'" class="px-[35rpx] box-border text-[#333] text-[24rpx] h-[60rpx] flex-center border-[2rpx] border-solid border-[#ccc] rounded-full ml-[20rpx] px-[20rpx]"
                              @click.stop="refundBtnFn('edit')">编辑退款信息</view>
                    </view>
                </view>
            </view>
            <u-modal :show="cancelRefundShow" confirmColor="var(--primary-color)" :content="t('cancelRefundContent')"
                     :showCancelButton="true" :closeOnClickOverlay="true" @cancel="refundCancel"
                     @confirm="refundConfirm"></u-modal>
        </view>

        <loading-page :loading="loading"></loading-page>

        <!-- #ifdef MP-WEIXIN -->
        <!-- 小程序隐私协议 -->
        <wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
        <!-- #endif -->
    </view>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app'
import { t } from '@/locale'
import { img, redirect, goback } from '@/utils/common';
import { topTabar } from '@/utils/topTabbar'
import { getPintuanRefundDetail,pintuanRefundClose} from '@/addon/pintuan/api/refund';

/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let topTabbarData = topTabarObj.setTopTabbarParam({ title: '退款详情' })
/********* 自定义头部 - end ***********/

const detail = ref<Object>({});
const loading = ref<boolean>(true);
const orderRefundNo = ref('');
const type = ref('');

const sendMessageTitle = ref('')
const sendMessagePath = ref('')
const sendMessageImg = ref('')

const wxPrivacyPopupRef: any = ref(null)

onLoad((option: any) => {
    orderRefundNo.value = option.order_refund_no;
    if (orderRefundNo.value) {
        type.value = option.type;

        refundDetailFn(orderRefundNo.value);
        // #ifdef MP
        nextTick(() => {
            if (wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
        })
        // #endif
    } else {
        let parameter = {
            url: '/addon/pintuan/pages/refund/list',
            title: '缺少订单号'
        };
        goback(parameter);
    }
});
const refundDetailFn = (refundNo: any) => {
    loading.value = true;
    getPintuanRefundDetail(refundNo).then((res: any) => {
        detail.value = res.data;
        sendMessageTitle.value = detail.value.order_info.sku_snapshot?.goods?.title || ''
        sendMessageImg.value = img(detail.value.order_info.sku_snapshot?.goods?.images || '')
        loading.value = false;
    }).catch(() => {
        loading.value = false;
    })
}

const goodsEvent = (data: any) => {
    redirect({
        url: '/addon/pintuan/pages/goods/detail',
        param: {
            pintuan_id: data.order_info.pintuan_id || '',
            group_id: data.order_info.group_id || '',
        }
    })
}

const refundBtnFn = (type: any) => {
      if (type == 'cancel') {
        currRefundNo = detail.value.order_refund_no;
        cancelRefundShow.value = true;
    } else if (type == 'edit') {
        redirect({
            url: '/addon/pintuan/pages/refund/edit_apply',
            param: { order_refund_no: detail.value.order_refund_no }
        })
    }
}

// 撤销售后
const cancelRefundShow = ref(false);
let currRefundNo = "";

const refundConfirm = () => {
    pintuanRefundClose(currRefundNo).then((res) => {
        cancelRefundShow.value = false;
        refundDetailFn(orderRefundNo.value);
    }).catch(() => {
        cancelRefundShow.value = false;
    })
}

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

</script>
<style lang="scss" scoped>
.bg-linear {
    background: linear-gradient(94deg, #F84949 8%, #FF9A68 99%);
}

:deep(.u-form-item__body__left__content__label) {
    height: 40rpx !important;
}

:deep(.u-form-item__body) {
    padding: 0 !important;
    height: 40rpx !important;
}

:deep(.u-form-item) {
    margin-bottom: 34rpx;
}
</style>
