<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" @showProject="showProject" 
        @fileCallback="fileCallback"
        @clearFilter = "clearFilter"
        @searchByItemName="searchByItemName"  
        @reloadData = "reloadData"
        @actCallback="actCallback"/>
      </div>
    </a-col>
    <a-col class="gutter-row" :span="24-leftWidth">
      <div class="layout">
        <ProjecCheckAssignList ref="refProjectCheckAssginList"  @setLeftWidth="setLeftWidth" @setFileList="setFileList" @showProject="showProject">
        </ProjecCheckAssignList>
    </div>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
  import { ref, nextTick, onMounted  } from 'vue';
  import ProjecList from './components/ProjecList.vue';
  import ProjectTaskLeft from './components/ProjectTaskLeft.vue';
  import ProjecCheckAssignList from './components/ProjecCheckAssignList.vue';
 
  const refProjectList = ref();
  const refProjectCheckAssginList = ref();
  const refProjectTaskLeft = ref()

  const leftWidth = ref(24)
  const curProject = ref()
  const isShowProject = ref(true)

  function iniData(){
    refProjectList.value.iniData(2)
  }

  async function callbackProject(project) {
    leftWidth.value = 6
    curProject.value = project
    isShowProject.value = false
    await refProjectCheckAssginList.value.iniData(project)
  }
  function setLeftWidth(isClose) {
    if(isClose) {
      leftWidth.value = 0
    } else {
      leftWidth.value = 6
    }
  }
  onMounted(async () => {  
      await nextTick(); 
      iniData(); 
  });


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

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

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

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

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

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

  const reloadData = async () => {  
    await refProjectCheckAssginList.value.clearFilter();  
    await refProjectCheckAssginList.value.iniData(curProject.value);  
   
};
</script>

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

