<template>
  <el-table
    ref="ipuTable"
    class="g-table"
    :data="tableData"
    :header-cell-style="headerCellStyle"
    :cell-style="cellStyle"
    v-bind="tableAttrs"
    @current-change="handleCurrentRowChange"
    @selection-change="handleSelectionChange"
  >
    <template #empty>
      <el-empty description="暂无数据"></el-empty>
    </template>
    <el-table-column
      v-if="isCheck"
      type="selection"
      width="55"
    ></el-table-column>
    <template v-for="header in tableHeader" :key="header?.name">
      <!-- 自自定义按钮 -->
      <el-table-column
        v-if="header?.type === 'selection'"
        type="selection"
        width="55"
      ></el-table-column>
      <el-table-column
        v-else-if="header?.type"
        :prop="header?.name"
        :label="header?.label"
        :width="header?.width"
        :min-width="header?.minWidth"
        :sortable="header?.sortable || false"
        :fixed="header?.fixed || false"
        :align="header?.position || 'left'"
      >
        <template #default="scope">
          <!-- <component :is="header.component" :value="scope.row"></component> -->
          <!-- 自定义按钮  -->
          <table-column
            :header="header"
            :row="scope.row"
            :is-disable="isDisable"
            @change-event="changeEvent"
            @blur-event="blurEvent"
            @svgEvent="svgEvent"
          ></table-column>
          <!-- 按钮 -->
          <slot :name="header.name" :row="scope.row"></slot>
        </template>
      </el-table-column>
      <!-- 普通样式 -->
      <el-table-column
        v-else
        :prop="header?.name"
        show-overflow-tooltip
        :label="header?.label"
        :width="header?.width"
        :min-width="header?.minWidth"
        :sortable="header?.sortable || false"
        :align="header?.position || 'left'"
        :fixed="header?.fixed || false"
      >
        <template #default="scope">
          {{
            scope.row[header?.name] || scope.row[header?.name] === 0
              ? scope.row[header?.name]
              : '-'
          }}
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script setup>
import { ref } from 'vue';
import TableColumn from './TableColumn.vue';

defineProps({
  tableHeader: {
    type: Array,
    default: () => []
  },
  tableData: {
    type: Array,
    default: () => []
  },
  tableAttrs: {
    type: Object,
    default: () => {}
  },
  isCheck: {
    type: Boolean,
    default: () => false
  },
  isDisable: {
    type: Boolean,
    default: true
  }
});
const emits = defineEmits([
  'changeEvent',
  'blurEvent',
  'handleCurrentRowChange',
  'svgEvent',
  'handleSelectionChange'
]);
const cellStyle = ref({
  padding: '0 2px',
  height: '60px',
  'line-height': '60px',
  'font-size': '14px'
});
const headerCellStyle = ref({
  padding: '0 2px',
  height: '39px',
  'font-weight': '600',
  'font-size': '14px',
  'line-height': '39px',
  color: '#000',
  'background-color': '#fafafa'
});
const changeEvent = (form) => {
  emits('changeEvent', form);
};

// 触发blur事件
const blurEvent = (form) => {
  emits('blurEvent', form);
};
const ipuTable = ref(null);
// 选中当前行
function handleCurrentRowChange(row) {
  // console.log(row)
  emits('handleCurrentRowChange', row);
}

function handleSelectionChange(row) {
  emits('handleSelectionChange', row);
}

function svgEvent(row) {
  emits('svgEvent', row);
}

function setCurrent(rows) {
  if (rows) {
    rows.forEach((row) => {
      ipuTable.value?.toggleRowSelection(row);
    });
  }
}

function setSingleCurrent(row) {
  if (row) {
    setTimeout(() => {
      ipuTable.value?.setCurrentRow(row);
    }, 10);
  }
}
// 反选

defineExpose({
  ipuTable,
  setCurrent,
  setSingleCurrent
});
</script>

<style scoped lang="scss">
:deep(.el-table__inner-wrapper) {
  font-size: 14px;
  .el-table__header-wrapper {
    font-size: 14px;
    thead tr {
      font-size: 14px;
    }
  }
}
.el-table {
  width: 100%;
}
// 消除table横向滚动条
// :deep(.is-horizontal){
//   .el-scrollbar__thumb{
//     display: none;
//   }
// }
:deep(.el-tooltip) {
  display: flex;
}
:deep(.current-row) {
  position: relative;
  background: rgba(25, 130, 255, 0.04);
  &:after {
    content: '';
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    background: #2d98ff;
    z-index: 1000;
  }
}
</style>