<template>
  <div v-if="captchaEnabled" style="width: 100%">
    <el-input
      v-model.trim="verCode"
      size="large"
      clearable
      placeholder="图形验证码"
    >
      <template #prefix>
        <svg-icon
          icon-class="validCode"
          class="el-input__icon input-icon"
        />
      </template>
      <template #append>
        <div style="height: 98%" @click="getCode">
          <el-image :src="codeUrl" class="login-code-img" />
        </div>
      </template>
    </el-input>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { getCodeImg } from '@/api/login'

const emit = defineEmits(['update:modelValue', 'update:uuid'])

// 验证码开关
const captchaEnabled = ref(true)
const codeUrl = ref('')

const props = defineProps({
  modelValue: {
    required: true,
    type: String,
    default: ''
  },
  uuid: {
    required: true,
    type: String,
    default: ''
  },
  autoLoad: {
    type: Boolean,
    default: true
  }
})

const verCode = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  }
})

onMounted(() => {
  if (props.autoLoad) { getCode() }
})

function getCode() {
  if (captchaEnabled.value) {
    getCodeImg().then((res) => {
      captchaEnabled.value = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled
      if (captchaEnabled.value) {
        codeUrl.value = 'data:image/gif;base64,' + res.data.img
        emit('update:uuid', res.data.uuid)
      }
    })
  }
}

defineExpose({
  getCode
})

</script>

<style lang="scss" scoped>
:deep(.el-input-group__append) {
  padding: 0;
}

.input-icon {
  height: 39px;
  width: 14px;
  margin-left: 0px;
}

.login-code-img {
  height: 100%;
  width: 100px;
  cursor: pointer;
}
</style>