<template>
  <a-layout style="height: 100%">
    <a-layout-content style="padding: 0px; border: 1px solid #d1dbe5">
      <lt-a-table :stripe="true" :show-overflow-tooltip="true" ref="refTable" :searchBox="false"
        style="border: 0px; border-left-width: 0px" :columnFilter="columnFilter" bordered :dataSource="data"
        :highlight-current-row="true" :selectTypeAfterload="selectTypeAfterload" @row-dblclick="handleDblclick"
        @row-click="handleClick" @selection-change="handleSelectionChange" :showEditInDialog="false"
        :showToolBar="false" :pagination="false" :columns="columns" size="small" @loadSuccess="loadSuccess">
        <!-- <cols @del="handleDel" @delAll="handleDelAll" :innerColumns="Innercloumn"></cols> -->
      </lt-a-table>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
import { ref, onBeforeMount, getCurrentInstance, computed, nextTick, PropType } from "vue"
import { formatCols } from "../../../commonMethods/commonMethods";
import type { ColStruct } from "../../../../../hooks/type"
const currentInstance = getCurrentInstance()
const emits = defineEmits(["row-dblclick", "row-click", "update:selectRowData", "selectRowChange", "update:selectionData", "del", "delAll", 'update:tableData'])

const props = defineProps({
  cloumn: {
    type: Array as PropType<ColStruct[]>,
    default() {
      return [];
    },
  },
  filter: {
    type: Array,
    default() {
      return [];
    },
  },
  data: {
    type: Array,
    default() {
      return [];
    },
  },
  fullscreen: {
    type: Boolean,
    default: false
  }
})

let columnFilter = ref([]) //过滤列
let selectTypeAfterload = ref(2)  //刷新之后，选中哪一列
let tableData = ref([])
let selectRow = ref({})
let Innercloumn = ref([]) //内部显示列

const columns = computed(() => {
  const cols = formatCols(props.cloumn)
  return cols
})



const handleDblclick = function (row: any, dataIndex: number, event: any) {
  //配方主表双击事件
  emits("row-dblclick", row, dataIndex, event);
}
const handleClick = function (row: any, event: any, column: any) {
  //配方主表单击事件
  emits("row-click", row);
  emits("update:selectRowData", row);
  selectRow.value = row;
}
const handleSelectionChange = function (val: any) {
  emits("update:selectionData", val);
}
const handlePageChange = function (val: any) {
  selectTypeAfterload.value = 2;
}
const loadSuccess = function (data: any, index: number) {
  if (index == -1) {
    emits("update:selectRowData", data[0]);
    emits("selectRowChange", data[0]);
    selectRow.value = data[0];
  } else {
    emits("update:selectRowData", data[index]);
    emits("selectRowChange", data[index]);
    selectRow.value = data[index];
  }
  tableData.value = data;
  if (tableData.value.length < 1) {
    emits("update:selectRowData", null);
    emits("selectRowChange", null);
  }
  emits("update:tableData", data);
}
const reload = function (type: number) {
  if (type) {
    selectTypeAfterload.value = type;
  }
  //@ts-ignore
  currentInstance.refs.refTable.reload()
}
const _initCloumFilter = function () {
  $.extend(true, Innercloumn.value, props.cloumn);
}

const handleDel = function (row: any) {
  emits("del", row, "main");
}
const handleDelAll = function (row: any) {
  emits("delAll", row, "main");
}

onBeforeMount(() => {
  _initCloumFilter()
})

</script>
