<template>
    <div class="add-bankcard">
        <el-dialog
            :visible.sync="dialogFormVisibleHkCompany"
            :before-close="closeDialog"
            :close-on-click-modal="false"
        >
            <bank-list :innerVisibleBankList="innerVisibleBankList" @close="closeBankList"></bank-list>
            <declare :innerVisibleDeclare="innerVisibleDeclare" @close="closeDeclare"></declare>
            <div slot="title" class="header-title">
                <h3>
                    添加新的提现银行卡
                    <span class="title-age">*添加的银行卡信息与认证的实名信息保持一致</span>
                </h3>
            </div>
            <div class="company-type">
                <el-select v-model="acctType" @change="selectAcctType">
                    <el-option
                        v-for="item in acctCompanyType"
                        :key="item.companyAcctType"
                        :label="item.companyAcctDesc"
                        :value="item.companyAcctType"
                    ></el-option>
                </el-select>
                <p class="declare-btn" v-if="acctType === 'COMPANY_SELF'">
                    查看企业董事收款
                    <a href="javascript:;" @click="showDeclare">《申明》</a>
                </p>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item prop="bankAreaValue">
                    <el-select
                        v-model="ruleForm.bankAreaValue"
                        placeholder="请选择银行所在地区"
                        @change="selectBankArea"
                    >
                        <el-option
                            v-for="item in bankAreaList"
                            :key="item.bankAreaType"
                            :label="item.bankAreaDesc"
                            :value="item.bankAreaType"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="currencyValue">
                    <el-select
                        v-model="ruleForm.currencyValue"
                        placeholder="请选择账户币种"
                        @change="selectAcctName"
                    >
                        <el-option
                            v-for="item in currencyList"
                            :key="item.currencyKyc"
                            :label="item.currency"
                            :value="item.currencyKyc"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <!-- 企业对私 -->
                <template v-if="acctNameFlag">
                    <el-form-item prop="acctNameValue">
                        <el-input type="text" v-model="ruleForm.acctNameValue" disabled></el-input>
                    </el-form-item>
                    <el-form-item prop="bankcardNum">
                        <p
                            class="bankcard-format"
                            v-show="bankcardFormat"
                        >{{ruleForm.bankcardNum.replace(/(\d{4})(?=\d)/g, "$1 ")}}</p>
                        <el-input
                            type="text"
                            v-model="ruleForm.bankcardNum"
                            placeholder="请输入银行卡号"
                            maxlength="20"
                            @focus="showBankcardFormat"
                            @blur="showBankcardFormat"
                        ></el-input>
                        <a
                            href="javascript:;"
                            class="cl-blue"
                            style="position:absolute;left: 350px;top:0;width:150px"
                            @click="showBankList"
                        >查看支持银行卡列表</a>
                    </el-form-item>
                </template>
                <!-- 企业对公人民币 -->
                <template v-if="companyPrivate">
                    <el-form-item prop="privateAcctNameValue">
                        <el-input type="text" v-model="ruleForm.privateAcctNameValue" disabled></el-input>
                    </el-form-item>
                    <el-form-item prop="privateBank">
                        <el-select
                            v-model="ruleForm.privateBank"
                            placeholder="请选择开户银行"
                            @change="selectPrivateBank"
                        >
                            <el-option
                                v-for="item in privateBankList"
                                :key="item.bankName"
                                :label="item.bankName"
                                :value="item.bankName"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="privateBankName" v-if="othorBank">
                        <el-input
                            type="text"
                            v-model="ruleForm.privateBankName"
                            placeholder="请输入开户银行名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="province">
                        <el-select
                            v-model="ruleForm.province"
                            placeholder="请选择银行所在省/直辖市"
                            @change="selectProvince"
                        >
                            <el-option
                                v-for="item in provinceList"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="city">
                        <el-select
                            v-model="ruleForm.city"
                            placeholder="请选择市/县"
                            @change="selectCity"
                        >
                            <el-option
                                v-for="item in cityList"
                                :key="item.code"
                                :label="item.name"
                                :value="item.code"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="subBranch">
                        <el-input
                            type="text"
                            v-model="ruleForm.subBranch"
                            placeholder="请输入开户支行银行名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="privateBankcardNum">
                        <p
                            class="bankcard-format"
                            v-show="bankcardFormat"
                        >{{ruleForm.privateBankcardNum.replace(/(\d{4})(?=\d)/g, "$1 ")}}</p>
                        <p class="notice">*请使用对公账户，填写个人银行账号会造成提现失败</p>
                        <el-input
                            type="text"
                            v-model="ruleForm.privateBankcardNum"
                            placeholder="请输入对公银行账号，请确保卡信息真实有效"
                            maxlength="20"
                            @focus="showBankcardFormat"
                            @blur="showBankcardFormat"
                        ></el-input>
                    </el-form-item>
                </template>
                <!-- 企业对公外币 -->
                <template v-if="companyPublic">
                    <el-form-item prop="publicBank">
                        <el-select
                            v-model="ruleForm.publicBank"
                            placeholder="请选择开户银行"
                            @change="selectPublicBank"
                        >
                            <el-option
                                v-for="item in publicList"
                                :key="item.bankName"
                                :label="item.bankName"
                                :value="item.bankName"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="publicBankName" v-if="othorPublicBank">
                        <el-input
                            type="text"
                            v-model="ruleForm.publicBankName"
                            placeholder="请输入银行名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="publicAcctNameValue">
                        <el-input
                            type="text"
                            v-model="ruleForm.publicAcctNameValue"
                            placeholder="请输入银行开户名称"
                            maxlength="100"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="publicBankcardNum">
                        <p
                            class="bankcard-format"
                            v-show="bankcardFormat"
                        >{{ruleForm.publicBankcardNum.replace(/(\d{4})(?=\d)/g, "$1 ")}}</p>
                        <p class="notice">*请使用对公账户，填写个人银行账号会造成提现失败</p>
                        <el-input
                            type="text"
                            v-model.trim="ruleForm.publicBankcardNum"
                            placeholder="请输入对公银行账号，请确保卡信息真实有效"
                            maxlength="20"
                            @focus="showBankcardFormat"
                            @blur="showBankcardFormat"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="swiftCode" v-if="companyPublic">
                        <el-input
                            type="text"
                            v-model.trim="ruleForm.swiftCode"
                            placeholder="请输入SWIFT/BIC编码，请确保卡信息真实有效"
                            maxlength="11"
                            @blur="upperCase(ruleForm.swiftCode)"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="address">
                        <el-input
                            type="text"
                            v-model="ruleForm.address"
                            placeholder="请使用英文输入银行地址"
                            maxlength="50"
                        ></el-input>
                    </el-form-item>
                </template>
                <el-form-item prop="phoneNum">
                    <el-input
                        type="text"
                        v-model.number="ruleForm.phoneNum"
                        placeholder="请输入手机号"
                        maxlength="11"
                        :disabled="this.acctType !== 'COMPANY_SELF'"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="verificationCode">
                    <el-input
                        v-model.trim="ruleForm.verificationCode"
                        placeholder="短信验证码"
                        class="verification-code"
                        maxlength="6"
                    ></el-input>
                    <el-button
                        type="primary"
                        :loading="sendSmsLoading"
                        @click="sendSms"
                        v-if="showCountDown"
                    >发送验证码</el-button>
                    <el-button
                        type="primary"
                        :loading="false"
                        class="count-down"
                        disabled
                        v-else
                    >{{countDown}}秒</el-button>
                </el-form-item>
                <el-form-item class="btn-reg">
                    <el-button
                        type="primary"
                        @click="submitForm('ruleForm')"
                        :loading="submitLoading"
                    >确认添加</el-button>
                    <el-button @click="closeDialog">返 回</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import {
    api_initAddBank,
    api_addBankCard,
    api_getProvence,
    api_getCity,
    api_findJsBankList
} from "api/center.js";
import { api_code } from "api/login.js";
import utils from "utils/utils.js";
import bankName from "const/const.js";
import BIN from "bankcardinfo";
import declare from "pages/dialog/declare";
import bankList from "pages/dialog/bankList";
let timer;
export default {
    name: "addBankcard",
    props: {
        dialogFormVisibleHkCompany: Boolean
    },
    computed: {
        ...mapState(["userInfo"])
    },
    components: {
        declare,
        bankList
    },
    data() {
        var checkCode = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("验证码不能为空"));
            } else if (value.length < 6) {
                return callback(new Error("验证码格式不正确"));
            } else {
                callback();
            }
        };
        var checkPhone = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入手机号"));
            } else if (!utils.isvalidPhone(value)) {
                callback(new Error("手机号格式错误"));
            } else {
                callback();
            }
        };
        var checkBankcard = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入银行卡号"));
            } else if (!utils.luhnCheck(value)) {
                callback(new Error("银行卡号格式错误"));
            } else {
                BIN.getBankBin(value)
                    .then(res => {
                        if (res.bankCode == "CZCB") {
                            this.bankName = "浙江稠州商业银行";
                        } else {
                            this.bankName = res.bankName;
                        }
                        this.bankCode = res.bankCode;

                        let findJsBankListParams = {
                            params: { bankCode: res.bankCode }
                        };
                        api_findJsBankList(findJsBankListParams).then(res => {
                            if (res.success) {
                                if (res.data.length < 1) {
                                    callback(
                                        new Error(
                                            "暂不支持添加该银行发行的银行卡！"
                                        )
                                    );
                                } else {
                                    callback();
                                }
                            } else {
                                callback(new Error(res.msg));
                            }
                        });
                    })
                    .catch(err => {
                        callback(new Error("银行卡号格式错误"));
                    });
            }
        };
        var getBankCode = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入开户银行名称"));
            } else {
                this.getBankNameAndCode(value);
                callback();
            }
        };
        var checkAddress = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入银行地址"));
            } else if (utils.regEngName(value)) {
                callback(new Error("请使用英文输入银行地址"));
            } else {
                callback();
            }
        };
        var checkPublicBankcardNum = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入对公银行账号，请确保卡信息真实有效"));
            } else if (utils.regEngName(value)) {
                callback(new Error("对公银行账号格式不正确"));
            } else {
                callback();
            }
        };
        var checkUpperCase = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入银行SWIFT/BIC编码"));
            } else if (value.length < 8) {
                callback(
                    new Error("你的SWIFT/BIC编码长度有误，应为8或者11个字符")
                );
            } else if (8 < value.length && value.length < 11) {
                callback(
                    new Error("你的SWIFT/BIC编码长度有误，应为8或者11个字符")
                );
            } else {
                callback();
            }
        };
        return {
            acctType: "COMPANY_SELF",
            ruleForm: {
                phoneNum: "",
                bankcardNum: "",
                verificationCode: "",
                acctNameValue: "",
                currencyValue: "",
                bankAreaValue: "",
                //企业对公人民币
                privateAcctNameValue: "",
                privateBank: "",
                privateBankName: "",
                province: "",
                city: "",
                subBranch: "",
                privateBankcardNum: "",
                //企业对公外币
                publicBank: "",
                publicBankName: "",
                publicAcctNameValue: "",
                publicBankcardNum: "",
                swiftCode: "",
                address: ""
            },
            rules: {
                phoneNum: [{ validator: checkPhone, trigger: "blur" }],
                bankcardNum: [{ validator: checkBankcard, trigger: "blur" }],
                verificationCode: [{ validator: checkCode, trigger: "blur" }],
                acctNameValue: [
                    {
                        required: true,
                        message: "请选择银行账户名称",
                        trigger: "change"
                    }
                ],
                currencyValue: [
                    {
                        required: true,
                        message: "请选择账户币种",
                        trigger: "change"
                    }
                ],
                bankAreaValue: [
                    {
                        required: true,
                        message: "请选择银行所在地区",
                        trigger: "change"
                    }
                ],
                privateBankName: [{ validator: getBankCode, trigger: "blur" }],
                privateBank: [
                    {
                        required: true,
                        message: "请选择开户银行",
                        trigger: "change"
                    }
                ],
                province: [
                    {
                        required: true,
                        message: "请选择银行所在省/直辖市",
                        trigger: "change"
                    }
                ],
                city: [
                    {
                        required: true,
                        message: "请选择市/县",
                        trigger: "change"
                    }
                ],
                subBranch: [
                    {
                        required: true,
                        message: "请输入开户支行银行名称",
                        trigger: "blur"
                    }
                ],
                privateBankcardNum: [
                    {
                        required: true,
                        message: "请输入对公银行账号，请确保卡信息真实有效",
                        trigger: "blur"
                    }
                ],
                publicBank: [
                    {
                        required: true,
                        message: "请选择开户银行",
                        trigger: "change"
                    }
                ],
                publicBankName: [
                    {
                        required: true,
                        message: "请输入银行名称",
                        trigger: "blur"
                    }
                ],
                publicAcctNameValue: [
                    {
                        required: true,
                        message: "请输入银行开户名称",
                        trigger: "blur"
                    }
                ],
                publicBankcardNum: [
                    { validator: checkPublicBankcardNum, trigger: "blur" }
                ],
                swiftCode: [{ validator: checkUpperCase, trigger: "blur" }],
                address: [{ validator: checkAddress, trigger: "blur" }]
            },
            showCountDown: true,
            countDown: 60,
            submitLoading: false,
            sendSmsLoading: false,
            markStr: "",
            initData: {}, //初始化数据data
            acctCompanyType: [],
            bankAreaList: [],
            currencyList: [],
            acctNameList: [],
            bankName: "", //银行名称
            bankCode: "", //银行code码
            accountName: "", //用户名称
            acctNameFlag: false,
            companyPrivate: false,
            companyPublic: false,
            othorBank: false,
            othorPublicBank: false,
            privateBankList: [],
            publicList: [
                {
                    bankName: "Citibank N.A.,HongKong Branch"
                },
                {
                    bankName: "HSBC HongKong"
                },
                {
                    bankName: "Hang Seng Bank Limited"
                },
                {
                    bankName: "其他银行"
                }
            ],
            provinceList: [],
            cityList: [],
            provinceName: "",
            cityName: "",
            innerVisibleDeclare: false,
            innerVisibleBankList: false,
            bankcardFormat: false
        };
    },
    methods: {
        closeDialog() {
            this.$refs["ruleForm"].resetFields();
            this.acctNameFlag = false;
            this.companyPrivate = false;
            this.companyPublic = false;
            this.showCountDown = true;
            clearInterval(timer);
            this.countDown = 60;
            this.$emit("close");
        },
        showDeclare() {
            this.innerVisibleDeclare = true;
        },
        closeDeclare() {
            this.innerVisibleDeclare = false;
        },
        upperCase(val) {
            this.ruleForm.swiftCode = val.toUpperCase();
        },
        showBankcardFormat() {
            this.bankcardFormat = !this.bankcardFormat;
        },
        //选对公对私
        selectAcctType(val) {
            this.$refs["ruleForm"].resetFields();
            if (val === "COMPANY_PUBLIC") {
                // this.ruleForm.bankAreaValue = "";
                // this.ruleForm.currencyValue = "";
                this.currencyList = [];
                this.acctNameFlag = false;
                this.bankAreaList = this.initData.bankArea;
            } else {
                this.currencyList = [];
                this.companyPrivate = false;
                this.companyPublic = false;
                this.bankAreaList = this.initData.bankArea.filter(item => {
                    if (item.bankAreaType == "MAIN_LAND") {
                        return item;
                    }
                });
            }
        },
        //选择银行所在地区
        selectBankArea(val) {
            if (this.acctType === "COMPANY_PUBLIC") {
                this.currencyList = this.initData.currencyWb;
            } else {
                this.currencyList = this.initData.currencyCNY;
            }
        },
        //选择币种
        selectAcctName(val) {
            if (this.acctType === "COMPANY_SELF") {
                //对私
                this.acctNameFlag = true;
                this.ruleForm.acctNameValue = this.initData.acctPersonalName[0].name;
            } else if (this.acctType === "COMPANY_PUBLIC") {
                //对公
                this.companyPublic = true;
            }
        },
        getProvence() {
            let getProvenceParams = {
                params: {}
            };
            api_getProvence(getProvenceParams).then(res => {
                if (res.success) {
                    this.provinceList = res.data;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        getCity(provinceCode) {
            let getCityParams = {
                params: {
                    provinceCode: provinceCode
                }
            };
            api_getCity(getCityParams).then(res => {
                if (res.success) {
                    this.cityList = res.data;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        selectPrivateBank(val) {
            if (val !== "其他银行") {
                this.othorBank = false;
                this.getBankNameAndCode(val);
            } else {
                this.othorBank = true;
            }
        },
        selectPublicBank(val) {
            if (val !== "其他银行") {
                this.othorPublicBank = false;
            } else {
                this.othorPublicBank = true;
            }
        },
        getBankNameAndCode(val) {
            for (const key in bankName.bankName) {
                if (bankName.bankName.hasOwnProperty(key)) {
                    const element = bankName.bankName[key];
                    if (element == val) {
                        this.bankName = element;
                        this.bankCode = key;
                    }
                }
            }
        },
        selectProvince(val) {
            this.getCity(val);
            this.provinceList.filter(item => {
                if (item.code == val) {
                    this.provinceName = item.name;
                }
            });
        },
        selectCity(val) {
            this.cityList.filter(item => {
                if (item.code == val) {
                    this.cityName = item.name;
                }
            });
        },
        showBankList() {
            this.innerVisibleBankList = true;
        },
        closeBankList() {
            this.innerVisibleBankList = false;
        },
        sendSms() {
            this.sendSmsLoading = true;
            if (this.showCountDown) {
                let verificationCode = {
                    data: {
                        phoneNo: this.ruleForm.phoneNum
                    }
                };
                api_code(verificationCode)
                    .then(res => {
                        if (res.success) {
                            this.sendSmsLoading = false;
                            this.showCountDown = false;
                            this.markStr = res.data.markStr;

                            this.$message({
                                message: "验证码发送成功，请注意查收",
                                type: "success"
                            });
                            timer = setInterval(() => {
                                this.countDown--;
                                if (this.countDown < 0) {
                                    this.showCountDown = true;
                                    clearInterval(timer);
                                    this.countDown = 60;
                                }
                            }, 1000);
                        } else {
                            this.sendSmsLoading = false;
                            this.$message.error(res.msg);
                        }
                    })
                    .catch(err => {
                        this.sendSmsLoading = false;
                    });
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                this.submitLoading = true;
                if (valid) {
                    if (this.markStr === "") {
                        this.$message.error("请获取验证码！");
                        this.submitLoading = false;
                        return false;
                    }
                    let addBankCardData = {};
                    if (this.acctType === "COMPANY_SELF") {
                        //对私
                        addBankCardData = {
                            data: {
                                bindingType: "BINDING_COLLECTION",
                                companyAcctType: this.acctType,
                                stateOrRegion: this.ruleForm.bankAreaValue,
                                bankName:
                                    this.bankName ||
                                    bankName.bankName[this.bankCode],
                                bankCode: this.bankCode,
                                currencyCode: this.ruleForm.currencyValue,
                                accountCode: "SELF",
                                accountName: this.ruleForm.acctNameValue,
                                accountNo: this.ruleForm.bankcardNum,
                                phone: this.ruleForm.phoneNum,
                                markStr: this.markStr,
                                smsCode: this.ruleForm.verificationCode
                            }
                        };
                    } else if (this.acctType === "COMPANY_PUBLIC") {
                        //对公
                        addBankCardData = {
                            data: {
                                bindingType: "BINDING_COLLECTION",
                                companyAcctType: this.acctType,
                                stateOrRegion: this.ruleForm.bankAreaValue,
                                bankName:
                                    this.ruleForm.publicBankName ||
                                    this.ruleForm.publicBank,
                                bankCode: this.bankCode,
                                currencyCode: this.ruleForm.currencyValue,
                                accountCode: "COMPANY",
                                swiftCode: this.ruleForm.swiftCode,
                                accountName: this.ruleForm.publicAcctNameValue,
                                accountNo: this.ruleForm.publicBankcardNum,
                                phone: this.ruleForm.phoneNum,
                                markStr: this.markStr,
                                smsCode: this.ruleForm.verificationCode
                            }
                        };
                    }
                    api_addBankCard(addBankCardData).then(res => {
                        if (res.success) {
                            this.$emit("success");
                            this.closeDialog();
                        } else {
                            this.$message.error(res.msg);
                        }
                        this.submitLoading = false;
                    });
                } else {
                    this.submitLoading = false;

                    return false;
                }
            });
        }
    },
    created() {
        clearInterval(timer);
        let initAddBankParams = {
            params: {}
        };
        api_initAddBank(initAddBankParams).then(res => {
            if (res.success) {
                this.initData = res.data;
                this.acctCompanyType = res.data.acctCompanyType.reverse();
                if (this.acctType == "COMPANY_SELF") {
                    this.bankAreaList = res.data.bankArea.filter(item => {
                        if (item.bankAreaType == "MAIN_LAND") {
                            return item;
                        }
                    });
                }
            } else {
                this.$message.error(res.msg);
            }
        });
        let findJsBankListParams = {
            params: {}
        };
        api_findJsBankList(findJsBankListParams).then(res => {
            if (res.success) {
                this.privateBankList = res.data;
            } else {
                this.$message.error(res.msg);
            }
        });
        this.ruleForm.phoneNum = this.userInfo.loginInfo.phoneNo;
    }
};
</script>

<style lang="less" scoped>
@import "../../../assets/styles/common.css";
.add-bankcard /deep/ .el-input.is-disabled .el-input__inner {
    color: #333;
}
.add-bankcard /deep/ .el-dialog {
    width: 550px;
}
.bankcard-format {
    position: absolute;
    left: 0;
    top: -38px;
    width: 330px;
    height: 40px;
    padding-left: 15px;
    line-height: 40px;
    font-size: 20px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background: #fff8e8;
    color: #333;
}
.company-type {
    display: block;
    width: 330px;
    margin-bottom: 20px;
    .el-select {
        width: 100%;
    }
}
.header-title {
    text-align: left;
    padding-bottom: 20px;
    border-bottom: 1px solid #eaeaea;
    h3 {
        font-size: 18px;
        span {
            font-size: 14px;
            color: #cc3333;
        }
    }
}
.el-form /deep/ .verification-code {
    width: 190px;
}
.el-form /deep/ .verification-code + .el-button--primary {
    width: 120px;
    padding: 12px 0;
    margin-left: 16px;
    vertical-align: middle;
}
.declare {
    p {
        margin-bottom: 30px;
        line-height: 24px;
        font-size: 14px;
        text-indent: 2em;
    }
}
.count-down {
    width: 120px;
}
.el-form {
    width: 330px;
    .el-select {
        width: 100%;
    }
}
.declare-btn {
    margin-top: 10px;
    line-height: 20px;
    text-align: left;
    a {
        color: #3d86e9;
    }
}
.btn-reg {
    position: relative;
    & /deep/ .el-button--primary {
        width: 330px;
    }
    & /deep/ .el-button--default {
        position: absolute;
        top: 0;
        right: -180px;
        width: 158px;
        height: 40px;
    }
}
.notice {
    text-align: left;
    line-height: 20px;
    font-size: 12px;
    color: #cc3333;
}
</style>
