<template>
  <a-row :gutter="0">
    <a-col class="gutter-row" :span="leftWidth">
      <div class="layout">
        <ProjecList v-show="isShowProject" ref="refProjectList" @callback="callbackProject" />
        <ProjectTaskLeft
          v-show="!isShowProject"
          ref="refProjectTaskLeft"
          @searchByItemName="searchByItemName"
          @reloadData="reloadData"
          @clearFilter="clearFilter"
          @showProject="showProject"
          @fileCallback="fileCallback"
          @actCallback="actCallback"
        />
      </div>
    </a-col>
    <a-col class="gutter-row" :span="24 - leftWidth">
      <div class="layout">
        <ProjectReportList
          ref="refProjectCheckList"
          @callback="callbackCheck"
          @setLeftWidth="setLeftWidth"
          @showProject="showProject"
          @setFileList="setFileList"
        />
        <ProjectCheckReport ref="refProjectCheckReport" />
      </div>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
  import { ref, nextTick, onMounted } from 'vue';
  import ProjecList from './components/ProjecList.vue';
  import ProjectReportList from './components/ProjectReportList.vue';
  import ProjectCheckReport from './components/ProjectCheckReport.vue';
  import ProjectTaskLeft from './components/ProjectTaskLeft.vue';

  import { getDictItemsByCode } from '/@/utils/dict/index';

  const refProjectTaskLeft = ref();

  const showDrawer = ref(false);
  const refProjectList = ref();
  const refProjectCheckList = ref();
  const refProjectCheckReport = ref();
  const isShowProject = ref(true);
  const leftWidth = ref(24);
  const curProject = ref();
  const curCheck = ref();

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

  const callbackProject = async (project) => {
    curProject.value = project;
    isShowProject.value = false;
    await refProjectCheckList.value.iniData(project);
    leftWidth.value = 6;
  };

  const callbackCheck = async (check) => {
    showDrawer.value = true;
    curCheck.value = check;
    const tpOptions = await getDictItemsByCode('check_item_tp');
    nextTick();
    await refProjectCheckReport.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 refProjectCheckList.value.shwoFileData(fileData);
  };

  const actCallback = async (actData) => {
    await refProjectCheckList.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 refProjectCheckList.value.clearFilter();
  };

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

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

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

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