<!--
   @description: 账户安全 验证身份
   @author: XWl
-->
<template>
  <div>
    <el-form ref="ruleForm" :model="fromData" :rules="rules" label-width="124px" status-icon class="demo-ruleForm">
      <el-form-item label="请选择验证方式：" prop="pass">
        <el-select v-model="fromData.phon" style="width: 240px">
          <el-option label="手机验证" value="00" />
        </el-select>
      </el-form-item>
      <el-form-item label="已验证手机号码：">
        <span>22222222222222</span>
      </el-form-item>
      <el-form-item label="验证码:">
        <el-input v-model.number="fromData.age" style="width: 100px" />
        <el-button :disabled="isCodeBut" style="margin-left: 10px;" @click="CodeBut">
          {{ getCodeBut }}{{ isCodeBut?'s':'' }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm2')">
          下一步
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Myverify',
  data() {
    return {
      isCodeBut: false, // 是否可以点击Btn
      getCodeBut: '获取验证码', // Btn内容
      fromData: {
        phon: '00'
      },
      //  校验
      rules: {}
    }
  },
  methods: {
  //  获取验证码
    CodeBut() {
      this.getCodeBut = 10
      if (this.isCodeBut === false) {
        this.isCodeBut = true
        const times = setInterval(() => {
          this.getCodeBut--
          if (this.getCodeBut < 0) {
            this.getCodeBut = '重新获取验证码'
            clearInterval(times)
            this.isCodeBut = false
          }
        }, 1000)
      }
    }
  }
}
</script>

<style scoped>
</style>
