<template>
  <div style="width: 100%;height: 315px;">
    <lt-a-table
        :show-overflow-tooltip="true"
        ref="refTableQCItem"
        :searchBox="false"
        bordered
        :dataSource="MultiMats"
        :highlight-current-row="true"
        :showToolBar="false"
        :showEditInDialog="false"
        :stripe="true"
        :scroll="scroll"
        :columns="columns"
        :rowSelection="localSelectionData"
        :pagination="false"
        size="small"
        @row-click="handleClick"
        @row-dblclick="handleDblclick"
        @selection-change="handleSelChange"
        @header-click="handleHeadClick"
    >
      <template #headerCell="{ column }">
        <template v-if="column.dataIndex === 'operate' && showOperate == true">
          <span>
            <a-button type="text" title="新增" size="small" style=" color: dodgerblue;font-weight: bold;margin: 0px;"
              @click="handleAddMat">
              <template #icon>
                <i class="icon icon-plus "></i>
              </template>
            </a-button>
          </span>
        </template>
      </template>
      <template #bodyCell="{ record, column }">
        <template v-if="column.dataIndex === 'operate' && showOperate == true">
          <span>
            <a-button type="text" title="删除" size="small" style=" color: #ff4748;font-weight: bold;margin: 0px;"
              @click="handleDelMatItem(record)">
              <template #icon>
                <i class="icon icon-trash "></i>
              </template>
            </a-button>
          </span>
        </template>
      </template>
    </lt-a-table>
  </div>
</template>

<script setup lang="ts">
import { cloneDeep } from 'lodash-es';
import { ref, computed, PropType } from "vue"
import { formatShowCols } from "../../commonMethods/commonMethods"
import { ColStruct } from '@/components/lt-graph/src/hooks/type';

// import cols from "./cols.vue";

const props = defineProps({
  MultiMats: {
    type: Array,
    default() {
      return []
    },
  },
  showOperate: {
    type: Boolean,
    default: true,
  },
  QCItemCols: {
    type: Array as PropType<ColStruct[]>,
    default() {
      return [];
    },
  },
  rowSelection: {
    type: Object,
    default() {
      return null
    },
  },
  selectionData: {
    type: Array,
    default() {
      return []
    },
  },
  selectRowData: {
    type: Object,
    default() {
      return {}
    },
  },
  fullscreen: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(["row-dbclick", "update:selectionData", "update:selectRowData", "header-click", "addMatReplace", "delMatItem", "row-click"])


const columns = computed(() => {
  let cols = formatShowCols(props.QCItemCols)
  const operateCols = {
    title: '操作',
    dataIndex: 'operate',
    width: 60,
    resizable: true,
    align: "center",
    hideInSearch: true, //是否生成到最终的查询面板中
    defaultEditable: true,
    editable: false,
    Style: "operate",
  }
  if (props.showOperate) {
    //@ts-ignore
    cols.unshift(operateCols)
  }
  return cols
})
const localSelectionData = computed(() => {
  if (props.rowSelection == null) {
    return null
  } else {
    return {
      ...props.rowSelection,
      onChange: handleSelChange,
    }
  }
})
const scroll = computed(() => {
  let targetContent = $('#refTableQCItem')
  let height = 0
  if (targetContent.length > 0) {
    height = targetContent[0].clientHeight
  }
  if (!props.fullscreen) {
    //如果不是全屏的情况下，需要设置滚动条
    if (props.MultiMats.length > 15) {
      return {
        y: 425
      }
    } else {
      return undefined
    }
  } else {
    return {
      y: height - 30
    }
  }
})

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

const handleDblclick = function (rowIndex: number, dataIndex: number, row: any, event: any) {
  emits("row-dbclick", rowIndex, dataIndex, row, event);
  emits("update:selectRowData", row);
}
const handleSelChange = function (selectedRowKeys: any, selectedRows: any) {
  emits("update:selectionData", selectedRows);
}
const handleHeadClick = function (column: any, event: any) {
  emits("header-click", column);
}

const handleAddMat = function () {
  emits("addMatReplace", 1);
}

const handleDelMatItem = function (row: any) {
  emits("delMatItem", row);
}

</script>
