<!--
 * @Author: Fly
 * @Date: 2025-12-10 16:44:11
 * @LastEditTime: 2025-12-23 16:40:33
 * @Description: 
-->
<template>
    <Drawer title="退款" :visible.sync="DrawerVisible" :showFooter="true" :skeleton="skeletonLoading"
        :wrapperClosable="true" :size="$drawerWidth(800)">
        <el-form ref="form" label-width="120px">
            <div class="form-headline">支付信息</div>
            <el-row class="form-content">
                <el-col :span="12">
                    <el-form-item label="订单号：">
                        {{ PayOrderVo.orderNo | TableItemEmpty }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="支付方式：">
                        {{ PayOrderVo.payType | PayTypeFilter | TableItemEmpty }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用户手机号：">
                        {{ PayOrderVo.userMobile | TableItemEmpty }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="支付金额：">
                        {{ PayOrderVo.payAmount | TableItemEmpty }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="支付时间：">
                        {{ PayOrderVo.payTime | TableItemEmpty }}
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="form-headline">补贴金额</div>
            <el-row class="form-content">
                <el-col :span="12">
                    <el-form-item label="最高补贴金额：">
                        {{ SubsidyQueueVo.shouldSubsidyAmount | TableItemEmpty }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="已补贴金额：">
                        {{ SubsidyQueueVo.actualSubsidyAmount | TableItemEmpty }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="已补贴积分：">
                        {{ SubsidyQueueVo.subsidyPoints | TableItemEmpty }}
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="form-headline">退款信息</div>
            <el-row class="form-content">
                <el-col :span="12">
                    <el-form-item label="可退款金额：">
                        {{ formData.refundAmount | TableItemEmpty }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="可扣除余额：">
                        {{ formData.balanceReturn | TableItemEmpty }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="可扣除积分：">
                        {{ formData.pointReturn | TableItemEmpty }}
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-form :model="formData" :rules="formRules" inline-message ref="FormEditRef" label-width="0"
            class="form-edit-content">
            <div class="form-headline">支付密码</div>
            <el-form-item label="" prop="payPassword" class="no-margin">
                <el-input :type="isShowPwd ? 'text' : 'password'" v-model="formData.payPassword">
                    <div slot="suffix" class="password-suffix" style="height: 100%;"
                        @click.stop="isShowPwd = !isShowPwd">
                        <img v-if="isShowPwd" src="@/assets/images/password_01.png" alt="">
                        <img v-else src="@/assets/images/password_02.png" alt="">
                    </div>
                </el-input>
            </el-form-item>
            <el-form-item class="form-hint-item">
                <p class="form-hint">支持付款金额的全额退款，自动回收已发放积分及补贴金额</p>
                <p class="form-hint">若积分或用户余额不足，自动计算抵扣退款额</p>
            </el-form-item>
        </el-form>
        <template v-slot:footer>
            <el-button :size="ELsize" type="primary" @click.stop="submitForm()" :loading="submitLoading">确定</el-button>
            <el-button :size="ELsize" @click.stop="DrawerVisible = false">取消</el-button>
        </template>
    </Drawer>
</template>

<script>
import { getOnlineOrderInfoApi, getOnlineOrderRefundInfoApi, OnlinerefundorderRefundApi } from "@/api/OnlineOrder";
export default {
    name: '',
    data() {
        return {
            DrawerVisible: false,
            skeletonLoading: false,
            PayOrderVo: {},
            SubsidyQueueVo: {},
            isShowPwd: false,
            formRules: {
                payPassword: [
                    { required: true, message: '请输入支付密码', trigger: ['blur', 'change'] },
                    // {
                    //     required: true, trigger: ['blur', 'change'], validator: (rule, value, callback) => {
                    //         try {
                    //             if (!value) {
                    //                 callback(new Error('请输入支付密码'));
                    //                 return
                    //             };

                    //         } catch (error) {
                    //             callback();
                    //         }
                    //     }
                    // }
                ]
            },
            formData: {
                orderId: '',
                payPassword: ''
            },
            submitLoading: false
        };
    },
    methods: {
        async openHandle(row) {
            this.DrawerVisible = true;
            const { orderId } = row || {};
            this.skeletonLoading = true;
            let V_ = null;
            if (orderId) {
                try {
                    const { data } = await getOnlineOrderInfoApi(orderId);
                    V_ = data;
                } catch { }
                try {
                    const { data } = await getOnlineOrderRefundInfoApi(orderId);
                    this.formData = {
                        orderId,
                        payPassword: '',
                        ...(data || {})
                    };
                } catch (error) {

                }
            }

            const { subsidyQueueVo } = V_ || row || {};
            this.PayOrderVo = V_ || row || {};
            this.SubsidyQueueVo = subsidyQueueVo || {};

            this.skeletonLoading = false;
        },
        submitForm() {
            this.$refs.FormEditRef.validate(async (valid) => {
                if (valid) {
                    this.submitLoading = true;
                    try {
                        await OnlinerefundorderRefundApi(this.formData);
                        this.$successMsg('提交成功');
                        setTimeout(() => {
                            this.$refs.FormEditRef.resetFields();
                            this.DrawerVisible = false;
                            this.$emit('success');
                        }, 1000);
                    } catch (error) {

                    } finally {
                        this.submitLoading = false;
                    }
                } else {
                    this.$warningMsg('请填写正确信息');
                }
            });
        },

    },
};
</script>
<style lang="scss" scoped>
.password-suffix {
    cursor: pointer;
    display: flex;
    align-items: center;

    img {
        height: 70%;
    }
}
</style>