<script lang="ts" setup>
import {getCaptcha} from "@/pages-login/service";

const {t} = useI18n();
const emit = defineEmits(["submit"]);

const show = ref(false);
const code = ref("");
const captchaData = ref({
  img: "",
  uuid: "",
  code: "",
});

function onOpen() {
  getCode();
  show.value = true;
}

function getCode() {
  code.value = "";
  getCaptcha().then((res: any) => {
    captchaData.value = res.data;
  });
}

function handleClose() {
  show.value = false;
}

function handleSubmit() {
  emit("submit", {
    code: code.value,
    uuid: captchaData.value.uuid,
  });
  handleClose();
}

defineExpose({
  onOpen,
});
</script>

<template>
  <wd-popup
      v-model="show"
      custom-style="border-radius:20rpx;"
      position="center"
      @close="handleClose"
  >
    <view class="relative w-630rpx box-border px-36rpx py-40rpx">
      <image
          class="absolute top-34rpx right-36rpx w-32rpx h-32rpx"
          src="@img/chef/100404.png"
          @click="handleClose"
      ></image>
      <view class="text-36rpx text-#333333 text-center lh-33rpx mb-22rpx">{{
          t("pages-login.verify-code.title")
        }}
      </view>
      <view class="text-28rpx text-#999999 lh-28rpx text-center mb-40rpx">{{
          t("pages-login.verify-code.description")
        }}
      </view>
      <view
          class="mt-24rpx overflow-hidden flex pl-30rpx items-center justify-between h-90rpx border-2rpx border-solid border-#D1D1D1 rounded-20rpx"
      >
        <wd-input
            v-model.trim="code"
            :cursorSpacing="20"
            :focus-when-clear="false"
            :maxlength="20"
            :placeholder="t('common.enter')"
            clearable
            custom-class="flex-1"
            no-border
            placeholderStyle="font-size: 28rpx;color: #999;line-height: 42rpx;"
            type="number"
        >
        </wd-input>

        <image
            :src="`data:image/gif;base64,${captchaData.img}`"
            class="w-120rpx h-88rpx"
        ></image>
      </view>
      <view
          class="text-24rpx text-#FF6106 lh-24rpx text-right mt-16rpx"
          @click="getCode"
      >{{ t("pages-login.verify-code.changeOne") }}
      </view
      >
      <view class="mt-54rpx">
        <wd-button
            block
            custom-class="!h-90rpx !bg-#14181B !text-36rpx text-#fff font-bold !rounded-16rpx"
            @click="handleSubmit"
        >
          {{ t("common.continue") }}
        </wd-button>
      </view>
    </view>
  </wd-popup>
</template>

<style lang="scss" scoped></style>
