<!--
 * @Author: Fly
 * @Date: 2025-12-10 16:44:11
 * @LastEditTime: 2025-12-16 17:28:25
 * @Description: 
-->
<template>
    <Drawer title="支付参数配置" :visible.sync="DrawerVisible" :showFooter="true" :skeleton="skeletonLoading"
        :wrapperClosable="true" :size="$drawerWidth(800)">
        <el-form ref="formRef" :model="FormData" :rules="rules" label-width="auto">
            <div class="form-title">
                <span class="title">支付参数配置</span>
                <span class="tip">（请联系支付平台获取支付参数）</span>
            </div>
            <el-form-item label="商户号" prop="fuMchNo">
                <el-input v-model="FormData.fuMchNo" placeholder="请输入商户号" clearable></el-input>
            </el-form-item>
            <el-form-item label="服务商号" prop="fuChannelMchNo">
                <el-input v-model="FormData.fuChannelMchNo" placeholder="请输入服务商号" clearable></el-input>
            </el-form-item>
            <el-form-item label="商户秘钥" prop="fuKey">
                <el-input v-model="FormData.fuKey" placeholder="请输入商户秘钥" clearable></el-input>
            </el-form-item>
        </el-form>
        <template v-slot:footer>
            <el-button type="primary" :size="ELsize" :loading="submitLoading" @click="handleSubmit">保存</el-button>
            <el-button :size="ELsize" @click.stop="DrawerVisible = false">取消</el-button>
        </template>
    </Drawer>
</template>

<script>
import { userInfo } from "@/api/user.js";
import { businessInfo, businessSetPayParamsPage } from "@/api/shop";
export default {
    name: '',
    data() {
        return {
            DrawerVisible: false,
            skeletonLoading: false,
            FormData: {
                fuMchNo: '',
                fuChannelMchNo: '',
                fuKey: '',
            },
            submitLoading: false,
            rules: {
                fuMchNo: [
                    { required: true, message: '请输入商户号', trigger: 'blur' },
                ],
                fuChannelMchNo: [
                    { required: true, message: '请输入服务商号', trigger: 'blur' },
                ],
                fuKey: [
                    { required: true, message: '请输入商户秘钥', trigger: 'blur' },
                ],
            },
        };
    },
    created() {
        // setTimeout(() => {
        //     this.openHandle({ businessId: 24 })
        // }, 100);
    },

    methods: {
        async openHandle(row) {
            this.DrawerVisible = true;
            const { businessId } = row || {};
            this.skeletonLoading = true;
            let V_ = null;
            try {
                if (businessId) {
                    const { data } = await businessInfo(businessId);
                    V_ = data;
                }
            } catch { }

            this.FormData = V_ || row || {};
            this.skeletonLoading = false;
        },
        handleSubmit() {
            this.$refs.formRef.validate(async (valid) => {
                if (valid) {
                    this.submitLoading = true;
                    try {
                        await businessSetPayParamsPage(this.FormData);
                        this.$successMsg("保存成功");
                        this.DrawerVisible = false;
                    } catch { } finally {
                        this.submitLoading = false;
                    }

                }
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.form-title {
    margin-bottom: 30px;

    .title {
        font-size: 16px;
        font-weight: bold;
    }

    .tip {
        font-size: 13px;
    }
}
</style>