<!-- 这里单纯的配置表格就好了-->
<template>
  <div class="base-list-table w-full">
    <el-table
      :data="tableData"
      v-bind="tableConfig"
      ref="base-list-table"
      :cell-style="{ padding: 0 }"
      :header-cell-style="/** 重写表格样式 **/ {
        padding: '5px 0',
      }"
      row-key="id"
      :lazy="true"
      :load="loadSubClassFn"
      border>
      <!-- @cell-mouse-enter="(row, col, cell, event) => $emit('cell-mouse-enter', row, col, cell, event)"> -->
      <!-- @cell-mouse-leave="(row, col, cell, event) => $emit('cell-mouse-leave', row, col, cell, event)"> -->
      <!-- 表格头定义 -->
      <template v-for="(head, idx) in columnConfig">
        <!-- 索引列 -->
        <el-table-column
          :key="idx"
          v-if="head.type"
          :type="head.type"
          :label="head.label || head.name || ''"
          :header-align="head.align || 'center'"
          :align="head.align || 'center'"
          :width="head.width || 50"
          :index="
            head.type === 'index'
              ? (val) => {
                  return val + 1 + (page - 1) * size;
                }
              : null
          "
          v-bind="head.more"></el-table-column>
        <!-- 普通的表头 -->
        <el-table-column
          v-else
          :key="idx + 'else'"
          :label="head.label ? head.label : head.name"
          :prop="head.prop || null"
          :width="head.width || null"
          :min-width="head.minWidth || null"
          :fixed="head.fixed || null"
          :tooltip-effect="head.tooltipEffect || 'light'"
          filter-placement="top"
          :align="head.align || null"
          v-bind="head.more"
          :show-overflow-tooltip="head.showOverflowTooltip || !(head.prop === 'operations')">
          <!-- :show-overflow-tooltip="head.showOverflowTooltip || true" -->
          <!-- 子组件 -->
          <template v-if="head.prop" slot-scope="scope">
            <component
              v-if="head.subcomponent"
              :is="head.subcomponent"
              :key="idx + 'sub'"
              :inject-data="{ ...scope.row, head }"
              @emit-data="handleSubEmitData" />
            <!-- 直接展示数据或应用过滤器 -->
            <span v-else>{{ scope.row[head.prop] | commonFilter(head.filter) }}</span>
          </template>

          <!-- 多级表头 -->
          <template v-if="!head.prop && head.children">
            <TableHead
              v-for="(subhead, subindex) in head.children"
              :key="'subhead-' + idx + '-subindex-' + subindex"
              :opt="subhead" />
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import TableHead from "@/components/TableHead.vue";
// 1. 表格拖拽开启/关闭
// 2. 表格的样式'
// 3. more...

export default {
  name: "BaseListTable",
  components: { TableHead },
  filters: {
    commonFilter: (source, filterType = (a) => a) => {
      return filterType(source);
    },
  },
  props: {
    tableConfig: {
      type: Object,
      default: () => ({}),
    },
    columnConfig: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    refreshLayoutKey: {
      type: Number,
      default: 0,
    },
    page: {
      type: Number,
      default: 1,
    },
    size: {
      type: Number,
      default: 20,
    },
  },
  inject: ["urls"],
  data() {
    return {
      dataList: [],
    };
  },
  watch: {
    refreshLayoutKey(val) {
      this.$refs["base-list-table"].doLayout();
    },
  },
  methods: {
    handleSubEmitData(payload) {
      console.log("[component] BaseListTable handleSubEmitData(): ", payload);
      this.$emit("operate-event", payload);
    },
    loadSubClassFn(tree, treeNode, resolve) {
      this.$emit("load-sub", { tree, treeNode, resolve });
    },
  },
};
</script>

<style scoped></style>
