<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"
        :dataSource="props.data"
        bordered
        :highlight-current-row="true"
        :selectTypeAfterload="selectTypeAfterload"
        :showEditInDialog="false"
        :showToolBar="false"
        size="small"
        :columns="columns"
        @row-click="handleClick"
        @row-dblclick="handleDblclick"
      >
      </lt-a-table>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="ts">
import { ColStruct } from "@/components/lt-graph/src/hooks/type";
import { formatCols } from "../../../commonMethods/commonMethods";
import { ref, computed, PropType } from "vue";
const emits = defineEmits([
  "row-click",
  "update:selectRowData",
  "row-dblclick",
  "selectRowChange",
  "update:selectRowData",
  "update:tableData",
  "del",
  "delAll",
]);
const props = defineProps({
  cloumn: {
    type: Array as PropType<ColStruct[]>,
    default() {
      return [];
    },
  },
  data: {
    type: Array,
    default() {
      return [];
    },
  },
});

let selectTypeAfterload = ref(2); //刷新之后，选中哪一列
let tableData = ref([]);
let selectRow = ref({});

const columns = computed(() => {
  debugger;
  let cols = formatCols(props.cloumn);
  // let operateColItem = {
  //   title: '操作',
  //   align: 'center',
  //   dataIndex: 'status',
  //   customCell: ({ record, rowIndex, column }) => (
  //     <Button type="text" title="删除" size="small" style="height: 24px; color: dodgerblue;font-weight: bold;" click={handleDel(record)}>
  //       <template name='icon'>
  //         <i class="icon icon-trash"></i>
  //       </template>
  //     </Button >
  //   ),
  //   customHeaderCell: ({ column }) => (
  //     <Button type="text" title="删除所有" size="small" style="height: 24px; color: dodgerblue;font-weight: bold;" click={handleDelAll}>
  //       <template name='icon'>
  //         <i class="icon icon-trash"></i>
  //       </template>
  //     </Button >
  //   ),
  // }
  // cols.push(operateColItem)
  return cols;
});

const handleClick = function (record: any, index: number, event: any) {
  //配方主表单击事件
  emits("row-click", record, index, event);
  emits("update:selectRowData", record, index, event);
  selectRow.value = record;
};
const handleDblclick = function (
  rowIndex: number,
  dataIndex: number,
  row: any,
  event: any,
) {
  //配方主表双击事件
  emits("row-dblclick", rowIndex, dataIndex, row, event);
};

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 handleDel = function (row: any) {
  emits("del", row, "detail");
};
const handleDelAll = function () {
  emits("delAll", "detail");
};
</script>
