<!-- -->
<template>
  <el-table
    :data="data"
    class="mt-10"
    fit
    stripe
    border
    empty-text="暂无数据"
    :highlight-current-row="true"
    @selection-change="handleSelectionChange"
    @current-change="handleCurrentChange"
  >
    <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
    <el-table-column v-if="hasMultiSelection" type="selection" width="55" />
    <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 == '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"></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: () => ({}),
    },
    hasSelection: {
      type: Boolean,
      default: false,
    },
    hasMultiSelection: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    data(value) {
      // debugger
      // console.log(123, value);
    },
  },
  methods: {
    handleSelectionChange(val) {
      if (this.hasMultiSelection) {
        this.$emit("handleSelectionChange", val);
      }
    },
    handleCurrentChange(val) {
      if (this.hasSelection) {
        this.$emit("handleCurrentChange", val);
      }
    },
  },
};
</script>

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