<template>
    <div class="container center-content">
        <div class="title">添加银行卡</div>
        <div class="box">
            <div class="name">
                <div class="name1">添加银行卡</div>
                <div class="name2">成功绑定银行卡后<span style="color: #fdfb60">不能修改</span></div>
            </div>
            <div class="border"></div>
            <div class="content">
                <el-form
                    :label-position="labelPosition"
                    label-width="287px"
                    :model="ruleForm"
                    ref="form"
                    :rules="rules"
                >
                    <el-form-item label="开户行" prop="password">
                        <el-input
                            style="width: 300px"
                            type="password"
                            v-model="ruleForm.password"
                            placeholder="请输入新密码，8-16位字母数字组合"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="卡号" prop="ipc">
                        <el-input
                            style="width: 300px"
                            type="number"
                            v-model="ruleForm.ipc"
                            placeholder="请输入银行预留手机号"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item
                        prop="phone"
                        label="银行预留手机号"
                        :rules="{
                            pattern: /^1[3-9]\d{9}$/,
                            message: '请输入正确的手机号',
                            trigger: 'blur'
                        }"
                    >
                        <el-input
                            style="width: 300px"
                            :disabled="true"
                            v-model="ruleForm.phone"
                            placeholder="请输入手机号"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="code" label="验证码">
                        <el-form-item prop="code" :rules="{ required: true, message: '请输入', trigger: 'blur' }">
                            <el-input style="width: 300px" v-model="ruleForm.code" placeholder="请输入短信验证码">
                                <span
                                    @click="send"
                                    style="color: #fdfb60; cursor: pointer; font-size: 13px"
                                    slot="suffix"
                                    >{{ time === 0 ? '发送验证码' : `重新发送${time}s` }}</span
                                >
                            </el-input>
                        </el-form-item>
                    </el-form-item>
                </el-form>
                <div class="btn">
                    <el-button type="primary" @click="ipcSend">确认</el-button>
                    <div class="btn2" @click="all('/accountdata')">返回</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import eventBus from '../../eventBus';
import phone from '../../mixins/phone';
import { mapState, mapMutations } from 'vuex';
export default {
    mixins: [phone],
    data() {
        return {
            labelPosition: 'right',
            ruleForm: {
                password: '',
                phone: ''
            },
            time: 0,
            rules: {
                checkPass: [
                    {
                        validator: (rule, value, callback) => {
                            if (value !== this.ruleForm.password) {
                                callback(new Error('两次密码输入不一致'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'blur'
                    },
                    { required: true, message: '请再次输入密码', trigger: 'blur' }
                ]
            }
        };
    },
    computed: {
        ...mapState(['userInfo'])
    },
    created() {
        this.ruleForm.phone = this.userInfo.phone;
    },
    methods: {
        ...mapMutations(['updateUserInfo']),
        // 验证码
        send() {
            if (this.time === 0) {
                this.sendMsg(this.userInfo.phone);
            }
        },
        ipcSend() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    console.log('银行卡');
                }
            });
        }
    }
};
</script>
<style>
input[type='number'] {
    -moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}
</style>
<style lang="less" scoped>
.container {
    .btn {
        display: flex;
        justify-content: center;
        margin-top: 80px;
        .btn2 {
            width: 130px;
            height: 36px;
            background: #c4c7cc;
            border-radius: 4px;
            cursor: pointer;
            color: #ffffff;
            font-size: 13px;
            text-align: center;
            line-height: 38px;
            margin-left: 20px;
        }
    }
    /deep/ .el-button {
        width: 130px;
        height: 36px;
        color: #1a1a1a;
        background: linear-gradient(133deg, @prim 0%, @warn 100%);
        border-radius: 4px;
        line-height: 6px;
        border: 0;
    }
    /deep/ .el-form-item__error {
        margin-left: 174px;
    }
    /deep/ .el-step__title {
        font-size: 13px;
    }
    /deep/ .el-form-item__label {
        color: #ffffff;
        margin-left: 175px;
    }
    /deep/ .el-form {
        margin-top: 66px;
    }
    /deep/ .el-input__inner {
        border: 1px solid #494a4d;
        background: #1c1e26;
        color: #ffffff;
    }
    .title {
        height: 30px;
        font-size: 30px;
        font-weight: 400;
        font-family: ZhenyanGB-Regular, ZhenyanGB;
        color: #ffffff;
        line-height: 30px;
        padding: 60px 0;
    }
    .box {
        height: 539px;
        background: #1c1e26;
    }
    .name {
        .flex();
        padding: 17px 16px;
        .name1 {
            font-size: 16px;
            font-weight: bold;
            color: #ffffff;
            line-height: 26px;
        }
        .name2 {
            font-size: 12px;
            font-weight: 400;
            color: #939599;
            margin-left: 10px;
        }
    }
    .phone {
        color: #ffffff;
        font-size: 18px;
    }
    .border {
        height: 1px;
        background: #494a4d;
        margin: 0 16px 40px;
    }
}
</style>
