<template>
    <el-dialog :visible.sync="dialogVisible" title="绑定谷歌验证器" width="680px" :show-close="false" :close-on-press-escape="false"
        :close-on-click-modal="false"  class="google-bind-dialog">
        <div class="dialog-body">
            <p class="tip-text">1. 使用 <strong>Google Authenticator</strong> 扫描二维码，或手动输入密钥添加账号</p>

            <div class="qr-section">
                <canvas ref="qrCanvas" class="qr-canvas"></canvas>
                <div class="manual-section">
                    <!-- <p><strong>账户：</strong> {{ account }}</p> -->
                    <p>
                        <strong>密钥：</strong>
                        <el-tag size="small" type="success">{{ secret }}</el-tag>
                        <el-button type="text" size="mini" @click="copySecret">复制</el-button>
                    </p>
                </div>
            </div>

            <el-input v-model="code" placeholder="请输入 6 位验证码" maxlength="6" class="code-input"
                @keyup.enter.native="submit" ref="codeInput" />

            <div class="error-text" v-if="errorMsg">{{ errorMsg }}</div>
        </div>

        <template #footer>
            <el-button type="primary" :loading="loading" :disabled="code.length !== 6" @click="submit">
                确认绑定
            </el-button>
        </template>
    </el-dialog>
</template>

<script>
import QRCode from 'qrcode'
import { setGoogleAuth } from '@/api/admin/sys-user'

export default {
    name: 'BindGoogleDialog',
    props: {
        visible: { type: Boolean, default: true },
        otpAuthUrl: { type: String, default: '' },
        secret: { type: String, default: '' },
        account: { type: String, default: '' },
    },
    data() {
        return {
            code: '',
            loading: false,
            errorMsg: ''
        }
    },
    computed: {
        dialogVisible: {
            get() {
                return this.visible
            },
            set(val) {
                this.$emit('update:visible', val)
            }
        }
    },
    watch: {
        visible(val) {
            if (val) {
                this.code = ''
                this.errorMsg = ''
                this.$nextTick(() => {
                    QRCode.toCanvas(this.$refs.qrCanvas, this.otpAuthUrl, { width: 180 })
                    this.$refs.codeInput.focus()
                })
            }
        }
    },
    methods: {
        submit() {
            this.loading = true
            setGoogleAuth({
                secret: this.secret,
                code: this.code
            })
                .then(res => {
                    if (res && res.code === 200) {
                        this.dialogVisible = false
                        this.$message.success('绑定成功')
                    } else {
                        this.errorMsg = res.message || '绑定失败'
                    }
                })
                .finally(() => {
                    this.loading = false
                })
        },
        copySecret() {
            navigator.clipboard.writeText(this.secret).then(() => {
                this.$message.success('密钥已复制')
            }).catch(() => {
                this.$message.error('复制失败，请手动复制')
            })
        }
    }
}
</script>

<style scoped>
.google-bind-dialog ::v-deep .el-dialog {
    border-radius: 10px;
}

.dialog-body {
    padding: 10px 20px;
}

.tip-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.qr-section {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 15px;
}

.qr-canvas {
    width: 180px;
    height: 180px;
    border: 1px solid #eee;
}

.manual-section {
    flex: 1;
    font-size: 13px;
    color: #333;
}

.code-input {
    width: 240px;
    display: block;
    margin: 0 auto;
}

.error-text {
    text-align: center;
    margin-top: 8px;
    color: red;
}
</style>
