<template>
  <el-form-item prop="kaptcha">
    <el-input v-model="kaptcha" class="kaptcha-el" name="kaptcha" type="text" placeholder="验证码" @input="passKaptcha" />
    <img :src="kaptcha_src" class="kaptcha" alt="验证码" @click="refreshCode">
  </el-form-item>
</template>

<script>
import { getKaptcha } from '@/api/login'
export default {
  name: 'Kaptcha',
  // props: {
  //   kaptcha: {// 验证码默认值为空
  //     type: String,
  //     default: () => ''
  //   }
  // },
  data() {
    return {
      kaptcha: '',
      kaptcha_src: '/../../../static/images/kaptcha.png'
    }
  },
  mounted: function() {
    this.refreshCode()
  },
  methods: {
    refreshCode() {
      getKaptcha(this.$store.getters.sid).then(response => {
        console.log('kaptcha:' + response.data.kaptcha)
        this.kaptcha_src = response.data.kaptcha
      }).catch(error => {
        this.$message.error(error)
      })
    },
    passKaptcha() {
      this.$emit('passKaptcha')
    }
  }
}
</script>

<style scoped>
  .kaptcha-el{
    float:left;
    width:65% !important;
  }
  .kaptcha-el input{
    float:left;
    width:65%
  }
  .kaptcha{
    height:40px;
    width:80px;
    float:right;
  }
</style>