<!-- -->
<template>
  <el-table
    :data="data"
    class="mt-10"
    fit
    stripe
    border
    empty-text="暂无数据"
    :highlight-current-row="true"
    @selection-change="handleSelectionChange"
    v-bind="$attrs"
  >
    <el-table-column v-if="needExpand" type="expand">
      <template slot-scope="scope">
        <!-- 传索引去获取数据中的index项，不然有些数据在config中未显示出来 -->
        <slot name="expand" :scope="scope.$index"></slot>
      </template>
    </el-table-column>
    <el-table-column
      v-if="hasMultiSelection"
      :selectable="getSelectableData"
      type="selection"
      width="55"
    />
    <el-table-column type="index" width="50" label="序号" align="center">
    </el-table-column>
    <el-table-column
      v-for="(item, index) in tableTitle"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :width="item.width ? item.width : null"
      :min-width="item.minwidth ? item.minwidth : null"
      :sortable="item.sortable ? item.sortable : false"
      :align="item.columnAlign"
      :header-align="item.titleAlign"
      :show-overflow-tooltip="item.showOverFlowToolTip"
    >
      <template slot-scope="scope">
        <template v-if="item.prop == 'faceImageUrl'">
          <slot name="faceImageUrl" :scope="scope.row"></slot>
        </template>
        <template v-else-if="item.prop == 'faceImagePressUrl'">
          <slot name="faceImagePressUrl" :scope="scope.row"></slot>
        </template>
        <template v-else-if="item.prop == 'sourceWay'">
          <slot name="sourceWay" :scope="scope.row"></slot>
        </template>
        <template v-else-if="item.prop == 'images'">
          <slot name="images" :scope="scope.row"></slot>
        </template>
        <template v-else-if="item.prop == 'audios'">
          <slot name="audios" :scope="scope.row"></slot>
        </template>
        <template v-else-if="item.prop == 'videos'">
          <slot name="videos" :scope="scope.row"></slot>
        </template>
        <template v-else-if="item.isStatus">
          <slot name="status" :scope="scope.row"></slot>
        </template>
        <template v-else-if="item.prop == 'checkStatus'">
          <slot name="checkStatus" :scope="scope.row"></slot>
        </template>
        <template v-else-if="item.prop == 'years'">
          <slot name="years" :scope="scope.row"></slot>
        </template>
        <template v-else-if="item.prop == 'level'">
          <slot name="level" :scope="scope.row"></slot>
        </template>
        <template v-else-if="item.prop == 'textureType'">
          <slot name="textureType" :scope="scope.row"></slot>
        </template>
        <template v-else-if="item.isCulturalRelicType">
          <slot name="type" :scope="scope.row"></slot>
        </template>
        <template v-else-if="item.isDisplayType">
          <slot name="displayType" :scope="scope.row"></slot>
        </template>
        <template v-else-if="item.prop == 'fileSize'">
          <slot name="fileSize" :scope="scope.row"></slot>
        </template>
        <template v-else-if="item.prop == 'themeType'">
          <slot name="themeType" :scope="scope.row"></slot>
        </template>
        <template v-else-if="item.needTimeTag">
          <slot name="createTime" :scope="scope.row"></slot>
        </template>
        <template v-else-if="item.prop == 'optType'">
          <slot name="optType" :scope="scope.row"></slot>
        </template>
        <span v-else>{{ scope.row[item.prop] }}</span>
      </template>
    </el-table-column>

    <!-- 如果需要自定义最后一栏则需传入operates对象,并提供模板 -->
    <el-table-column
      v-if="operates.operate"
      :label="operates.label"
      :width="operates.width"
      :align="operates.columnAlign"
      :header-align="operates.titleAlign"
      fixed="right"
    >
      <template slot-scope="scope">
        <slot name="operates" :scope="scope.row"></slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "TablePage",
  props: {
    // 表格数据
    data: {
      type: Array,
      default: () => [],
    },
    // 表头项
    tableTitle: {
      type: Array,
      default: () => [],
    },
    // 操作项
    operates: {
      type: Object,
      default: () => ({}),
    },
    // 是否需要多选框
    hasMultiSelection: {
      type: Boolean,
      default: false,
    },
    // 是否需要展开
    needExpand: {
      type: Boolean,
      default: false,
    },
    // 获取多选中的可被选择项目
    selectableFuction: {
      type: Function,
    },
  },
  // 继承所有父组件的内容
  inheritAttrs: true,
  methods: {
    // 多选操作
    handleSelectionChange(val) {
      if (this.hasMultiSelection) {
        this.$emit("handleSelectionChange", val);
      }
    },
    // 获取多选中的可被选择项目，true则可被选择
    getSelectableData(row, rowIndex) {
      if (this.selectableFuction) {
        return this.selectableFuction(row, rowIndex);
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
