<template>
  <el-table
    size="small"
    :data="tableData"
    :row-key="handleRowKeyMethod"
    :span-method="handleSpanMethod"
    :toggleRowSelection="toggleRowSelection"
    @selection-change="handleSelectionChange"
    @sort-change="handleSortChange"
    @row-click="handleRowClick"
    @cell-click="handleCellClick"
    :row-class-name="tableRowClassName"
    :empty-text="emptytxt ? emptytxt : emptyText"
    border
    :height="height"
    style="width: 100%"
    ref="selectTable"
  >
    <template v-for="column in columns">
      <el-table-column
        v-if="column.show"
        :key="column.prop"
        :type="column.type"
        :index="handleIndexMethod"
        :selectable="handleSelectableMethod"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :sortable="column.sortable"
        :show-overflow-tooltip="column.tooltip"
        :align="column.align || 'center'"
        :formatter="column.formatter"
        :reserve-selection="column.reserveSelection"
        :subColumns="column.subColumns"
        :fixed="column.fixed"
      >
        <el-table-column
          v-for="sunColumn in column.subColumns"
          :key="sunColumn.prop"
          :type="sunColumn.type"
          :prop="sunColumn.prop"
          :label="sunColumn.label"
          :width="sunColumn.width"
          :sortable="sunColumn.sortable"
          :align="sunColumn.align || 'center'"
          :formatter="sunColumn.formatter"
        />
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  props: {
    handleRowKeyMethod: {
      type: Function,
      required: false,
      default: (row) => {
        return row.id;
      },
    },
    handleSelectableMethod: {
      type: Function,
      required: false,
      default: () => {},
    },
    handleIndexMethod: {
      type: Function,
      required: false,
      default: () => {},
    },
    handleSpanMethod: {
      type: Function,
      required: false,
      default: () => {},
    },
    handleSelectionChange: {
      type: Function,
      required: false,
      default: () => {},
    },
    handleRowClick: {
      type: Function,
      required: false,
      default: () => {},
    },
    handleCellClick: {
      type: Function,
      required: false,
      default: () => {},
    },
    handleSortChange: {
      type: Function,
      required: false,
      default: () => {},
    },
    // tableRowClassName: {
    //   type: Function,
    //   required: false,
    //   default: () => {},
    // },
    loading: {
      type: Boolean,
      required: false,
      default: true,
    },
    tableData: {
      type: Array,
      required: false,
      default: () => [],
    },
    columns: {
      type: Array,
      required: false,
      default: () => [],
    },
  },
  computed: {
    emptyText() {
      return !this.loading && !this.tableData.length ? "暂无数据" : "加载中...";
    },
  },
  mounted() {},
  watch: {
    tableData(val) {
      val.length == 0 || val.length > 0
        ? (this.emptytxt = "暂无数据")
        : (this.emptytxt = "加载中...");
      val.length >= 10 ? (this.height = "680px") : (this.height = "");
      this.$nextTick(() => {
        this.$refs.selectTable.doLayout();
      });
      this.$forceUpdate();
      // if (val.length > 0) {
      //   val.forEach((v) => {
      //     for (let key in v) {
      //       v[key] ? "" : (v[key] = "--");
      //     }
      //   });
      //   console.log(val);
      // }
    },
    columns: {
      deep: true,
      handler(val) {
        this.$forceUpdate(this.columns);
      },
    },
  },
  methods: {
    tableRowClassName({ row }) {
      console.log(row);
      if (row.dataType == 2) {
        return "red";
      }
    },
  },
  data() {
    return {
      emptytxt: "",
      height: "",
    };
  },
};
</script>
<style lang="less" scoped>
/deep/.el-table .red {
  background: rgba(255, 233, 233);
}
</style>

