<template>
  <el-table
    :height="height"
    ref="table"
    class="bg-table"
    :data="rows"
    :border="border"
    @selection-change="selectAction"
    @select="selectActionRow"
    @select-all="selectActionAll"
    :stripe="stripe"
    :row-class-name="stripe ? tableRowClassName : ''"
    tooltip-effect="light">
    <template v-slot:empty>
      <div class="empty_container">
        <img src="../assets/imgs/img-no-data.png" alt="" />
        <div class="text">暂无数据</div>
      </div>
    </template>
    <el-table-column v-if="paddingLeft > 10 && !border" :width="paddingLeft - 10"></el-table-column>
    <el-table-column type="selection" :selectable="selectable" width="38" v-if="select">
      <!-- checkbox -->
    </el-table-column>
    <el-table-column v-if="isIndex" type="index" :label="indexLabel" :width="indexWidth" align="left">
      <!-- 序号 -->
    </el-table-column>
    <el-table-column
      v-for="header in headers"
      :width="header.width"
      :min-width="header.minWidth"
      :align="header.align"
      :key="'col_' + header.prop"
      :fixed="header.fixed"
      show-overflow-tooltip>
      <template v-slot:header>
        <template v-if="$slots[`header-${header.prop}`]">
          <slot :name="`header-${header.prop}`" />
        </template>
        <p class="text-clip" v-else>{{ header.label }}</p>
      </template>
      <template v-slot:default="{ row }">
        <slot v-if="$slots[header.prop]" :name="header.prop" :row="row" />

        <template v-else>
          <!-- {{ row[header.prop] | ellipsis(header.max) }} -->
          {{ row[header.prop] }}
        </template>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { watch, ref, nextTick } from "vue";
import { selectTableMixin } from "./hook/mixin-select-table";
const { nowSelectData, allSelectData, initAllSelectData, selectData, initSelectTableData, runPage, dealSelectData } =
  selectTableMixin();

const props = defineProps({
  height: {
    type: [Number, String],
    default: "auto",
  },
  headers: {
    type: Array,
    require: true,
  },
  rows: {
    type: Array,
    default: () => [],
  },
  select: {
    type: Boolean,
    default: false,
  },
  isIndex: {
    type: Boolean,
    default: false,
  },
  indexLabel: {
    type: String,
    default: "序号",
  },
  stripe: {
    type: Boolean,
    default: false,
  },
  border: {
    type: Boolean,
    default: false,
  },
  paddingLeft: {
    type: [Number, String],
    default: () => 12,
  },
  canEdit: {
    type: Boolean,
    default: false,
  }, // 多选框是否禁用
  canEditFlag: {
    type: String,
    default: "",
  }, // 决定多选框是否禁用的字段
  indexWidth: {
    type: Number,
    default: 54,
  },
  //初始表格选中数据
  originSelectedData: {
    type: Array,
    default: () => [],
  },
  // 自定义返回值用来决定这一行的 CheckBox 是否可以勾选
  selectable: {
    type: Function,
    default: null,
  },
});

const table = ref(null);

const emit = defineEmits(["selectAc", "select"]);
watch(
  () => props.originSelectedData,
  (val) => {
    if (val.length) {
      initAllSelectData(props.originSelectedData);
    }
  },
  {
    immediate: true,
  }
);
watch(
  () => props.rows,
  (n, o) => {
    if (n.length && props.select) {
      runPage();
      initSelectTableData(n).then((selectData) => {
        if (selectData.length) {
          setTimeout(() => {
            toggleRowArrSelection(selectData);
          });
        }
      });
    }
  },
  {
    immediate: true,
  }
);

const toggleRowSelection = (row, flag = true) => {
  table.value.toggleRowSelection(row, flag);
};
const selectAction = (selection) => {
  nextTick(() => {
    emit("selectAc", {
      allLength: Object.keys(allSelectData.value).length + nowSelectData.value.length,
      selection,
    });
  });
};
const clearSelection = () => {
  table.value.clearSelection();
  emit("select", {
    allLength: Object.keys(allSelectData.value).length + nowSelectData.value.length,
    selection: [],
  });
};
const toggleRowArrSelection = (arr, flag = true) => {
  arr.forEach((e) => {
    toggleRowSelection(e, flag);
  });
};
const selectActionRow = (selection, row) => {
  selectData(selection);
  emit("select", {
    allLength: Object.keys(allSelectData.value).length + nowSelectData.value.length,
    selection,
  });
};
const selectActionAll = (selection) => {
  selectData(selection);
  emit("select", {
    allLength: Object.keys(allSelectData.value).length + nowSelectData.value.length,
    selection,
  });
};
const clearTable = () => {
  //清除选中数据,在页面状态更新时使用
  allSelectData.value = {};
  nowSelectData.value = [];
  clearSelection();
};
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 == 0) {
    return "white-row";
  } else {
    return "stripe-row";
  }
};
const selectable = (row, index) => {
  // 判断是否传入自定义返回值用来决定这一行的 CheckBox 是否可以勾选，否则使用默认勾选逻辑
  if (props.selectable) {
    return props.selectable(row, index);
  }
  if (props.canEdit) {
    if (row[props.canEditFlag] && row[props.canEditFlag] == 1) {
      return false;
    } else {
      return true;
    }
  } else {
    return true;
  }
};
defineExpose({
  clearTable,
  toggleRowSelection,
  dealSelectData,
});
</script>
