<template>
  <div class="scene abstract">
    <!-- <el-button class="w-full my-4"  style="margin-left: 0; margin-right: 0">添加场景</el-button> -->
    <div class="scene-list">
      <div class="list">
        <div v-for="(item, index) in list" :key="index">
          <div class="ItemTitle"
          
            @click="handleClick(item, index)"
            v-show="show ? item.caseFilesList : true"
            :class="{ active: childrenList.value == item.filesTypeId }"
          >
          <svgImg class="svg" :svgUrl="pngTosvg(item.iconList && item.iconList[0]?.iconUrl)" alt="" />
          <span>{{ item.filesTypeName }}</span>
          </div>
          <!-- <div
            class="itemList"
            v-for="(items, indexs) in item.childrenList"
            :key="indexs"
          >
            <div class="ItemTitle">{{ items.filesTypeName }}</div>
          </div> -->
        </div>
      </div>
    </div>
    <div class="abstractCentenr">
      <div class="centerTop" v-show="!show">
        <div class="import" @click="handleYr">
          <el-icon size="26" color="#26559B">
          <i style="font-size: 26px; color: #26559B" class="iconfont icon-import"></i></el-icon>
          <div class="name">导入</div>
        </div>
        <el-upload
          class="upload-demo upload"
          drag
          :before-upload="upload"
          :http-request="(e) => uploadNewFile({dictId:childrenList.item && childrenList.item.dictId, file: e.file, caseId:caseId})"
          :on-success="handleSuccess"
          :on-preview="previewFile"
          :on-progress="changeFile"
          :show-file-list="false"
          :accept="accept"
          :before-remove="removeFile"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple
        >
          <el-icon class="el-icon--upload" style="margin-top: 20px" size="26"
            >
            <i style="font-size: 26px; color: #26559B" class="iconfont icon-Upload" @click="handleView"></i>
            </el-icon>
          <div class="el-upload__text">
            点击或拖拽文件上传<br />支持 jpg、png、jpeg ≤ 50MB
          </div>
        </el-upload>
      </div>
      <div class="centerBottom">
        <div class="imgList">
          <viewImg ref="viewImgRef" :key="childrenList.value" @refresh="getList" :list="childrenList.caseFilesList || []" @handleEdit="handleEdit" @handleDel="handleDel" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import svgImg from "./svg.vue";
import viewImg from "@/components/viewImg/list.vue";
import { computed, ref } from "vue";
import { updateByTreeFileLists, getByTreeFileLists, uploadNewFile, addByMediaLiBrary, show } from "@/store/case";
import { useUpload } from "@/hook/upload";
import {
  Upload,
  DocumentAdd,
  CircleCheck,
  Delete,
  Edit,
} from "@element-plus/icons-vue";
import { router } from "@/router";
import { addCaseFile, setTypeFile, addCaseScenes } from "./quisk";
const caseId = computed(() => router.currentRoute.value?.params?.caseId);
const filesTypeId = ref(0);
const active2 = ref(0);
const active = ref(true);
const settype = ref(false);
const fileList = ref([]);
const { size, upload, removeFile, previewFile, file, accept } = useUpload({
  maxSize: 50 * 1024 * 1024,
  formats: [".jpg",".png",".jpeg",".bmp"],//".mp4", ".wav", ".mp3", ".shp"
});
const viewImgRef = ref(null)
const childrenList = ref({
  list: [],
  value: "",
  item: {},
  caseFilesList: [],
});
const showModal = ref(false);
const srcList = ref([]);
const list = ref([]);
const activeNames = ref(["1"]);
const handleChange = (val: string[]) => {
  console.log(val);
};
getList();
function handleActive(params) {
  console.log("handleActive", params);
}

