<template>
    <div class="q-px-md q-pt-lg column full-height" ref="currentRootDom">
      <div class="q-pl-lg row q-mb-lg">
        <div class="col row items-center q-pl-md">
          <h5 class="row items-center">
            <span class="q-pl-md">
              <span class="pointer">最近</span>
            </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="col full-width q-ml-md">
          <journeyAdsList 
          :current-menu="currentMenu" 
          :set-file-list="datas.setFileList"
          :position="position"
          :list="dataList"
          :msg="queryObj"
          :navigations="Navigations"
          @success="success"
          @refreshHandler="refreshHandler"></journeyAdsList>
      </div> 
    </div>
  
  </template>
  <script setup lang="ts">
  import { ApiResult } from '@/configs/axios';
  import { ref, reactive, inject, onMounted } from "vue";
  import { ElMessage } from "element-plus";
  import ConfigService from "@/services/ConfigService";
  import { injectKeyTemplate } from "@/types/injectKey";
  import journeyAdsList from "./components/journeyAdsList.vue";
  
  
  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 dataList = ref([] as Array<any>);
  const searchData = ref({} as any);
  searchData.value = inject(injectKeyTemplate)
  const RefreshLoading = ref(false)
  const currentRootDom = ref()
  const datas = reactive({
    selectedDatas: [] as any[],
    selectAll: false as any,
    setFileList: [] as any,
  });
  
  const queryObj = reactive({
    pageIndex: 1,
    pageSize: 50,
    pageCount: 0, //总页数
    FileType: 0,
    OrderByType: 2,//1 升序 2倒序
  })
  const loading = ref(false as any)
  const Navigations = ref([] as Array<any>);

  const success = () => {
    datas.selectAll = false;
    datas.selectedDatas = [];
    refreshHandler()
  }

  // 移动到文件夹
  const MoveFile = (item:any) => {
    datas.setFileList = []
    for(let i=0;i<dataList.value.length;i++){
      for(let j=0;j<datas.selectedDatas.length;j++){
        if(dataList.value[i].FileId==datas.selectedDatas[j]){
          datas.setFileList.push(
            {
              FileId: dataList.value[i].FileId,
              FileType: dataList.value[i].FileType,
              ParentFileId: dataList.value[i].ParentFileId
            }
          )
        }
      }
    }
    isTreeFile.value = true
  }
  
  const querySearchHandler = async () => {
    loading.value = true;
    try {
      if (queryObj.pageIndex == 1) dataList.value = [];
      let pageRes = await ConfigService.GetTripBrowsePage(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
      }
      if(obj.OrderByType) queryObj.OrderByType = obj.OrderByType
      if(obj.FileName==''||obj.FileName) queryObj.FileName = obj.FileName
    }
    RefreshLoading.value = true;
    queryObj.pageIndex = obj&&obj.pageIndex?obj.pageIndex:1;
    querySearchHandler();
  };

  onMounted(() => {});
  
  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>
  