<template>
  <div style="width: 100%;height: 315px;">
    <lt-a-table :show-overflow-tooltip="true" ref="refTableMat" :searchBox="false" size="small"
      style="border:0px;border-left-width:0px;" bordered :columnFilter="columnFilter" :showToolBar="false"
      :pagination="pagination" :dataSource="ErpBomDetails" :highlight-current-row="true" @row-dblclick="handleDblclick"
      @row-click="handleClick" :columns="columns" @size-change="handleSizeChnage" @page-change="handlePageChange"
      @selection-change="handleSelectionChange">
    </lt-a-table>
  </div>
</template>

<script setup lang="ts">

import { onBeforeMount, computed, getCurrentInstance, onMounted, PropType, ref, watch } from "vue"
import { formatShowCols } from "../commonMethods/commonMethods"
import { ColStruct } from "../../../hooks/type"

const currentInstance = getCurrentInstance()
const emits = defineEmits(["row-dbclick", "update:selectRowData", "update:selectionData", "row-click"])

const pagination = {
  pageSize: 10,
  hideOnSinglePage: true,
  simple: true,
  showQuickJumper: false,
  showSizeChanger: false
}

const props = defineProps({
  matFilter: {
    type: Array,
    default() {
      return [];
    },
  },
  ErpBomCols: {
    type: Array as PropType<ColStruct[]>,
    default() {
      return [];
    },
  },
  ErpBomDetails: {
    type: Array,
    default() {
      return [];
    },
  },
  showCheck: {
    type: Boolean,
    default: false
  }
})

const refTableMat = ref(null)

const columns = computed(() => {
  return formatShowCols(props.ErpBomCols)
})

// watch(() => props.ErpBomDetails, (value) => {
//   console.log("业务数据是111：" + JSON.stringify(value))
// })

const columnFilter = ["MaterialCode", "TechMaterialName"]

const handleDblclick = function (row: any, dataIndex: number, event: any) {
  emits("row-dbclick", row, dataIndex, event);
}
const handleClick = function (row: any, rowIndex: number, dataIndex: number, event: any, column: any) {
  emits("row-click", row, rowIndex, dataIndex, event, column);
  emits("update:selectRowData", row);
}
const handleSizeChnage = function (value: any) {
  if (refTableMat.value)
    //@ts-ignore
    refTableMat.value.reload()
}
const handlePageChange = function (value: any) {
  if (refTableMat.value)
    //@ts-ignore
    refTableMat.value.reload()
}
const _initCloumFilter = function () {
  $.extend(true, columnFilter, props.matFilter);
}
const handleSelectionChange = function (val: any) {
  emits("update:selectionData", val);
}
onBeforeMount(() => {
  _initCloumFilter();
})

onMounted(() => {
  props

})

</script>
