<template>
  <div>
    <div class="flex text-center">
      <input
        type="file"
        name=""
        id="idCardFront"
        class="hidden"
        accept=".jpg,.jpeg,.png,.gif,.bmp"
        @change="handleFileChange($event, 'front')"
      />
      <input
        type="file"
        name=""
        id="idCardBack"
        class="hidden"
        accept=".jpg,.jpeg,.png,.gif,.bmp"
        @change="handleFileChange($event, 'back')"
      />
      <div v-loading="loading1">
        <label for="idCardFront" class="cursor-pointer">
          <img
            v-show="!urls.front"
            src="@/assets/img/idCardFront.png"
            style="width: 158px"
            alt=""
          />
          <img
            v-show="urls.front"
            style="width: 158px"
            :src="urls.front"
            alt=""
          />
        </label>
        <div>手持正面身份证</div>
      </div>
      <div style="margin-left: 44px" v-loading="loading2">
        <label for="idCardBack" class="cursor-pointer">
          <img
            v-show="!urls.back"
            src="@/assets/img/idCardBack.png"
            style="width: 158px"
            alt=""
          />
          <img
            v-show="urls.back"
            style="width: 158px"
            :src="urls.back"
            alt=""
            srcset=""
          />
        </label>
        <div>手持反面身份证</div>
      </div>
    </div>
    <div class="tip mt-5">
      证件图像上传 温馨提醒：允许上传
      .jpg、.jpeg、.png、.gif、.bmp的图像文件，且文件不能大于2M。
    </div>
  </div>
</template>

<script setup lang="ts">
import { copyrightUploadFile } from "@/service/copyrightService";
import { syMessage } from "cqk-sy-ui";
import { reactive, ref, watch } from "vue";
const props = defineProps<{
  modelValue: {
    front: { url?: string; file?: File };
    back: { url?: string; file?: File };
  } | null;
}>();
const emit = defineEmits(["update:modelValue"]);

const loading1 = ref(false);
const loading2 = ref(false);

const urls = reactive({
  front: getImageUrl(props.modelValue?.front) || "",
  back: getImageUrl(props.modelValue?.back) || "",
});

watch(
  () => props.modelValue,
  (newV) => {
    URL.revokeObjectURL(urls.front);
    URL.revokeObjectURL(urls.back);

    urls.front = getImageUrl(props.modelValue?.front) || "";
    urls.back = getImageUrl(props.modelValue?.back) || "";
  }
);

function getImageUrl(dta: any) {
  if (!dta) return "";
  return (dta && dta.file && URL.createObjectURL(dta.file!)) || dta.url || "";
}

const handleFileChange = async (e: Event, arg: "front" | "back") => {
  const target = e.target as HTMLInputElement;
  const file = target.files && target.files[0];

  if (arg === "front") loading1.value = true;
  else loading2.value = true;

  if (!file) return;

  const typeValid = checkType(file.name);
  const sizeValid = checkSize(file.size);
  if (!typeValid)
    syMessage.warning("只许上传.jpg、.jpeg、.png、.gif、.bmp的图像文件");
  if (!sizeValid) syMessage.warning("文件不能大于2M");
  if (typeValid && sizeValid) {
    const ret = await copyrightUploadFile(file);
    if (ret && ret.code === 200) {
      emit("update:modelValue", {
        ...props.modelValue,
        [arg]: {
          file,
          ...ret.data,
        },
      });
    }
  }
  if (arg === "front") loading1.value = false;
  else loading2.value = false;
  target.value = "";
};

const checkType = (fileName: string) => {
  return !!fileName.match(/\.((jpg)|(jpeg)|(png)|(gif)|(bmp))$/);
};
const checkSize = (size: number) => {
  return !(size > 2 * 1024 * 1024);
};
</script>

<style lang="scss" scoped>
.tip {
  font-size: 12px;
  font-weight: 400;
  color: var(--sy-gray);
  line-height: 26px;
}
</style>