function getList() {
  updateByTreeFileLists(caseId.value).then((res) => {
    list.value =
      res.find((ele) => ele.filesTypeName == "痕迹物证")?.childrenList || [];
    srcList.value = list.value;
    let activeIndex = srcList.value.findIndex((item) => childrenList.value.value?item.filesTypeId == childrenList.value.value:item.caseFilesList);
    if(!childrenList.value.value && activeIndex == -1){
      activeIndex = 0
    }
    let activeItem = srcList.value[activeIndex]; //.find((item) => item.caseFilesList && item.caseFilesList.length);
    if (!activeItem) {
      return;
    }
    childrenList.value.item = activeItem;
    childrenList.value.value = activeItem.filesTypeId;
    childrenList.value.caseFilesList = activeItem.caseFilesList;
  });
}
async function handleAdd() {
  await addCaseFile({ caseId: caseId.value, filesTypeName: ["原始照片"] });
  getList();
}
const handleEdit = async (lists) => {
  console.log("handleEdit", list.value, lists, lists.map(ele => ele.filesId));
  await setTypeFile({
    caseId: caseId.value,
    // filesId: lists.map(ele => ele.filesId),
    filesTypeId: childrenList.value.value,
    fileOptions: list.value,
    filesIds: lists.map(ele => ele.filesId)
  });
  getList();
};
const handleClick = (item, index) => {
  let childrenLists = list.value;
  let activeItem = childrenLists[index];
  if (!activeItem) {
    return;
  }
  childrenList.value.value = activeItem.filesTypeId;
  childrenList.value.item = activeItem;
  childrenList.value.caseFilesList = activeItem.caseFilesList ;
  // childrenList.value.list = list.value[val.index]
  //   ? list.value[val.index].childrenList
  //   : [];
  // childrenList.value.value = active.value;
  // active2.value = 0;
};

function pngTosvg(src) {
  if (!src) return
  return src.replace(".png", ".svg");
  
}
async function handleYr() {
  let uploadIds = await addCaseScenes({caseId: caseId.value, fileTypes: [0], formats: [".jpg",".png",".jpeg"] })//filesTypeId: childrenList.value.value,
  if(uploadIds == false || uploadIds && uploadIds.length == 0 ){
    return
  }
  await addByMediaLiBrary({
    caseId: caseId.value,
    uploadIds,
    filesTypeId: childrenList.value.value,
  });
  getList();
}
async function changeFile(response, uploadFile, uploadFiles) {
  console.log("changeFile", response, uploadFile, uploadFiles);
}
async function handleSuccess(response, uploadFile, uploadFiles) {
  console.log("handleSuccess", response, uploadFile, uploadFiles);
  await addByMediaLiBrary({
    caseId: caseId.value,
    uploadId: response.data.id,
    filesTypeId: childrenList.value.value,
  });
  getList()
}
async function handleItem(type, item) {
  console.log("handleItem", type, item);
  if (type == "edit") {
    await setTypeFile({
      ...item,
      caseId: caseId.value,
      fileOptions: list.value,
    });
  }
  getList();
}
</script>
<style scoped lang="scss">
.scene {
  height: 100%;
  display: flex;
  .scene-list {
    width: var(--leftwidth);
    height: 100%;
    overflow-x: scroll;
    .list {
      .listTitle {
        padding: 29px 48px 13px 48px;
        font-weight: bold;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
      }
        .ItemTitle {
          display: flex;
          align-items: center;
          padding: 20px 48px;
          font-weight: 400;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.85);
          line-height: 22px;
          .svg{
            margin-right: 10px;
            path {
              fill: #ff0000;
            }
          }
          &:hover{
            background: rgba(69,144,255,0.1);;
          }
        }
      .itemList {
      }
      .active {
        background: rgba(69, 144, 255, 0.1);
      }
    }
  }
  .abstractCentenr {
    background: #f5f5f5;
    height: 100%;
    width: 100%;
    padding: 32px;
    .centerTop {
      height: 148px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 32px;
      .upload {
        height: 100%;
        width: calc(100% - 170px);
      }
      .import {
        margin-right: 20px;
        padding-top: 40px;
        height: 100%;
        width: 148px;
        text-align: center;
        cursor: pointer;
        background: #fafafa;
      }
    }
  }
  .title0 {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
  }
  .demo-tabs {
    margin: 12px 0;
  }
}
</style>
