<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"
        :showToolBar="false"
        :showEditInDialog="false"
        :highlight-current-row="true"
        :pagination="false"
        :selectTypeAfterload="selectTypeAfterload"
        @row-dblclick="handleDblclick"
        :columns="columns"
        size="small"
        @row-click="handleClick"
        @selection-change="handleSelectionChange"
        @loadSuccess="loadSuccess"
      >
        <template #headerCell="{ column }">
          <template v-if="column.dataIndex === 'operate'">
            <a-button
              type="text"
              :title="$t('LongtecProCessDraw.deleteAll')"
              size="small"
              style="height: 24px; color: dodgerblue; font-weight: bold"
              @click="handleDelAll"
            >
              <template #icon>
                <i class="icon icon-trash"></i>
              </template>
            </a-button>
          </template>
        </template>
      </lt-a-table>
    </a-layout-content>
  </a-layout>
</template>

<script setup lang="tsx">
import {
  ref,
  onBeforeMount,
  getCurrentInstance,
  computed,
  PropType,
} from "vue";
import { formatShowCols } from "../../../commonMethods/commonMethods";
import { ColStruct } from "../../../../../hooks/type";
import { useI18n } from "vue-i18n";
import { cloneDeep } from "lodash-es";
const { t } = useI18n();

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,
  },
});

const emits = defineEmits([
  "row-dblclick",
  "update:selectRowData",
  "update:selectionData",
  "selectRowChange",
  "del",
  "delAll",
  "update:tableData",
  "row-click",
]);
const columnFilter = ref([]); //过滤列
const selectTypeAfterload = ref(1); //刷新之后，选中哪一列
const dataNam = ref("Params");
let tableData = ref([]);
let selectRow = ref({});
let Innercloumn = ref([] as ColStruct[]); //内部显示列
const currentInstance = getCurrentInstance();

const columns = computed(() => {
  let cols = formatShowCols(props.cloumn);

  let operateColsItem = {
    title: "操作",
    align: "center",
    dataIndex: "operate",
    width: 80,
    customRender: ({ record, rowIndex, column }: any) => {
      return getDelBtn(record);
    },
  };
  if (cols)
    //@ts-ignore
    cols.push(operateColsItem);
  return cols;
});

const getDelBtn = function (record: any) {
  return (
    <a-button
      type="text"
      title={t("LongtecProCessDraw.delete")}
      size="small"
      style="height: 24px; color: dodgerblue;font-weight: bold;"
      onClick={() => {
        handleDel(record);
      }}
    >
      <i class="icon icon-trash"></i>
    </a-button>
  );
};

const handleDblclick = function (row: any, dataIndex: number, event: any) {
  //配方主表双击事件
  emits("row-dblclick", row);
};
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 _initCloum = function () {
  Innercloumn.value = cloneDeep(props.cloumn);
};

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

onBeforeMount(() => {
  _initCloum();
});
</script>
