<template>
    <main>
        <section class="layout-box">
            <div class="center-title clearfix">
                <h3>设置安全保护问题</h3>
                <a href="javascript:;" class="back-btn" @click="goBack">返回</a>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item prop="phoneNum">
                    <el-input
                        type="text"
                        v-model.number="ruleForm.phoneNum"
                        placeholder="请输入手机号"
                        class="phone"
                        disabled
                    ></el-input>
                </el-form-item>
                <el-form-item prop="question">
                    <el-select
                        v-model="ruleForm.question"
                        placeholder="请选择安全保护问题"
                        @change="selectQuestion"
                    >
                        <el-option
                            v-for="item in questionList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="answer">
                    <el-input
                        type="text"
                        v-model.number="ruleForm.answer"
                        placeholder="请输入安全保护答案"
                        maxlength="50"
                    ></el-input>
                </el-form-item>
                <el-form-item class="btn-reg">
                    <el-button
                        type="primary"
                        @click="submitForm('ruleForm')"
                        :loading="submitLoading"
                    >确定</el-button>
                </el-form-item>
            </el-form>
        </section>
    </main>
</template>

<script>
import { mapState } from "vuex";
import { api_findDictionary } from "api/login.js";
import { api_saveSecurityByKyc } from "api/center.js";
export default {
    name: "setLoginPass",
    computed: {
        ...mapState(["userInfo"])
    },
    methods: {
        init() {
            let companyNature = {
                params: {
                    type: "SECURITY_ENCRYPTED"
                }
            };
            api_findDictionary(companyNature)
                .then(res => {
                    if (res.success) {
                        this.questionList = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch(err => {});
        },
        goBack() {
            this.$router.go(-1);
        },
        selectQuestion(val) {
            this.questionList.filter(item => {
                if (item.id === val) {
                    this.securityKey = item.name;
                }
            });
        },
        submitForm(formName) {
            this.submitLoading = true;
            this.$refs[formName].validate(valid => {
                if (valid) {
                    let saveSecurityByKycData = {
                        data: {
                            validateFlag: false,
                            kycDictionaryId: this.ruleForm.question,
                            securityKey: this.securityKey,
                            securityValue: this.ruleForm.answer
                        }
                    };
                    api_saveSecurityByKyc(saveSecurityByKycData).then(res => {
                        if (res.success) {
                            this.$router.replace({
                                path: "/center/setting"
                            });
                        } else {
                            this.$message.error(res.msg);
                        }
                        this.submitLoading = false;
                    });
                } else {
                    this.submitLoading = false;

                    return false;
                }
            });
        }
    },
    data() {
        return {
            ruleForm: {
                phoneNum: "",
                question: "",
                answer: ""
            },
            rules: {
                question: [
                    {
                        required: true,
                        message: "请选择安全保护问题",
                        trigger: "change"
                    }
                ],
                answer: [
                    {
                        required: true,
                        message: "请输入安全保护答案",
                        trigger: "blur"
                    }
                ]
            },
            questionList: [],
            securityKey: "",
            submitLoading: false
        };
    },
    created() {
        this.init();
    },
    mounted() {
        this.ruleForm.phoneNum =
            this.userInfo.loginInfo.phoneNo.substring(0, 3) +
            "****" +
            this.userInfo.loginInfo.phoneNo.substring(7);
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.layout-box /deep/ .el-input.is-disabled .el-input__inner {
    color: #333;
}
.el-form {
    width: 330px;
    margin: 60px;
    .el-button,
    .el-select {
        width: 330px;
    }
}
.layout-box {
    overflow: hidden;
    min-height: calc(100vh - 184px);
    background: #fff;
}
.center-title {
    position: relative;
}
.back-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    padding-left: 22px;
    font-size: 14px;
    background: url(~assets/images/icon-center-back.png) left center no-repeat;
    color: #3d86e9;
}
</style>
