<!--
 * @Author: Fly
 * @Date: 2025-12-10 16:44:11
 * @LastEditTime: 2025-12-23 09:46:13
 * @Description: 
-->
<template>
    <Drawer title="插队" :visible.sync="DrawerVisible" :showFooter="true" :skeleton="skeletonLoading"
        :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="订单金额：">{{ formValue.payAmount | TableItemEmpty }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="最多补贴：">{{ formValue.shouldSubsidyAmount | TableItemEmpty }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="已补贴金额：">{{ formValue.actualSubsidyAmount | TableItemEmpty }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="已补贴积分：">{{ formValue.subsidyPoints | TableItemEmpty }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="消费时间：">{{ formValue.consumeTime | TableItemEmpty }}</el-form-item>
                </el-col>
            </el-row>
            <template>
                <div class="form-headline">用户信息</div>
                <el-row class="form-content">
                    <el-col :span="12">
                        <el-form-item label="用户姓名：">{{ formValue.userName | TableItemEmpty }}</el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户手机号：">{{ formValue.userMobile | TableItemEmpty }}</el-form-item>
                    </el-col>
                </el-row>
            </template>
        </el-form>
        <div class="form-headline">插队信息</div>
        <el-form :model="formData" :rules="formRules" inline-message ref="FormEditRef" label-width="150px"
            class="form-edit-content">
            <el-form-item label="插队最多补贴金额：" prop="cutInShouldSubsidyAmount" class="no-margin">
                <el-input v-model="formData.cutInShouldSubsidyAmount" />
            </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-item label="插队占比：" prop="cutInRatio" class="no-margin">
                <el-input v-model="formData.cutInRatio">
                    <template slot="append">%</template>
                </el-input>
            </el-form-item>
            <el-form-item class="form-hint-item">
                <p class="form-hint" style="color: #000;">排队占比：{{ formData.queueRatio || 0 }}%</p>
                <p class="form-hint">在插队列表中补满输入的金额，即算排队完成。不再补贴。</p>
            </el-form-item>
        </el-form>
        <template v-slot:footer>
            <el-button type="primary" @click.stop="submitForm()" :loading="submitLoading">确定</el-button>
            <el-button :size="ELsize" @click.stop="DrawerVisible = false">取消</el-button>
        </template>
    </Drawer>
</template>

<script>
import { getSubsidyQueueInfoApi, addSubsidyCutInApi } from "@/api/OnlineOrder";
import { validTwoMinNum } from "@/utils/validate";
export default {
    name: '',
    data() {
        return {
            DrawerVisible: false,
            skeletonLoading: false,
            formValue: {},
            // --------------------------
            formRules: {
                cutInShouldSubsidyAmount: [{
                    required: true, trigger: ['blur', 'change'], validator: (rule, value, callback) => {
                        try {
                            if (!value) {
                                callback(new Error('请输入插队最多补贴金额'));
                                return
                            };
                            console.log('已补贴金额 = ', value, this.formValue.actualSubsidyAmount, value <= Number(this.formValue.actualSubsidyAmount));
                            console.log('原最多补贴金额 = ', value, this.formValue.shouldSubsidyAmount, value >= Number(this.formValue.shouldSubsidyAmount));
                            const errMsg = validTwoMinNum(value);
                            if (errMsg) {
                                callback(new Error(errMsg));
                            } else if (value <= Number(this.formValue.actualSubsidyAmount)) {
                                callback(new Error('输入金额需大于已补贴金额'));
                            } else if (value >= Number(this.formValue.shouldSubsidyAmount)) {
                                callback(new Error('输入金额需小于原最多补贴金额'));
                            } else {
                                callback();
                            }
                        } catch (error) {
                            callback();
                        }
                    }
                }],
                cutInRatio: [{
                    required: true, trigger: ['blur', 'change'], validator: (rule, value, callback) => {
                        try {
                            if (!value) {
                                callback(new Error('请输入插队占比'));
                                return
                            }
                            const errMsg = validTwoMinNum(value);
                            if (errMsg) {
                                callback(new Error(errMsg));
                            } else if (value > 100) {
                                callback(new Error('输入占比需小于等于100'));
                            } else {
                                callback();
                            }
                            this.formData.queueRatio = (100 - value);
                        } catch (error) {
                            callback();
                        }
                    }
                }],
            },
            formData: {},
            submitLoading: false,
        };
    },
    created() {
        // setTimeout(() => {
        //     this.open({ "createBy": null, "createTime": "2025-12-09 10:55:26", "updateBy": null, "updateTime": "2025-12-09 11:25:26", "orderId": 23, "businessName": "中站药品专门店", "orderNo": "ZFDD251209000002", "payType": 0, "userMobile": "18839160015", "userName": "程", "payAmount": "20.00", "payTime": null, "actualSubsidyAmount": null, "refundTime": null, "refundAmount": null, "orderStatus": 100, "subsidyAmount": "0.00", "orderAmount": "20.00", "payStatus": 0, "transactionId": "P1998224934601895937", "userId": 15, "businessId": 21, "cancelType": 2, "cancelTime": "2025-12-09 11:25:26", "cancelReason": "支付超时取消", "refundStatus": 0, "sendPoint": "0.00", "expireTime": "2025-12-09 11:25:25", "lastEndTime": null, "end": false, "businessIncome": "0.00", "businessShouldSubsidy": "0.00", "subsidyStatus": null, "platformServiceFee": "0.00", "platformIncome": "0.00", "platformIncomeSettled": 0, "onlineRefundOrderVo": null, "orderType": 3, "subsidyQueueVo": null })
        // }, 100);
    },

    methods: {
        async openHandle(row) {
            this.formData = {
                originalQueueId: '',
                cutInShouldSubsidyAmount: '',
                cutInRatio: '',
                queueRatio: '',
            };
            this.DrawerVisible = true;
            const { queueId } = row || {};
            this.skeletonLoading = true;
            let V_ = null;
            try {
                if (queueId) {
                    const { data } = await getSubsidyQueueInfoApi(queueId);
                    V_ = data;
                }
            } catch { }

            this.formValue = V_ || {};
            this.formData.originalQueueId = queueId;
            this.skeletonLoading = false;
        },
        // 

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

                    } finally {
                        this.submitLoading = false;
                    }
                    // this.$message({
                    //     message: '提交成功',
                    //     type: 'success',
                    // });
                } else {
                    this.$warningMsg('请填写正确信息');
                }
            });
        },

    },
};
</script>