<template>
  <div style="height:73vh">
    <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"
      :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-table>
  </div>
</template>

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

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

}

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

async function setData(tplData){
  loading.value =true
  curTpl.value = tplData
  tableData.value = await allTplItems({tplid:tplData.id});
  loading.value =false
}
function getSelectIds() {
    let ids = [];
    const $table = tableRef.value;
    if ($table) {
      const selRecords = $table.getCheckboxRecords();
      selRecords.forEach(function (ele) {
        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()
    return records;
  }

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




