<template>
  <div class="app-content" style="height:110px;">
    <div class="verifi-layout">
      <a-input v-model="code" style="width:100px;" />
      <img :src="url" @click="getCode" style="margin-left: 5px;">
    </div>
    <div class="btn-layout">
      <a-button type="primary" @click="verifiClick()">确定</a-button>
    </div>
  </div>
</template>
<script>

export default {
  name: "verifiCode",
  components: {

  },
  data () {
    return {
      uuid: null, url: null, code: null,
    }
  },
  props: {
    mobile: {
      type: String,
      default: () => {
        return null
      }
    },
  },
  created () {
    this.getCode()
  },
  methods: {
    getCode () {
      this.$api.base.getCode().then(({ data = {} }) => {
        if (data) {
          this.uuid = data.uuid
          this.url = data.img
        }
      }).catch(() => { })
    },
    verifiClick () {
      if (!!!this.code) {
        this.$message.warn('请填写验证码')
        return
      }
      if (!!!this.mobile) {
        this.$message.warn('参数缺失！')
        return
      }
      let par = { uuid: this.uuid, code: this.code, mobile: this.mobile }
      this.$api.base.sendVerificationCode(par).then(({ data = {} }) => {
        if (data) {
          this.$emit('close', 'success')
        } else
          this.getCode()
      }).catch(() => {
        this.getCode()
      })
    }
  }
}
</script>
<style lang="less" scoped>
.verifi-layout {
  height: 50px;
  position: relative;
  .ant-input {
    top: 5px;
    left: 20px;
    position: absolute;
  }
  img {
    left: 120px;
    position: absolute;
    cursor: pointer;
  }
}
.btn-layout {
  padding-left: 20px;
}
</style>