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

<script setup lang="tsx">
import { PropType } from "vue";
import { formatShowCols } from "../../../commonMethods/commonMethods";
import { ref, computed } from "vue"
import { ColStruct } from "../../../../../hooks/type";
import { useI18n } from "vue-i18n";
const { t } = useI18n()
const props = defineProps({
  cloumn: {
    type: Array as PropType<ColStruct[]>,
    default() {
      return [];
    },
  },
  data: {
    type: Array,
    default() {
      return [];
    },
  },
  ifOpetate: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['row-click', 'update:selectRowData', 'selectRowChange', 'update:tableData', 'del', 'delAll', 'add'])

const columnFilter = ref([])  //过滤列
const selectTypeAfterload = ref(2)  //刷新之后，选中哪一列
const tableData = ref([])
const selectRow = ref({})

const pagination = {
  pageSize: 20,
  hideOnSinglePage: true
}

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

  if (props.ifOpetate) {
    let operateColItem = {
      title: t("LongtecProCessDraw.operate"),
      align: 'center',
      dataIndex: "operate",
      width: 80,
      customRender: ({ record, rowIndex, column }: any) => {
        return getDelBtn(record)
      },
    }
    if (cols)
      //@ts-ignore
      cols.push(operateColItem)
  }

  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 handleClick = function (row: any, dataIndex: number, event: any) {
  //配方主表单击事件
  emits("row-click", row, dataIndex, event);
  emits(
    "update:selectRowData",
    row, dataIndex, event
  );
  selectRow.value = row;
}

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");
}
const haneleAdd = function () {
  emits("add", 1);
}


</script>
