
<template>
  <a-layout style="background-color:#F0F0F0;">
    <a-layout-sider :width="tplListWidth" :style="{overflow: 'hidden',background:'#F0F0F0'}">
        <div style="height:100%;padding: 5px;">
          <vxe-table
            keep-source
            ref="tableRef"
            show-overflow
            height="auto"
            max-height="800"
            :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"  style="height: calc(100vh - 100px);">
            <a-col :span="8" style="height:100%">
                <div style="height:100%;padding: 5px 0px 5px 0;">
                  <RecordList  ref="refRecordList" @callback="callback" style="height: 100%;"></RecordList>
                </div>
            </a-col>
            <a-col :span="formWidth">
              <div style="height:100%;padding: 5px 0px 5px 0;" >
                <RecordForm  ref="refRecordForm" @showTplList="showTplList" @setHistoryWidth="setHistoryWidth"  v-show="isShowRecordForm"></RecordForm>
              </div>
            </a-col>

            <a-col :span="16-formWidth">
              <div style="height:100%;padding: 5px 0px 5px 0;">
                <FillHistory  ref="refFillHistory" @callback="callbackHistory"></FillHistory>
              </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 './RecordList.vue'
  import RecordForm from './RecordForm.vue'
  import FillHistory from './FillHistory.vue'

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

  const isShowRecordForm = ref(false)

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

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

  async function setTplDatas(task) {
    tplListWidth.value = 400
    selTask.value = task;
    refRecordList.value.clearData();

    isShowRecordForm.value = false

    await refRecordForm.value.clearData();

    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)
    isShowRecordForm.value = true
    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
    }

  }


  async function callbackHistory(hisData) {
    refRecordForm.value.copyHistoryValue(hisData)
  
  }

  

  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)
    }
  }

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>