<template>
  <el-table :data="data" style="width: 100%" ref="tableRef">
    <el-table-column
      v-for="(column, index) in columns"
      :key="index"
      :prop="column.prop"
      :label="column.label"
      :width="column.width"
      :min-width="column.minWidth"
      :show-overflow-tooltip="column.showOverflowTooltip || false"
      :show-tooltip-when-overflow="column.showOverflowTooltip || false"
    >
      <template #header>
        <div v-if="column.headerSlotName" class="tableHeader">
          <slot :name="column.headerSlotName"></slot>
        </div>
        <div v-else class="tableHeader">
          {{ column.label }}
        </div>
      </template>
      <template #default="scope">
        <div
          v-if="!column.slotName"
          class="tableCell overflow-hidden text-ellipsis"
        >
          {{ scope.row[column.prop] }}
        </div>
        <div v-else>
          <slot :name="column.slotName" v-bind="scope.row"></slot>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { ElTable, ElTableColumn } from "element-plus";
import { ref } from "vue";
import { iTableColumn } from "./types";

const tableRef = ref<InstanceType<typeof ElTable>>();

withDefaults(
  defineProps<{
    columns: iTableColumn[];
    data: any[];
  }>(),
  {
    columns: () => [],
    data: () => [],
  }
);

const scrollTo = (...options: Parameters<typeof window.scrollTo>) => {
  const tableEl = tableRef.value?.$el as HTMLDivElement;
  const wrap = tableEl.querySelector(".el-scrollbar__wrap") as HTMLDivElement;
  wrap.scrollTo(...options);
};

defineExpose({
  getEl: () => tableRef.value?.$el as HTMLDivElement,
  tableRef,
  scrollTo: scrollTo,
});
</script>
<style lang="scss" scoped>
.tableHeader {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #353535;
}
.tableCell {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #606266;
}
</style>
