<template>
  <div>
    <input
      type="file"
      name=""
      id="uploadAttachment"
      class="hidden"
      accept=".png,.jpg,.jpeg,.gif,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt,.mp3,.wma,.wav,.amr,.m4a,.wmv,.asf,.asx,.rm,.rmvb,.mpg,.mpeg,.mp4,.3gp,.mov,.m4v,.avi,.mkv,.flv,.vob"
      @change="handleChange"
    />
    <label for="uploadAttachment">
      <div
        v-loading="loading"
        class="uploadbox flex items-center justify-center cursor-pointer"
        :class="{
          ' cursor-not-allowed': !!modelValue,
        }"
      >
        <div>
          <Icon
            icon-name="iconshangchuan"
            style="color: #c3c3c3; font-size: 56px"
          ></Icon>
          <div style="font-size: 14px; font-weight: 500; color: #787d85">
            上传文件
          </div>
        </div>
      </div>
    </label>
  </div>
  <Transition>
    <div
      v-if="modelValue"
      class="w-full uploadedFile flex items-center mt-3 px-2"
      style="background-color: #f5f5f5"
    >
      <img
        src="@/assets/img/link.png"
        style="width: 11px"
        class="mr-2"
        alt=""
      />
      <div @click="handleClickDownload" class="cursor-pointer">
        {{ modelValue && name }}
      </div>
      <div class="flex-grow"></div>
      <Icon
        iconName="iconhuishouzhan1"
        class="cursor-pointer"
        @click="
          $emit('update:modelValue', undefined);
          formItem?.validate('change');
        "
      ></Icon>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { ElMessage, UploadFile, UploadProps, useFormItem } from "element-plus";
import type { UploadInstance } from "element-plus";
import { ref, watch } from "vue";
import Icon from "@/components/Icon/index.vue";
import { copyrightUploadFile } from "@/service/copyrightService";
import { saveAs } from "file-saver";

const props = defineProps<{
  modelValue?: UploadFile;
}>();

const loading = ref(false);

const { formItem } = useFormItem();

const emit = defineEmits(["update:modelValue"]);
let fileName = "";
let file_: File | undefined;
const name = ref("");

watch(
  () => props.modelValue,
  () => {
    name.value = fileName || props.modelValue?.name || "";
  }
);

function handleClickDownload() {
  if (file_) {
    saveAs(file_);
  } else {
    saveAs(props.modelValue?.url!);
  }
}

const handleChange = async (e: Event) => {
  const target = e.target as HTMLInputElement;
  const file = target.files && target.files[0];
  if (!file) return;
  file_ = file!;
  loading.value = true;
  if (file.size >= 60 * 1024 * 1024) {
    ElMessage.error("文件大小超过60M");
    loading.value = false;
    return;
  }
  const res = await copyrightUploadFile(file!);
  fileName = file?.name!;
  name.value = file?.name!;
  if (res && res.code === 200) {
    emit("update:modelValue", {
      ...res.data,
    });
  }
  loading.value = false;
  formItem?.validate("change");
};
</script>

<style lang="scss" scoped>
.upload-demo {
  :deep(.el-upload-list__item-name) {
    font-size: 14px;
    font-weight: 400;
    color: var(--sy-blue);
  }
}
.uploadbox {
  width: 249px;
  height: 139px;
  background: #f7f7f7;
  border-radius: 10px;
  border: 1px solid #e2e2e2;
}
.uploadedFile {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #3370fe;
}
</style>
