
<template>
  <a-layout style="background-color:#F0F0F0;height:85vh">
    <a-layout-sider :width="tplListWidth" :style="{overflow: 'hidden',background:'#F0F0F0'}" v-show="showTplTable">
        <div style="height:85vh;padding: 5px;">
          <vxe-table
            keep-source
            ref="tableRef"
            show-overflow
            height="auto"
            :data="tableDatas"
            :show-radio="true"
            :row-config="{ isCurrent: true, isHover: true }"
            @current-change="currentChangeEvent"
            :columnConfig="{ resizable: true }"
            :scroll-y="{ enabled: true, gt: 50 }"
            :radio-config="{ labelField: 'name', highlight: true }"
          >
            <vxe-column type="seq" width="50" />
            <vxe-column field="nm" type="html" title="名称"/>
            <vxe-column field="code" type="html" title="编码"  width="25%"/>
            <vxe-column field="id" title="" :visible="false" />
          </vxe-table>
        </div>
      </a-layout-sider>
      <a-layout-content>
        <a-row :gutter="8">
            <a-col :span="24">
                <div style="height:80vh;padding: 5px;">
                  <RecordList  ref="refRecordList" @callback="callback" @hideTplList="hideTplList"></RecordList>
                </div>
            </a-col>
          </a-row>
      </a-layout-content>      
  </a-layout>
</template>

<script lang="ts" setup name="system-depart">
  import { nextTick, ref } from 'vue';
  import { queryAllTplForUser } from '../../alloc/BaosongTaskAlloc.api';
  import RecordList from './RecordList2.vue'


  const refRecordList = ref();
  const refRecordForm = ref();
  const tableDatas = ref([]);
  const selTask = ref({})
  const tableRef = ref()
  const refFillHistory = ref()
  const formWidth = ref(16)
  const showTplTable = ref(true)

  const curNode = ref()
  const curTpl = ref()
  const tplListWidth = ref(400)

  const emit = defineEmits(['callback']);

  async function setTplDatas(task) {
    tplListWidth.value = 400
    selTask.value = task;
    nextTick(async ()=>{
      tableDatas.value = await queryAllTplForUser(task)
    })
  }

  function currentChangeEvent({row }) {
    curTpl.value = row;
    //tplListWidth.value = 0;

    refRecordList.value.setData(selTask.value,row)
  }

  function saveBatch() {
    refRecordList.value.saveBatch()
  }

  async function callback(node) {
    curNode.value = node
    emit("callback",node)
    if(node.childNum==0){
      await refRecordForm.value.iniDataSingle(node,selTask.value)
      refRecordForm.value.setHistorySta(true,false)
      formWidth.value = 16
    } else {
      refRecordForm.value.setHistorySta(true,true)
      if(node.formTp=='table') {
        await refRecordForm.value.iniTableData(node,selTask.value)
      } else {
        await refRecordForm.value.iniData(node,selTask.value)
      }
      formWidth.value = 16
    }

  

  }

  function showTplList() {
    tplListWidth.value = tplListWidth.value>0?0:400
  }

  async function setHistoryWidth() {
    formWidth.value = formWidth.value==8?16:8
    if(formWidth.value ==8) {
      let tplid = curTpl.value.id
      let itempid = curNode.value.childNum==0?curNode.value.pid:curNode.value.id
      await refFillHistory.value.iniData(selTask.value,tplid,itempid)
    }
  }

  function hideTplList(isHide) {
    showTplTable.value = !showTplTable.value
  }


defineExpose({
  setTplDatas,
  saveBatch,
  showTplList,
});

</script>


<style scope>
  .layout {
    background: #fff;
    height: calc(90vh - 120px);
    margin: 0px 0px 0px 0px;
    overflow: hidden;
    min-height: 400px;
  }
  .ant-descriptions-item-label {
    width: 150px;
  }

</style>