<template>
  <div class="abstract">
    <el-button class="w-full" @click="handleAdd">上传</el-button>
    <!-- <div class="blfrom">
      <div class="fromTitle">侦查实验</div>
      <el-upload
        class="upload-demo"
        :multiple="false"
        drag
        :show-file-list="false"
        :before-upload="upload"
        :file-list="fileList"
        :http-request="uploadNewFile"
        :on-success="handleSuccess"
        :on-preview="previewFile"
        :accept="accept"
        :before-remove="removeFile"
      >
        <div type="primary" :disabled="!!file">
          <div>点击或拖拽文件上传</div>
          <div class="">
            支持≤10MB jpg\png\jpeg格式图片，及≤500MB pdf\doc文件上传
          </div>
        </div>
      </el-upload>
    </div>
    <div class="blfrom">
      <div class="fromTitle">其他材料</div>
      <el-upload
        class="upload-demo"
        :multiple="false"
        drag
        :before-upload="upload"
        :file-list="fileList"
        :on-success="handleSuccess1"
        :http-request="uploadNewFile"
        :on-preview="previewFile"
        :accept="accept"
        :before-remove="removeFile"
      >
        <div type="primary" :disabled="!!file">
          <div>点击或拖拽文件上传</div>
          <div class="">
            支持≤10MB jpg\png\jpeg格式图片，及≤500MB pdf\doc文件上传
          </div>
        </div>
      </el-upload>
    </div> -->
    <div class="blList">
      <div class="listItem py-2" v-for="(item, index) in list" :key="index" v-show="item.caseFilesList?.length">
        <div class="title1 pb-2">{{ item.filesTypeName }}</div>
        <viewImg edit :list="item.caseFilesList || []" @handleItem="handleItem" /> 
        <!-- <div
          class="list2"
          v-for="(item2, index2) in item.childrenList"
          :key="index2"
        >
          <div class="title2">{{ item2.filesTypeName }}</div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, reactive } from "vue";
import { addCaseFile } from "../originalPhoto/quisk";
import { ElMessage, ElMessageBox } from "element-plus";
import { uploadNewFile, addByMediaLiBrary } from "@/store/case";
import { updateByTreeFileLists } from "@/store/case";
import { Delete, Edit } from "@element-plus/icons-vue";
import viewImg from "@/components/viewImg/index.vue"
import { router } from "@/router";
const active = ref(true);
const srcList = [
  "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
];
const settype = ref(false);
const ruleFormRef = ref(null);
const activeName = ref("1");
const list = ref([]);
const ssjId = ref(0);
const zjjId = ref(0);
const showModal = ref(false);
const caseId = computed(() => router.currentRoute.value?.params?.caseId);
const fileInfo = ref({
  accept: ".jpg, .jpeg, .png, .mp4",
  formats:  [".jpg", ".png", ".jpeg", ".doc", ".docx", ".pdf"],
  DrawFormatDesc: "jpg、png、jpeg、doc、pdf上传",
  fileSize: 500 * 1024 * 1024,
});
getList();
const handleClick = (tab) => {
  console.log(tab);
};
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
function getList() {
  updateByTreeFileLists(caseId.value).then((res) => {
    let newlist = res.find((ele) => ele.filesTypeName == "案件卷宗") || [];
    list.value = newlist.childrenList || [];
    ssjId.value = newlist.childrenList.find(
      (ele) => ele.filesTypeName == "诉讼卷"
    ).filesTypeId;
    zjjId.value = newlist.childrenList.find(
      (ele) => ele.filesTypeName == "证据卷"
    ).filesTypeId;
    console.log("list.value", list.value);
  });
}
function handleSuccess(item) {
  let uploadId = item?.data.id;
  addByMediaLiBrary({ caseId: caseId.value, filesTypeId: ssjId.value, uploadId }).then((res) => {
    getList();
  });
}
function handleSuccess1(item) {
  let uploadId = item?.data.id;
  addByMediaLiBrary({ caseId: caseId.value, filesTypeId: zjjId.value, uploadId }).then((res) => {
    getList();
  });
}
const upload = async (file: File) => {
  const fileType = file.name
    .substring(file.name.lastIndexOf("."))
    .toUpperCase();
  let imgList = [".jpg", ".png", ".jpeg", ".doc", ".docx", ".pdf"];
  let fileList = [".doc", ".docx", ".pdf"];
  if (!imgList.some((type) => type.toUpperCase() === fileType)) {
    ElMessage.error(`请上传pdf、word 格式文件和 jpg、png、jpeg格式图片图片`);
    return false;
  } else if (
    (fileList.includes(fileType) && file.size > 500 * 1024 * 1024) ||
    file.size > 100 * 1024 * 1024
  ) {
    ElMessage.error(
      `请上传≤10MB jpg、png、jpeg格式图片，及≤500MB pdf、doc文件`
    );
    return false;
  } else {
    return file;
  }
};
function handleActive(params) {
  console.log("handleActive", params);
}
function handleItem(type, item) {
  console.log("handleItem", type, item);
}
async function handleAdd() {
  await addCaseFile({ caseId: caseId.value, fileInfo: fileInfo.value, filesTypeName: ['案件卷宗'] });
  getList();
}
function handleDel() {
  ElMessageBox.confirm("确定删除？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    ElMessage({
      type: "success",
      message: "删除成功",
    });
  });
}
</script>
<style lang="scss" scoped>
.abstract {
  height: 100%;
  .el-form-item--label-top {
    margin-bottom: 14px;
  }
  .form-content {
    height: calc(100vh - 225px);
    overflow-y: scroll;
  }
  .demo-tabs {
    .el-tabs__item {
      height: 32px;
      line-height: 32px;
    }
  }
}
</style>
