<template>
    <div class="q-px-md q-pt-lg column full-height" ref="currentRootDom">
      <div class="q-pl-lg row flex-between q-mb-lg">
        <div class="col">
          <div class="col row items-center q-pl-md">
            <h5 class="row items-center">
              <span
                class="pointer"
                @click="BackInquire"
                ><el-icon class="q-pt-md" v-if="queryObj.FileId > 0" size="20"
                  ><ArrowLeft /></el-icon
              ></span>
              <span class="q-pl-md"
              :class="[queryObj.FileId == 0?'':'row items-center']">
                <span class="pointer" @click="queryObj.FileId=0,refreshHandler()">
                  回收站
                </span>
                <breadPeeling v-if="queryObj.FileId" :navigations="Navigations" 
                @Inquire="breadPeelingInquire"></breadPeeling>
              </span>
            </h5>
            <div class="select-btn q-pl-lg pointer q-mt-sm">
              <el-icon>
                <RefreshRight
                  v-if="!RefreshLoading"
                  @click="() => refreshHandler()"
                />
                <Refresh v-else />
              </el-icon>
            </div>
          </div>
        </div>
        <div class="shrink q-px-lg" v-if="RecycleBinDatas.RecycleBinList&&RecycleBinDatas.RecycleBinList.length>0">
           <el-button @click="BatchDeletion">
            <el-icon><Delete /></el-icon>
            <span class="">批量删除</span>
          </el-button>
        </div>
        <div v-else style="height: 32px;"></div>
       
        <div>
            
        </div>
      </div>
      <div class="col full-width q-ml-md">
          <journeyAdsList 
          :current-menu="currentMenu" 
          :position="position"
          :set-file-list="datas.setFileList"
          :list="dataList"
          :msg="queryObj"
          :navigations="Navigations"
          :selected-datas="datas.selectedDatas"
          @UpdateData="UpdateData"
          @success="success"
          @refreshHandler="refreshHandler"></journeyAdsList>
      </div> 
    </div>
    
    
  </template>
  <script setup lang="ts">
  import { ref, reactive, watch, onMounted, PropType, inject } from "vue";
  import { ElMessage } from "element-plus";
  import { ArrowLeft } from "@element-plus/icons-vue";
  import FolderService from "@/services/FolderService";
  import { ApiResult } from "@/configs/axios";
  import journeyAdsList from "./components/journeyAdsList.vue";
  import breadPeeling from "./components/breadPeeling.vue";
  import { injectKeyRecycleBin } from "@/types/injectKey";
  
  const props = defineProps({
    currentMenu: {
      type: Number,
      default: 3,
    },
    position:{
      type:Object as PropType<{FileId:number,FileType:1|2,Position:{FileId:number,FileName:string}[]}|null>,
      default:null
    }
  });
  
  const isTreeFile = ref(false)
  const Navigations = ref([] as Array<any>);
  const dataList = ref([] as Array<any>);
  const RefreshLoading = ref(false)
  const currentRootDom = ref()
  const datas = reactive({
    selectedDatas: [] as Array,
    selectAll: false as any,
    fileList: [] as any,
    setFileList: [] as any,
  });
  const folderObj = ref<{
    id: number;
    name: string;
    parentId: number;
    type: number;
  }>({ id: -1, name: "", parentId: 0, number: 1 })
  const emit = defineEmits<{
    (event: 'destroy-position'): void,
    (event: 'BatchDeletion'): void,
  }>()
  const queryObj = reactive({
    pageIndex: 1,
    pageSize: 50,
    pageCount: 0, //总页数
    FileName: '',
    FileType: -1,
    IsDel: 1
  });
  
  const loading = ref(false as any);

  const RecycleBinDatas = ref({} as any);
  RecycleBinDatas.value = inject(injectKeyRecycleBin);
  
  const BatchDeletion = () =>{
    if(!RecycleBinDatas.value.RecycleBinList||RecycleBinDatas.value.RecycleBinList.length==0) return ElMessage.error({
        message:'请勾选需要永久删除的文件'
      })
    RecycleBinDatas.value.RecoveryManage = true
  }

  // 已选数据
  const UpdateData = (obj:any) =>{
    if(obj){
      if(obj.list) dataList.value = obj.list
      if(obj.selectedDatas) datas.selectedDatas = obj.selectedDatas
    }
  }
  
  const success = () => {
    isTreeFile.value = false;
    datas.selectedDatas = [];
    for (let index = 0; index < dataList.value.length; index++) {
      const element = dataList.value[index]
      element.singleChoice = false;
    }
    refreshHandler()
  }
  
  // 导航
  const BackInquire = () => {
    datas.selectedDatas = [];
    let  Navigation = Navigations.value[Navigations.value.length-2]
    if(Navigation&&Navigation.FileId){
      breadPeelingInquire(Navigation.FileId,Navigations.value.length-2)
    }else breadPeelingInquire(0,0)
  }
  
  const breadPeelingInquire = (FileId:number,index:number)=> {
    datas.selectedDatas = [];
    Navigations.value.splice(index+1, Navigations.value.length-1)
    queryObj.FileId = FileId
    refreshHandler()
  }
  
  const querySearchHandler = async () => {
    if(loading.value) return
    loading.value = true;
    try {
      if (queryObj.pageIndex == 1) dataList.value = [];
      let pageRes = await FolderService.GetMyTripFolderPage(queryObj);
      if (pageRes.data.resultCode == ApiResult.SUCCESS) {
        let arrList = function (list) {
          list.forEach((x) => {
            x.show = false;
            x.singleChoice = false;
            x.Id = ''
            x.showSelect = false
          });
        };
        arrList(pageRes.data.data.pageData);
        datas.selectedDatas = Array.from(new Set(datas.selectedDatas))
        dataList.value = dataList.value.concat(pageRes.data.data.pageData);
        queryObj.pageCount = pageRes.data.data.pageCount;
      }
      loading.value = false;
      RefreshLoading.value = false;
    } catch (error) {
      ElMessage.error({
        message:'数据加载异常，请刷新页面'
      })
      loading.value = false;
      RefreshLoading.value = false;
    }
  };
  const refreshHandler = (obj:any) => {
    currentRootDom.value.click()
    if(obj){
      if(obj.FileId) {
        queryObj.FileId = obj.FileId
        datas.selectedDatas = []
      }
      if(obj.OrderByType) queryObj.OrderByType = obj.OrderByType
      if(obj.FileName==''||obj.FileName) queryObj.FileName = obj.FileName
      if(obj.Navigations) Navigations.value = obj.Navigations
    }
    RefreshLoading.value = true;
    queryObj.pageIndex = obj&&obj.pageIndex?obj.pageIndex:1;
    querySearchHandler();
  };
  const checkPositionHandler = (n:any)=>{
    if(n){
      if(n.Position && n.Position.length>0){
        Navigations.value=n.Position
        queryObj.FileId = n.Position[n.Position.length-1].FileId
        queryObj.FileType = 0
      }else{
        Navigations.value=[]
        queryObj.FileId = 0
        queryObj.FileType = n.FileType
      }
      emit('destroy-position')
    }
  }
  
  watch(() => queryObj.FileId,(n, o) => {
      if(!n) Navigations.value = []
    }
  );
  watch(() => props.position,(n,o)=>{
    if(n){
      checkPositionHandler(n)
      refreshHandler()
    }
  },{
    deep:true
  })
  
  onMounted(() => {});
  checkPositionHandler(props.position)
  querySearchHandler();
  
  </script>
  <style lang="scss" scoped>
  .journeyAdsScrollbar {
      ::v-deep(.el-table__inner-wrapper::before){
        width: 0px;
        height: 0px;
      }
  }
  ::v-deep(.el-scrollbar__view){
      height: 100%;
  }
  </style>
  