<template>
  <el-upload
    ref="uploadRef"
    class="upload-demo w-full"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    :auto-upload="false"
    accept=".txt,.doc,.docx,.zip,.rar,.7z"
    :limit="1"
    :file-list="(modelValue && [modelValue]) || []"
    @change="handleFileChange"
    @remove="handleFileRemove"
  >
    <template #trigger>
      <div class="uploadbox flex items-center justify-center">
        <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>
    </template>
  </el-upload>
</template>

<script setup lang="ts">
import { ElUpload, UploadFile, UploadFiles, useFormItem } from "element-plus";
import type { UploadInstance } from "element-plus";
import { ref } from "vue";
import Icon from "@/components/Icon/index.vue";

const uploadRef = ref<UploadInstance>();
const list = ref([]);
const props = defineProps<{
  modelValue?: UploadFile;
}>();

const { formItem } = useFormItem();

const emit = defineEmits(["update:modelValue"]);

const handleFileChange = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
  console.log("change", uploadFile);
  emit("update:modelValue", { raw: uploadFile.raw, name: uploadFile.name });
  formItem?.validate("change");
};
const handleFileRemove = () => {
  console.log("remove");
  emit("update:modelValue", undefined);
  formItem?.validate("change");
};
const submitUpload = () => {
  uploadRef.value!.submit();
};
</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;
}
</style>
