<template>
    <div class="input_info margin-t-15" style="position: relative;">
        <!--            验证码-->
        <go-input
            v-model="vCode"
            :errorFlag="vCodeError"
            :validMsg="vCodeValidMsg"
            :width="210"
            :item="vCodeItem"
        ></go-input>
        <div style="position: absolute;top: 0;left: 210px;">
            <img @click="getvCode" :src="vCodeSrc" style="margin-left: 20px;"/>
        </div>
    </div>
</template>

<script>
    import {GoingUtils, QueryCommand} from "goingutils";

    export default {
        name: "go-v-code",
        beforeCreate() {
        },
        data: function () {
            return {
                getTimestamp: "",
                vCodeDb: "",
                vCodeError: false,
                vCode: "", //验证码
                vCodeSrc: "", //验证码的图片生成路径
                vCodeValidMsg: "请输入验证码",
                //验证码配置
                vCodeItem: {
                    showLabel: false,
                    showSlot: false,
                    labelSplit: false,
                    placeholder: "请输入验证码"
                }
            };
        },
        props: {},
        computed: {},
        methods: {
            //显示必填的提示信息
            showRequiredMsg() {
                this.vCodeError = true;
                this.vCodeValidMsg = "请输入验证码，请确认！";
            },
            //获取验证码的输入值
            getVCodeValue() {
                return this.vCode;
            },
            //获取验证码
            getvCode() {
                this.getTimestamp = new Date().getTime();
                this.vCodeSrc = `${window.SysConfigUtils.go_eplat_adress}${window.projectName.loginDes}/login/verifyCode?timestamp=${this.getTimestamp}`;
            },
            //获取验证码 并检验验证码输入是否正确
            validateVCode() {
                let vcodeFlag = true;
                let queryCommand = new QueryCommand({
                    url: `${window.SysConfigUtils.go_eplat_adress}${window.projectName.loginDes}/login/getVerifyCode`,
                    method: "GET",
                    validateSession: false
                });
                //执行查询操作
                queryCommand.executeAsyncQuery({
                    params: {uuid: this.getTimestamp},
                    successFun: data => {
                        this.vCodeDb = data["code"];
                        //输入到验证码和数据库验证码不匹配
                        if (this.vCodeDb !== this.vCode) {
                            this.vCodeError = true;
                            this.vCodeValidMsg = "输入到验证码不正确，请确认";
                            GoingUtils.showErrorMessage("输入到验证码不正确，请确认");
                            this.getvCode();
                            vcodeFlag = false;
                        }
                    },
                    errorFun: msg => {
                        //如果存在错误信息
                        this.vCodeError = true;
                        this.vCodeValidMsg = msg;
                        GoingUtils.showErrorMessage(this.i18n(msg), {position: "top"});
                        vcodeFlag = false;
                    }
                });
                return vcodeFlag;
            }
        },
        mounted() {
            this.getvCode();
        },
        components: {},
        watch: {
            vCode(newVal) {
                this.vCodeError = false;
            }
        }
    };
</script>
