<template>
  <a-row :gutter="1">
    <a-col class="gutter-row" :span="leftWidth">
      <div class="layout">
        <ProjecList v-show="isShowProject" ref="refProjectList" @callback="callbackProject" />
        <ProjectTaskLeft
          v-show="!isShowProject"
          ref="refProjectTaskLeft"
          @clearFilter="clearFilter"
          @showProject="showProject"
          @fileCallback="fileCallback"
          @actCallback="actCallback"
          @searchByItemName="searchByItemName"
          @reloadData="reloadData"
        />
      </div>
    </a-col>
    <a-col class="gutter-row" :span="24 - leftWidth">
      <div class="layout">
        <ProjectReportDL
          ref="refProjectReportDL"
          @callback="callbackCheck"
          @setLeftWidth="setLeftWidth"
          @showProject="showProject"
          @setFileList="setFileList"
        />
        <ProjectCheckReportManage ref="refProjectCheckReportManage" />
      </div>
    </a-col>
  </a-row>
</template>
<script lang="ts" setup>
  import { ref, nextTick, onMounted } from 'vue';
  import { VXETable } from 'vxe-table';
  import ProjecList from './components/ProjecList.vue';
  import ProjectReportDL from './components/ProjectReportDL.vue';
  import ProjectTaskLeft from './components/ProjectTaskLeft.vue';
  import { defHttp } from '/@/utils/http/axios';
  import { getDictItemsByCode } from '/@/utils/dict/index';
  import ProjectCheckReportManage from './components/ProjectCheckReportManage.vue';

  const refProjectTaskLeft = ref();
  const showDrawer = ref(false);
  const refProjectList = ref();
  const refProjectReportDL = ref();
  const refProjectCheckReportManage = ref();
  const isShowProject = ref(true);
  const leftWidth = ref(24);
  const curProject = ref();
  const curCheck = ref();

  function iniData() {
    refProjectList.value.iniData(4);
  }

  const callbackProject = async (projectid) => {
    curProject.value = projectid;
    isShowProject.value = false;
    refProjectReportDL.value.iniData(projectid);
    leftWidth.value = 6;
  };

  const callbackCheck = async (check) => {
    showDrawer.value = true;
    curCheck.value = check;
    const tpOptions = await getDictItemsByCode('check_item_tp');

    nextTick();
    await refProjectCheckReportManage.value.iniData(check, curProject.value, tpOptions);
  };

  function setLeftWidth(isClose) {
    if (isClose) {
      leftWidth.value = 0;
    } else {
      leftWidth.value = 6;
    }
  }

  const showProject = async () => {
    isShowProject.value = true;
    leftWidth.value = 24;
  };

  const fileCallback = async (fileData) => {
    await refProjectReportDL.value.shwoFileData(fileData);
  };

  const actCallback = async (actData) => {
    await refProjectReportDL.value.shwoActData(actData);
  };

  const setFileList = async (fileList, actList) => {
    await nextTick(async () => {
      // if(fileList.length==0) {
      //     leftWidth.value = 0
      // } else {
      //     leftWidth.value = 6
      // }
      await refProjectTaskLeft.value.iniData(curProject.value, fileList, actList);
    });
  };

  const clearFilter = async () => {
    await refProjectReportDL.value.clearFilter();
  };

  const searchByItemName = async (row) => {
    await refProjectReportDL.value.searchByItemName(row.name);
  };

  const reloadData = async () => {
    await refProjectReportDL.value.clearFilter();
    await refProjectReportDL.value.iniData(curProject.value);
  };

  onMounted(async () => {
    await nextTick();
    iniData();
  });
</script>

<style scope>
  .layout {
    background: #fff;
    margin: 5px;
    overflow: hidden;
    height: 85vh;
  }
</style>
