<template>
    <div>
        <el-dialog :visible.sync="showDialog" width="600px" title="绑定两步验证">
            <el-steps :space="300" :active="step" align-center style="margin-bottom: 60px">
                <el-step></el-step>
                <el-step></el-step>
                <el-step></el-step>
            </el-steps>
            <div v-if="step === 1" class="step1">
                <qrcode :value="qrcodeContent" :options="{ width: 250 }"></qrcode>
                <el-alert type="success" :closable="false" center>
                    <span slot="title">请用手机下载安装Google Authenticator，然后扫描上方二维码</span>
                </el-alert>
            </div>
            <div v-if="step === 2" class="step2">
                <el-form :model="tfaForm" ref="tfaForm" :rules="tfaRules" label-position="right" label-width="100px">
                    <el-form-item prop="password" label="密码">
                        <el-input type="password" v-model="tfaForm.password"></el-input>
                    </el-form-item>
                    <el-form-item prop="code" label="谷歌验证码">
                        <el-input type="number" v-model="tfaForm.code"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="step === 3" class="step3" v-loading="loading" element-loading-text="绑定中">
                <i class="el-icon el-icon-success" v-if="!loading"></i>
            </div>
            <div slot="footer">
                <el-button type="primary" size="mini" v-if="step === 2" @click="step = 1">上一步</el-button>
                <el-button type="primary" size="mini" v-if="step === 1" @click="step = 2">下一步</el-button>
                <el-button type="primary" size="mini" v-if="step === 2" @click="bind">下一步</el-button>
                <el-button type="primary" size="mini" v-if="step === 3 && !loading" @click="showDialog = false">
                    完成
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import qrcode from '@chenfengyuan/vue-qrcode';
export default {
    components: { qrcode },
    data() {
        return {
            showDialog: false,
            step: 1,
            tfaForm: {
                key: '',
                password: '',
                code: ''
            },
            tfaRules: {
                password: [{ required: true, message: '请输入密码' }],
                code: [{ required: true, message: '请输入谷歌验证码' }]
            },
            loading: false
        };
    },
    created() {
        this.getKey();
        if (!location.href.includes('192.168.')) {
            this.$http.get('/user/tfaStatus').then(res => {
                if (res.status === false) {
                    this.showDialog = true;
                }
            });
        }
    },
    computed: {
        qrcodeContent() {
            return `otpauth://totp/${this.$store.state.userInfo.id}?secret=${this.tfaForm.key}&issuer=JMRH`;
        }
    },
    methods: {
        getKey() {
            this.$http.post('/user/getTFAKey').then(res => {
                this.$set(this.tfaForm, 'key', res);
            });
        },
        bind() {
            this.$refs.tfaForm
                .validate()
                .then(res => {
                    this.step = 3;
                    this.loading = true;
                    this.$http
                        .post('/user/bindTFA', { ...this.tfaForm })
                        .then(res => {
                            this.loading = false;
                        })
                        .catch(e => {
                            this.step = 2;
                            this.loading = false;
                            this.$message.error(e.error);
                        });
                })
                .catch(() => {});
        }
    }
};
</script>
<style lang="less" scoped>
.step1 {
    text-align: center;
}
.step2 {
    width: 400px;
    margin: auto;
}
.step3 {
    text-align: center;
    .el-icon {
        font-size: 100px;
        color: #67c23a;
    }
}
</style>
