<!--
 * @Author: Fly
 * @Date: 2025-12-10 16:44:11
 * @LastEditTime: 2025-12-22 09:33:41
 * @Description: 
-->
<template>
    <div>
        <Drawer title="定额插队" :visible.sync="DrawerVisible" :showFooter="true" :skeleton="skeletonLoading"
            :size="$drawerWidth(800)">
            <el-form :model="formData" :rules="formRules" inline-message ref="FormEditRef" :size="ELsize"
                label-width="120px" class="form-edit-content">
                <div class="form-headline">订单信息</div>
                <el-form-item label="订单金额：" prop="payAmount">
                    <el-input v-model="formData.payAmount" />
                </el-form-item>
                <el-form-item label="最高补贴金额：" prop="cutInShouldSubsidyAmount">
                    <el-input v-model="formData.cutInShouldSubsidyAmount" />
                </el-form-item>
                <el-form-item label="消费时间：" prop="consumeTime">
                    <!-- <el-input v-model="formData.consumeTime" /> -->
                    <el-date-picker style="width: 100%" v-model="formData.consumeTime" value-format="yyyy-MM-dd HH:mm"
                        format="yyyy-MM-dd HH:mm" type="datetime" placeholder="选择日期" />
                </el-form-item>
                <div class="form-headline">用户信息</div>
                <el-form-item label="用户手机号：" prop="userMobile">
                    <el-input v-model="formData.userMobile" />
                </el-form-item>
                <div class="form-headline">店铺选择</div>
                <el-form-item label="店铺名称：" prop="currentBusinessId">
                    <span v-if="formData.currentBusinessName" style="margin-right: 20px;"> {{
                        formData.currentBusinessName }}</span>
                    <el-button type="primary" @click.stop="$refs.SelShopRef.open()">选择店铺</el-button>
                    <div style="display: none;">
                        <el-input v-model="formData.currentBusinessId" />
                    </div>
                </el-form-item>
                <div class="form-headline">插队信息</div>
                <el-form-item label="插队占比：" prop="cutInRatio" class="no-margin">
                    <el-input v-model="formData.cutInRatio" />
                </el-form-item>
                <el-form-item class="form-hint-item">
                    <p class="form-hint" style="color: #000;">排队占比：{{ formData.queueRatio || 0 }}%</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>
        <SelShop ref="SelShopRef" @result="selectShopCallback" />
    </div>
</template>

<script>
import { addQuotaSubsidyCutInApi } from "@/api/OnlineOrder";
import { validTwoMinNum, validatePhone } from "@/utils/validate";
import SelShop from "@/components/SelShop";
export default {
    name: '',
    components: { SelShop },
    data() {
        return {
            DrawerVisible: false,
            skeletonLoading: false,
            formValue: {},
            // --------------------------
            formRules: {
                payAmount: [{
                    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 {
                                callback();
                            }
                        } catch (error) {
                            callback();
                        }
                    }
                }],
                cutInShouldSubsidyAmount: [{
                    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 {
                                callback();
                            }
                        } catch (error) {
                            callback();
                        }
                    }
                }],
                consumeTime: [{ required: true, message: '请选择消费时间', trigger: ['blur', 'change'] }],
                userMobile: [{
                    required: true, trigger: ['blur', 'change'], validator: (rule, value, callback) => {
                        try {
                            const errMsg = validatePhone(value);
                            if (errMsg) {
                                callback(new Error(errMsg));
                            } else {
                                callback();
                            }
                        } catch (error) {
                            callback();
                        }
                    }
                }],
                currentBusinessId: [{ required: true, message: '请选择店铺', trigger: ['blur', 'change'] }],
                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) || 0;
                        } catch (error) {
                            callback();
                        }
                    }
                }],
            },
            formData: { },
            submitLoading: false,
        };
    },
    created() {
        // setTimeout(() => {
        //     this.openHandle({ "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: {
        openHandle() {
            this.skeletonLoading = true;
            this.formData = {
                payAmount: '',
                cutInShouldSubsidyAmount: '',
                consumeTime: '',
                userMobile: '',
                cutInRatio: '',
                currentBusinessId: '',
                currentBusinessName: '',
                queueRatio: '',
            };
            this.DrawerVisible = true;
            this.$nextTick(() => {
                this.skeletonLoading = false;
            })
        },
        // 

        // 选择店铺回调
        selectShopCallback(row) {
            this.formData.currentBusinessId = row.businessId;
            this.formData.currentBusinessName = row.businessName;
        },

        submitForm() {
            this.$refs.FormEditRef.validate(async (valid) => {
                if (valid) {
                    this.submitLoading = true;
                    try {
                        await addQuotaSubsidyCutInApi(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>