<!-- 敏感信息授权按钮组件 -->
<template>
  <div>
    <el-button class="grant-btn" type="text" @click="grantPrivilege">敏感信息授权</el-button>
    <el-dialog append-to-body title="敏感信息短信授权"
               v-model:visible="dialogVisible">

      <el-form>
        <el-form-item label="手机号">
          <el-row>{{mobile}}</el-row>
        </el-form-item>
        <el-form-item label="验证码">
          <el-col :span="11">
            <el-input type="number" style="display: inline-block" maxlength="6" placeholder="请输入验证码" v-model="form.code"></el-input>
          </el-col>
          <el-col :span="5">
            <el-button style="display: inline;margin-left: 5px;" plain type="text"  @click.prevent="getCode()">{{title}}</el-button>
          </el-col>

        </el-form-item>
        <el-alert :closable="false">验证通过后将去除脱敏，有效期为30分钟，请尽快操作</el-alert>
        <el-alert type="warning" :closable="false">手机号码登记后统一维护，如有修改，请联系相关部门。教职工(组织人事处) 学生(班主任) 驻校人员(后勤处)</el-alert>
      </el-form>

      <template v-slot:footer>
<span  class="dialog-footer" style="text-aligin:center">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkCode">确 定</el-button>
      </span>
</template>
    </el-dialog>
  </div>

</template>
<script>
import request from '@/router/axios'
export default {
  name: "sensitive",
  data(){
    return{
      dialogVisible: false,
      second: '', //倒计时
      disabled: false, //是否禁用按钮
      timer: null, //计时器
      form:{
        code:''
      },
      mobile:'**'
    }

  },
  computed: {
    title() {
      return this.disabled ? `重新获取 ( ${this.second} ) s` : '获取验证码';
    },
  },
  methods:{
    grantPrivilege(){
      this.dialogVisible = true
      this.form.code = ''
      this.getMobile()
    },
    getCode() {
      // console.log('点击')

      let that = this
      let s = 60  //倒计时间
      if (!that.timer) {
        that.second = s
        that.disabled = true

        that.timer = setInterval(() => {
          if (that.second > 0 && this.second <= s) {
            that.second--
          } else {
            that.disabled = false
            clearInterval(that.timer)
            this.timer = null
          }
        }, 1000)

        that.sendCode()
      }
    },
    getMobile(){
      request({
        url: '/admin/mobile/getMobile',
        method: 'get'
      }).then(response => {
        console.log(response.data)
        if (response.data.data) {
          this.mobile = response.data.data
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    sendCode(){
      request({
        url: '/admin/mobile/codeSensitive',
        method: 'get'
      }).then(response => {
        console.log(response.data)
        if (response.data.data) {
          this.$message.success("短信发送成功")
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    checkCode(){
      request({
        url: '/admin/mobile/checkSensitiveCode',
        method: 'post',
        data:{'code':this.form.code}
      }).then(response => {
        console.log(response.data)
        if (response.data.data) {
          this.dialogVisible = false
          this.$message.success("校验通过")

        } else {
          this.$message.error("校验失败")
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
  .wrapper {
    display: inline-block;
  }
  .grant-btn{
    marigin: 0px 5px !important;
    color: #f39217;
  }

</style>
