<template>
  <div class="scene">
    <el-button class="w-full" @click="handleAdd">上传</el-button>
    <!-- <el-button class="w-full my-4"  style="margin-left: 0; margin-right: 0">添加场景</el-button> -->
    <div class="scene-list">
      <div class="scene-title flex justify-between content-center pt-4" style="line-height: 14px">
        <span class="title0 mb-0">全部照片</span>
        <!-- <span  @click="settype = !settype">{{settype?'完成':'修改分类'}}</span> -->
      </div>
      <div class="list">
        <div
          class="listItem py-2"
          v-for="item,index in list"
          :key="index"
        >
          <div class="title1 pb-2">{{item.filesTypeName}}</div>
          <div class="list2" v-for="item2,index2 in item.childrenList" :key="index2" v-show="item2.caseFilesList?.length">
          <div class="title2">{{item2.filesTypeName}}</div>
          <viewImg :list="item2.caseFilesList || []" width="calc(50% - 18px)" height="100px" @handleItem="handleItem" />
          <!-- <div class="item2 inline-block relative" v-for="(item2, index) in srcList" :key="index">
            <el-icon :size="20" class="absolute z-1 cursor-pointer" style="right: -0px; top: -8px">
              <CircleCloseFilled v-if="!settype" />
              <EditPen v-else />
            </el-icon>
            <el-image class="z-0 relative" preview-teleported :preview-src-list="srcList" :initial-index="index" style="width: 80px; height: 80px;margin-right: 10px" :src="item2" :fit="fit" />
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import viewImg from "@/components/viewImg/index.vue"
import { computed, ref } from "vue";
import { updateByTreeFileLists, getByTreeFileLists } from "@/store/case";
import { router } from "@/router";
import { addCaseFile, setTypeFile } from "./quisk";
const caseId = computed(() => (router.currentRoute.value?.params?.caseId));
const active = ref(true);
const settype = ref(false);
const showModal = ref(false);
const srcList = ["https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg","https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"]
const list = ref([]);
getList()
function handleActive(params) {
  console.log("handleActive", params);
}
function getList() {
  updateByTreeFileLists(caseId.value).then(res => {
    list.value = res.find(ele => ele.filesTypeName == '原始照片')?.childrenList || [];
  })
}
async function handleAdd() {
  await addCaseFile({ caseId: caseId.value, filesTypeName: ['原始照片'] });
  getList();
}
async function handleItem(type, item) {
  console.log("handleItem", type, item);
  if(type == 'edit'){
    await setTypeFile({
      ...item,caseId:caseId.value
    })
  }
  getList();
}
</script>
<style scoped lang="scss">
.scene{
  height: 100%;
  overflow-x: scroll;
  .scene-list{
    // height: 100%;
  }
  .title0{
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 16px;
    color: rgba(0,0,0,0.85);
    line-height: 22px;
  }
}
</style>
