<template>
  <el-form
    ref="form"
    :model="caseFile"
    label-width="90px"
    class="camera-from dispatch-file-from jm-file-upload"
  >
    <el-form-item label="分类：" class="mandatory">
      <el-cascader
      style="width: 300px;"
        v-model="caseFile.filesTypeId"
        :options="fileOptions"
        :props="{
          checkStrictly: false,
        }"
        clearable
      />
    </el-form-item>
  </el-form>
</template>

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

const props = defineProps<{
  caseId: number;
  filesTypeId: number;
  filesId: number;
  fileOptions: Array<any>;
  filesIds: Array<number>;
}>();
const fileOptions = ref([])
const caseFile = ref({
  caseId: props.caseId,
  filesTypeId: props.filesTypeId,
  filesTitle: "",
  filesId: props.filesId,
  filesIds: props.filesIds,
});
onMounted(async () => {
  if(props.fileOptions?.length){
    fileOptions.value = getTreeList(props.fileOptions);
  }else{
    fileOptions.value = await updateSelectByTreeFileLists();
  }
  console.log('caseFile', caseFile)
  console.log(fileOptions.value);
});
console.log(caseFile.value, '===caseFile');
const { size, fileList, upload, removeFile, previewFile, file, accept } = useUpload({
  maxSize: 10 * 1024 * 1024,
  formats: [".jpg", ".jpeg", ".png", '.mp4'],
});
const getTreeList = (list) =>  {
    return list.map(item => {
      if (item.childrenList) {
        return {
          value: item.filesTypeId,
          label: item.filesTypeName,
          children: getTreeList(item.childrenList)
        };
      }
      return {
        value: item.filesTypeId,
        label: item.filesTypeName,
      }
    })
  }
const formatDesc = computed(() =>
  'jpg、png、jpeg、mp4上传'
);

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

defineExpose<QuiskExpose>({
  async submit() {
    console.log(caseFile.value, "文件列表");
    if (!caseFile.value.filesTypeId) {
      ElMessage.error("分类不能为空");
      throw "分类不能为空";
    } 
    let filesTypeId
    if(caseFile.value.filesTypeId instanceof Array){
      filesTypeId = caseFile.value.filesTypeId?.slice(-1)[0]
    }else {
      filesTypeId = caseFile.value.filesTypeId
    }
    // let filesTypeId = caseFile.value.filesTypeId?.slice(-1)
    console.log('getupdateFileType', filesTypeId, caseFile.value)
    await getupdateFileType({...caseFile.value , filesTypeId});
    return caseFile.value;
  },
});
</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>
