<template>
  <UploadBgBox>
    <input
      v-if="TheBox.type === 'upload'"
      type="file"
      :accept="TheBox.accept"
      ref="inputRef"
      class="hidden"
      @change="handleFileInputChange"
    />
    <Icon
      v-if="TheBox.icon.tag === 'icon'"
      :icon-name="TheBox?.icon?.iconName"
      style="font-size: 51px"
      :style="TheBox?.icon?.style"
      class="mx-auto"
    ></Icon>
    <img
      v-else-if="TheBox.icon.tag === 'img'"
      :src="TheBox.icon.url"
      class="mx-auto select-none"
      draggable="false"
      :style="TheBox?.icon?.style"
      alt=""
    />
    <div
      v-if="TheBox.type === 'upload'"
      class="uploadTip"
      :style="TheBox.requiredMsgStyle"
    >
      {{ TheBox.requiredMsg }}
    </div>
    <syButton
      mode="uploadBtn"
      @click="handleClickBtn"
      :style="TheBox.btnStyle"
      >{{ TheBox.btnTxt }}</syButton
    >
    <div v-if="file && typeof uploadPercent === 'number' && uploadPercent < 1">
      <UploadPercent
        :file-name="file && file.name"
        :percent="uploadPercent"
        @cancel="$emit('cancelUpload')"
      ></UploadPercent>
    </div>
    <div
      v-if="
        (uploadPercent && uploadPercent >= 1 && file && file.name) ||
        (typeof uploadPercent !== 'number' && file && file.name)
      "
      class="flex w-full items-center justify-center overflow-hidden px-4"
    >
      <Icon
        :icon-name="TheBox.choosedFileIconName"
        class="mr-1 flex-shrink-0"
      ></Icon>
      <span
        class="overflow-hidden text-ellipsis whitespace-nowrap"
        style="
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: var(--sy-black);
          line-height: 32px;
        "
        >{{ file.name }}</span
      >
      <Icon
        @click="onClear"
        icon-name="iconshanchu"
        class="cursor-pointer flex-shrink-0"
        style="font-size: 8px; margin-left: 14px"
      ></Icon>
    </div>
  </UploadBgBox>
</template>

<script setup lang="ts">
/**
 * @description: 处理各种类型的文件上传或专辑选择的触发
 * 提供基本的样式，可以配置关键点的样式
 */
import Icon from "@/components/Icon/index.vue";
import UploadBgBox from "./UploadBgBox.vue";
import { syButton } from "cqk-sy-ui";
import { computed, ref, watch } from "vue";
import { boxConfig } from "./constants";
import { fileTypeChecked } from "../../utils/file";
import { ElMessage, useFormItem } from "element-plus";
import UploadPercent from "./UploadPercent/index.vue";

const props = defineProps<{
  type: "uploadPicture" | "uploadAlbum" | "selectAlbum" | "uploadRemark";
  file: File | any;
  uploadPercent?: number;
}>();
const inputRef = ref<HTMLInputElement | null>();
const { formItem } = useFormItem();
const emit = defineEmits(["clear", "clickCenterBtn", "upload", "cancelUpload"]);

const TheBox = computed(() => {
  return boxConfig[props.type];
});

const handleClickBtn = () => {
  if (TheBox.value.type === "upload") {
    inputRef.value?.click();
  } else {
    emit("clickCenterBtn");
  }
};

const handleFileInputChange = (e: Event) => {
  if (TheBox.value.type === "select") return;
  const files = (e.target as HTMLInputElement).files;
  if (!files || files?.length === 0) return;
  const file = files[0];
  if (!fileTypeChecked(file, inputRef.value!.accept)) {
    ElMessage.error("请上传指定类型的文件");
    return;
  }
  if (file.size >= TheBox.value.maxSize) {
    ElMessage.error("请上传指定大小的文件");
    return;
  }
  emit("upload", file);
  (e.target as HTMLInputElement).value = "";
};

const onClear = () => {
  emit("clear");
};

watch(
  () => props.file,
  () => {
    formItem?.validate("change");
  }
);
</script>

<style lang="scss" scoped>
.uploadTip {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: var(--sy-black);
  line-height: 17px;
}
</style>
