<template>
    <div>
        <el-card class="box-card" shadow="hover">
            <div style="margin: 12px 0">汇付会员</div>
            <div style="margin: 12px 0">
                没有查询到汇付会员配置，请点击按钮创建汇付会员
                <!-- 刷新按钮 -->
                <el-button size="medium" type="primary" @click="openCreateAdapayMember = true">
                    创建汇付会员
                </el-button>
            </div>
        </el-card>

        <el-card class="box-card" shadow="hover">
            <div style="margin: 12px 0">汇付结算账户</div>
            <div style="margin: 12px 0">
                没有查询到汇付结算账户配置，请点击按钮创建汇付结算账户
                <!-- 刷新按钮 -->
                <el-button size="medium" type="primary" @click="openCreateAdapaySettleAccount = true">
                    创建汇付结算账户
                </el-button>
            </div>
        </el-card>

        <el-dialog title="创建汇付会员" :visible.sync="openCreateAdapayMember" width="500px" append-to-body>
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="250px"
                class="demo-ruleForm"
            >
                <el-form-item label="会员昵称" prop="nickname">
                    <el-input v-model="ruleForm.nickname"></el-input>
                </el-form-item>
                <el-form-item label="会员邮箱" prop="email">
                    <el-input v-model="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item label="会员性别" prop="gender">
                    <el-radio-group v-model="ruleForm.gender">
                        <el-radio label="MALE">男</el-radio>
                        <el-radio label="FEMALE">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="会员地址" prop="location">
                    <!-- type="textarea" -->
                    <el-input v-model="ruleForm.location"></el-input>
                </el-form-item>

                <el-button
                    type="primary"
                    @click="submitForm('ruleForm')"
                >提交</el-button
                >
            </el-form>
        </el-dialog>

        <el-dialog title="创建汇付结算账户" :visible.sync="openCreateAdapaySettleAccount" width="500px" append-to-body>
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="250px"
                class="demo-ruleForm"
            >
                <el-form-item label="银行账户类型" prop="bank_acct_type">
                    <el-radio-group v-model="ruleForm.bank_acct_type">
                        <el-radio label="1">对公</el-radio>
                        <el-radio label="2">对私</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="银行卡号" prop="card_id">
                    <el-input v-model="ruleForm.card_id"></el-input>
                </el-form-item>
                <el-form-item label="银行卡对应的户名" prop="card_name">
                    <el-input v-model="ruleForm.card_name"></el-input>
                </el-form-item>
                <el-form-item
                    label="证件号"
                    prop="cert_id"
                    :rules="
                            ruleForm.bank_acct_type === '2'
                                ? rules.cert_id
                                : [{ required: false }]
                        "
                >
                    <el-input v-model="ruleForm.cert_id"></el-input>
                </el-form-item>

                <el-form-item
                    label="证件类型"
                    prop="cert_type"
                    :rules="
                            ruleForm.bank_acct_type === '2'
                                ? rules.cert_type
                                : [{ required: false }]
                        "
                >
                    <el-input v-model="ruleForm.cert_type"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="tel_no">
                    <el-input v-model="ruleForm.tel_no"></el-input>
                </el-form-item>
                <el-form-item
                    label="银行编码"
                    prop="bank_code"
                    :rules="
                            ruleForm.bank_acct_type === '1'
                                ? rules.bank_code
                                : [{ required: false }]
                        "
                >
                    <el-input v-model="ruleForm.bank_code"></el-input>
                </el-form-item>
                <el-form-item label="开户银行名称" prop="bank_name">
                    <el-input v-model="ruleForm.bank_name"></el-input>
                </el-form-item>
                <el-form-item
                    label="银行账户开户银行所在省份编码"
                    prop="prov_code"
                    :rules="
                            ruleForm.bank_acct_type === '1'
                                ? rules.prov_code
                                : [{ required: false }]
                        "
                >
                    <el-input v-model="ruleForm.prov_code"></el-input>
                </el-form-item>
                <el-form-item
                    label="银行账户开户银行所在地区编码"
                    prop="area_code"
                    :rules="
                            ruleForm.bank_acct_type === '1'
                                ? rules.area_code
                                : [{ required: false }]
                        "
                >
                    <el-input v-model="ruleForm.area_code"></el-input>
                </el-form-item>

                <el-button
                    type="primary"
                    @click="submitForm('ruleForm')"
                >提交</el-button
                >
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
import {
    selectAdapayMember,
    createAdapayMember,
} from "@/api/adapayMember/adapayMember";
export default {
    props: ["merchantId"],
    data() {
        return {
            // 汇付会员
            adapayMember: null,
            openCreateAdapayMember: false,
            // 汇付结算账户
            adapaySettleAccount: null,
            openCreateAdapaySettleAccount: false,
            ruleForm: {
                nickname: "",
                email: "",
                gender: "",
                location: "",
                card_id: "",
                card_name: "",
                cert_id: "",
                cert_type: "",
                tel_no: "",
                bank_code: "",
                bank_name: "",
                bank_acct_type: "",
                prov_code: "",
                area_code: "",
                merchantId: this.merchantId,
            },
            rules: {
                email: [
                    {
                        required: true,
                        message: "请填写会员邮箱",
                        trigger: "blur",
                    },
                    {
                        type: "email",
                        message: "请输入正确的邮箱地址",
                        trigger: "blur",
                    },
                ],
                gender: [
                    {
                        required: true,
                        message: "请选择会员性别",
                        trigger: "blur",
                    },
                ],
                location: [
                    {
                        required: true,
                        message: "请填写会员地址",
                        trigger: "blur",
                    },
                ],
                nickname: [
                    {
                        required: true,
                        message: "请填写会员昵称",
                        trigger: "blur",
                    },
                ],
                card_id: [
                    {
                        required: true,
                        message: "请填写银行卡号",
                        trigger: "blur",
                    },
                    {
                        pattern: /^[1-9]\d{9,29}$/,
                        message: "银行卡号格式有误",
                        trigger: "blur",
                    },
                ],
                card_name: [
                    {
                        required: true,
                        message: "请填写银行卡号对应的户名",
                        trigger: "blur",
                    },
                ],
                tel_no: [
                    {
                        required: true,
                        message: "请填写手机号",
                        trigger: "blur",
                    },
                    {
                        pattern: /^(?:(?:\+|00)86)?1\d{10}$/,
                        message: "手机号格式有误",
                        trigger: "blur",
                    },
                ],
                bank_acct_type: [
                    {
                        required: true,
                        message: "请选择银行账户类型",
                        trigger: "blur",
                    },
                ],
                area_code: [
                    {
                        required: true,
                        message: "银行账户开户银行所在地区编码",
                        trigger: "blur",
                    },
                ],
                prov_code: [
                    {
                        required: true,
                        message: "请填写银行账户开户银行所在省份编码",
                        trigger: "blur",
                    },
                ],
                cert_id: [
                    {
                        required: true,
                        message: "请填写证件号",
                        trigger: "blur",
                    },
                ],
                cert_type: [
                    {
                        required: true,
                        message: "请填写证件类型",
                        trigger: "blur",
                    },
                ],
                bank_code: [
                    {
                        required: true,
                        message: "请填写银行编码",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    methods: {
        // 创建汇付会员
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log("valid", this.ruleForm);
                    createAdapayMember(this.ruleForm).then((response) => {
                        console.log("新增", response);
                        this.getList();
                    });
                } else {
                    console.log("提交表格失败");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // 查询汇付会员
        selectAdapayMember() {
            console.log("this.merchantId", this.merchantId);
            let param = {
                merchantId: this.merchantId,
            };
            selectAdapayMember(param).then((response) => {
                // console.log("查询 response", response);
                this.ruleForm = response.data;
                this.adapayMember = response.data;
            });
        },
        // 查询汇付结算账户
        selectSettleAccount() {

        }
    },
    created() {
        this.selectAdapayMember();
        this.selectSettleAccount();
    },
};
</script>
