<template>
  <div style="height:73vh">
    <vxe-toolbar  ref="toolbarRef" export print custom :refresh="{ queryMethod }">
      <template #buttons >
        <vxe-button @click="expandAllEvent">展开所有</vxe-button>
        <vxe-button @click="clearExpandEvent">关闭所有</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      border
      show-overflow
      keep-source
      height="auto"
      ref="tableRef"
      :columnConfig="{ resizable: true }"
      :row-config="{keyField: 'id'}"
      :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
      :tree-config="{transform: true, rowField: 'code', parentField: 'pcode'}"
      :checkbox-config="{highlight: true}"
      @checkbox-change="selectChangeEvent"
      @checkbox-all="selectAllEvent"
      :data="tableData">
      <vxe-column type="checkbox" width="50" fixed="left">
      </vxe-column>
      <vxe-column field="title" title="标题" width="50%" tree-node fixed="left">
      </vxe-column>
      <vxe-column field="code" title="编码">
      </vxe-column>
      <vxe-column field="fillUserName" title="填报人">
      </vxe-column>
      <vxe-column field="fillUser" title="填报人" :visible="false">
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script lang="ts" setup>
import { ref,nextTick } from 'vue'
import { VxeTableEvents } from 'vxe-table'
import { allTplItems } from '../../tpl/BaosongTplItem.api';
import { queryCurTaskAllocUser } from '../../alloc/BaosongTaskAlloc.api';

interface RowVO {
  id: number
  title: string
  tp: number
  pcode: string
  code: string
  childNum: number
  hasChild?: boolean
  fillUserName?:string
  fillUser?:string
}

const curTpl = ref()
const loading = ref(false)
const tableRef = ref()
const tableData = ref<RowVO>()

const itemUserNameMap= ref({})
const curSelUser= ref()

async function setData(tplData){
  loading.value =true
  curTpl.value = tplData
  tableData.value = await allTplItems({tplid:tplData.id});
  loading.value =false

  const $table = tableRef.value;

  nextTick(async ()=>{
    if(!tableData.value||!Array.isArray(tableData.value)){
      return ;
    }
    tableData.value.forEach((item)=>{
      if(itemUserNameMap.value[item.id]) {
        item['fillUserName'] = itemUserNameMap.value[item.id]
        $table.setCheckboxRow(item, true)
      } else {
        item['fillUserName'] = ""
        $table.setCheckboxRow(item, false)
      }
     
    })
  })

}


function getSelectIds() {
    let ids = [];
    const $table = tableRef.value;
    if ($table) {
      const selRecords = $table.getCheckboxRecords();
      selRecords.forEach(function (ele) {
        if(ele.childNum==0) {
          ids.push(ele.id);
        }
      });
    }
    return ids;
  }

  function getSelectDatas() {
    const $table = tableRef.value;
    const selRecords = $table?.getCheckboxRecords();
    return selRecords;
  }

  const selectChangeEvent: VxeTableEvents.CheckboxChange<RowVO> = ({ $table }) => {
    const records = $table.getCheckboxRecords()

    records.forEach(record => {
      $table.setTreeExpand(record, true)
    })

    return records;
  }

  function setSelUser(user) {
    curSelUser.value = user
    const $table = tableRef.value;
    const selRecords = $table?.getCheckboxRecords();
    selRecords.forEach((item)=>{
      item["fillUserName"] = user.realname
      item["fillUser"] = user.id
    })

  }

  const clearSelect = () => {
    const $table = tableRef.value
    if ($table) {
      $table.clearCheckboxRow()
    }
  }

  async function setCurTaskHaveAllocUser(task) {

    let retData = await queryCurTaskAllocUser(task);
    if(!retData||retData.length==0) return 
    retData.forEach((item)=>{
      itemUserNameMap.value[item.itemid] = item.realname
    }) 
  }


  const expandAllEvent = () => {
    const $table = tableRef.value
    if ($table) {
      $table.setAllTreeExpand(true)
    }
  }

  const clearExpandEvent = () => {
    const $table = tableRef.value
    if ($table) {
      $table.clearTreeExpand()
    }
  }

  
  
  const selectAllEvent: VxeTableEvents.CheckboxChange<RowVO> = ({ $table }) => {
    if ($table) {
      $table.setAllTreeExpand(true)
    }
  }




defineExpose({
  clearSelect,
  setData,
  setSelUser,
  getSelectDatas,
  getSelectIds,
  setCurTaskHaveAllocUser
});
</script>




