<script lang="ts" setup>
import { getCaptcha } from '@/service'

const emits = defineEmits<{
  success: [{ code: string; uuid: string }]
}>()

const imgCode = ref('')
const captcha = ref({
  img: '',
  uuid: '',
})
const show = ref(false)

function init() {
  initData()
  show.value = true
}

function close() {
  show.value = false
  imgCode.value = ''
  captcha.value = {
    img: '',
    uuid: '',
  }
}

function handleSubmit() {
  if (!imgCode.value) {
    return uni.showToast({ title: '请输入图形验证码', icon: 'none' })
  }
  emits('success', { code: imgCode.value, uuid: captcha.value.uuid })
  close()
}

async function initData() {
  try {
    const res = await getCaptcha()
    captcha.value = {
      img: 'data:image/jpeg;base64,' + res?.data?.img,
      uuid: res?.data?.uuid,
    }
  } catch (e) {}
}

defineOptions({

})

defineExpose({
  init,
  close,
})
</script>

<template>
  <wd-popup :close-on-click-modal="false" custom-style="border-radius: 20rpx;" v-model="show">
    <view class="content">
      <view class="content__header">
        <view class="content__title">请输入图形验证码</view>
        <view class="content__close-icon" @click="close">
          <image src="@/pages-login/static/images/icon_del@2x.png"></image>
        </view>
      </view>
      <view class="content__body">
        <view
          class="flex items-center justify-between border border-solid border-gray-3 rounded-50rpx"
        >
          <wd-input
            no-border
            v-model.trim="imgCode"
            placeholderStyle="font-size: 28rpx;line-height: 40rpx;color: #999999;"
            placeholder="请输入"
            custom-class="flex-1 p-[15rpx+30rpx] !bg-transparent   "
          ></wd-input>
          <view class="flex items-center">
            <image :src="captcha.img" class="w-180rpx h-80rpx rounded-r-50rpx"></image>
          </view>
        </view>

        <view class="content__tip" @click="initData">看不清？换一张</view>
      </view>
      <view class="content__footer">
        <wd-button block @click="handleSubmit">确定</wd-button>
      </view>
    </view>
  </wd-popup>
</template>

<style lang="scss" scoped>
.content {
  box-sizing: border-box;
  width: 630rpx;
  padding: 30rpx 40rpx 40rpx;
  background-color: #fff;
  border-radius: 16rpx;

  &__header {
    position: relative;
    text-align: center;
  }

  &__body {
    margin: 42rpx 0 40rpx;

    .uni-easyinput {
      height: 90rpx;
      display: flex;
      align-items: center;
      border-radius: $uni-border-radius-lg;
      border: 1rpx solid #d1d1d1;
    }
  }

  &__close-icon {
    position: absolute;
    right: 0;
    top: 8rpx;
    width: 32rpx;
    height: 32rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  &__title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    line-height: 48rpx;
    letter-spacing: 2rpx;
  }

  &__tip {
    margin-top: 10rpx;
    text-align: right;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 33rpx;
    color: $uni-color-primary;
    letter-spacing: 2rpx;
  }
}
</style>
