<template>
  <el-dialog
    title="谷歌验证码验证"
    :visible.sync="visible"
    width="400px"
    :close-on-click-modal="false"
    :before-close="handleCancel"
    :show-close="false" 
    :close-on-press-escape="false"
    center
    class="google-dialog"
  >
    <div class="dialog-body">
      <p class="tip-text">为了您的账户安全，请输入谷歌验证码</p>
      <el-input
        v-model="code"
        placeholder="请输入6位谷歌验证码"
        maxlength="6"
        class="code-input"
        ref="codeInput"
        @keyup.enter.native="handleConfirm"
      ></el-input>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button
        type="primary"
        :loading="loading"
        :disabled="code.length !== 6"
        @click="handleConfirm"
      >验证</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "GoogleAuth",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      code: ""
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.code = "";
        this.$nextTick(() => this.$refs.codeInput.focus());
      }
    }
  },
  methods: {
    handleConfirm() {
      this.$emit("confirm", this.code);
    },
    handleCancel() {
      this.$emit("cancel");
    }
  }
};
</script>

<style scoped>
.google-dialog ::v-deep .el-dialog {
  border-radius: 10px;
}
.dialog-body {
  text-align: center;
}
.tip-text {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}
.code-input {
  width: 80%;
  text-align: center;
}
</style>
