<template>
  <el-form
    ref="form"
    :model="caseFile"
    label-width="90px"
    class="camera-from dispatch-file-from jm-file-upload"
  >
    <el-form-item label="分组：">
      <el-select
      v-model="caseFile.dictId"
      placeholder="请选择分组"
      size="large"
      @change="change"
      :fit-input-width="true"
      style="width: 240px"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.dictName"
        :value="item.id"
      />
    </el-select>
      <!-- <el-cascader
        v-model="caseFile.type"
        :options="fileOptions"
        :props="{
          checkStrictly: true,
        }"
        clearable
      /> -->
    </el-form-item>
    <el-form-item label="文件：" class="mandatory uploadFile">
      <el-upload
        class="upload-demo"
        :multiple="false"
        drag
        :limit="1"
        :disabled="!caseFile.dictId || (!!file)"
        :before-upload="isAnimation?upload5:upload"
        :file-list="isAnimation?fileList5:fileList"
        :http-request="()=>{}"
        :on-success="handleSuccess"
        :on-preview="isAnimation?previewFile5:previewFile"
        :accept="isAnimation?accept5:accept"
        :before-remove="isAnimation?removeFile5:removeFile"
      >
        <div type="primary" :disabled="!!file">
          <div>点击或拖拽文件上传 {{ isAnimation?'5MB':'2GB' }}</div>
          <div class="">以内的{{ formatDesc }}</div>
        </div>
        <template v-slot:file="{ file }: { file: UploadFile }">
          <div class="file" @click.stop="previewFile()">
            <div>
              <el-icon><Document /></el-icon>
              <span class="name">{{ file.name }}</span>
            </div>
            <el-icon @click.stop="removeFileAll"><Close /></el-icon>
          </div>
        </template>
      </el-upload>
    </el-form-item>
    <div v-if="isAnimation" style="margin-left: 35px">注意：obj 文件需要压缩成zip格式（含obj、jpg、mtl）上传。</div>
  </el-form>
</template>

<script setup lang="ts">
import {
  DrawFormatDesc,
  DrawFormats,
  FileDrawType,
  OtherFormatDesc,
  OtherFormats,
  fileOptions
} from "@/constant/caseFile";
import { maxFileSize } from "@/constant/caseFile";
import { useUpload } from "@/hook/upload";
import { CaseFile, addCaseFile } from "@/store/caseFile";
import { getDictFileLists, uploadNewFile } from "@/store/case";
import { ElMessage, UploadFile } from "element-plus";
import { computed, ref, watchEffect, onMounted } from "vue";
import { addCaseScenes } from "./quisk";
import { QuiskExpose } from "@/helper/mount";

const props = defineProps<{
  caseId: number;
  fileType: number;
}>();

const isAnimation = ref(false)
const caseFile = ref({
  caseId: props.caseId,
  filesTypeId: props.fileType,
  filesTitle: "",
  type: '',
  dictId: ''
});
const options = ref([])
onMounted(async () => {
  const res = await getDictFileLists(1);
  console.log('onMounted', res);
  options.value = res;
});

const { size, fileList, upload, removeFile, previewFile, file, accept } = useUpload({
  maxSize: 2000 * 1024 * 1024,
  formats: [".jpg", ".png", ".jpeg", ".mp4", ".wav", ".mp3"],
});

const { size:size5, fileList:fileList5, upload:upload5, removeFile:removeFile5, previewFile:previewFile5, file:file5, accept:accept5 } = useUpload({
  maxSize: 5 * 1024 * 1024,
  formats: [".zip",".glb"],
});
const formatDesc = computed(() =>
{
  return isAnimation.value?'zip、glb上传':'jpg、png、jpeg、mp4、wav、mp3上传'
}
);

// 上传请求
const handleSuccess = (option) => {
  console.log(option);
}
const change = (vale) => {
  removeFile()
  removeFile5()
  let item = options.value.find(ele => ele.id == vale) || {}
  isAnimation.value = item.useType == 'animation'
}
const removeFileAll = async () => {
  removeFile()
  removeFile5()
  console.log('removeFileAll')
};

const handleAdd = async () => {
  await addCaseScenes();
};
watchEffect(() => {
  if (file.value?.name) {
    caseFile.value.filesTitle = file.value?.name.substring(0, 50);
  }
  if (file5.value?.name) {
    caseFile.value.filesTitle = file5.value?.name.substring(0, 50);
  }
});

defineExpose<QuiskExpose>({
  async submit() {
    if ((!file.value && !isAnimation.value) || (!file5.value && isAnimation.value)) {
      ElMessage.error("请上传附件");
      throw "请上传附件";
    } else if (!caseFile.value.filesTitle.trim()) {
      ElMessage.error("附件标题不能为空！");
      throw "附件标题不能为空！";
    }

    await uploadNewFile({ dictId: caseFile.value.dictId, file: isAnimation.value?file5.value:file.value });
    return 
  },
});
</script>

<style scoped lang="scss">
.upload-demo {
  overflow: hidden;
}

.file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  > div {
    display: flex;
    align-items: center;
  }

  .name {
    margin-left: 10px;
  }
}
.jm-file-upload {
  .mtk {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
