<template>
  <div class="slide">
    <!-- <el-menu
      :default-active="(router.currentRoute.value.name as string)"
      @select="(name: string) => router.push({ name })"
    >
      <sub-menu
        :meta="route.meta"
        :name="route.name"
        v-for="route in routes"
        :key="route.name"
      />
    </el-menu> -->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane
        v-for="(item,index) in routes"
        :label="item.meta.title"
        v-show="true"
        :name="item.name"
        :key="item.name"
      />
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from "vue";
import subMenu from "./submenu.vue";
import { getPermissionRoutes } from "@/store/permission";
import { router } from "@/router";
import { recursiveSearch } from "@/util/index.ts";
import { updateByTreeFileLists, show, getCaseList, getCasePhotoRollList } from "@/store/case";

const props = defineProps<{ names: string[] }>();
const activeName = ref(router.currentRoute.value.name || "scene");
const check = ref(false);
const routes = ref([]);
routes.value = getPermissionRoutes(show.value?['abstract']:props.names);
const caseId = computed(() => (router.currentRoute.value?.params?.caseId));
activeName.value = router.currentRoute.value.name as string;
const handleClick = (name) => {
  console.log(name, "tab", router);
  router.push({ name });
};
function getList() {
  updateByTreeFileLists(caseId.value).then(async res => {
  console.log("tab", show.value);
    console.log('recursiveSearch', routes.value, props.names)
    let homeList = await getCaseList({caseId: caseId.value, type: 'scene'})
    let diversityList = await getCaseList({caseId: caseId.value, type: 'fusion'})
    let casePhotoList = await getCasePhotoRollList(caseId.value) || []
    let showList = ['scene','diversity', 'originalPhoto','photos', 'sceneimg', 'dossier']
    let showObj = {
      'scene': homeList.length > 0,
      'diversity': diversityList.length > 0,
      'originalPhoto': recursiveSearch(res.find(ele => ele.filesTypeName == '原始照片').childrenList),
      'photos': recursiveSearch(res.find(ele => ele.filesTypeName == '痕迹物证').childrenList),
      'sceneimg': recursiveSearch(res.find(ele => ele.filesTypeName == '三录材料').childrenList) || casePhotoList.length,
      'dossier': recursiveSearch(res.find(ele => ele.filesTypeName == '案件卷宗').childrenList),
    }
    console.log('recursiveSearch', showObj)
    routes.value = getPermissionRoutes(props.names.filter(ele => showList.includes(ele)?showObj[ele]:true));
    console.log('recursiveSearch', props.names.filter(ele => showList.includes(ele)?showObj[ele]:true))
  })
}
watch(() => show.value,(newPath) => { 
  newPath && getList()
 },{ immediate: true });
</script>

<style lang="scss">
.slide {
  padding: 0 26px;
  background: #ffffff;
  .el-tabs__header {
    // margin: 0 0 24px;
    margin: 0;
  }
  .el-tabs__nav-next,
  .el-tabs__nav-prev {
    line-height: 50px;
  }
  .el-tabs__item {
    font-size: 16px;
    line-height: 88px;
    height: 88px;
  }
}
</style>
