<template>
  <el-row>
    <el-col class="m-b-10" :span="24">
      <el-table
        v-adaptive="{ bottomOffset }"
        :data="list"
        :height="tableHeight"
        v-bind="$attrs"
        stripe
        :highlight-current-row="highlightCurrentRow"
        @selection-change="handleSelectionChange"
        @sort-change="sortByColumn"
        @select="handleSelect"
        @cell-dblclick="celldblclick"
      >
        <template v-for="(column, index) in columns">
          <slot name="front-slot" />
          <el-table-column v-if="column.type === 'tip'" :key="index" width="35">
            <template slot-scope="scope">
              <span v-if="column.slot">
                <!-- 具名slot -->
                <slot v-if="column.slot" :name="column.slot" :scope="scope" />
              </span>
            </template>
          </el-table-column>
          <!-- 序号 -->
          <el-table-column
            v-else-if="column.type === 'selection'"
            :key="index"
            type="selection"
            width="55"
          />
          <!-- 复选框 -->
          <el-table-column
            v-else-if="column.type === 'index'"
            :key="index"
            type="index"
            width="50"
          />
          <!-- 具体内容 -->
          <el-table-column
            v-else
            :key="index"
            align="left"
            :label="column.label"
            :width="column.width"
            :min-width="column.minWidth"
            :show-overflow-tooltip="column.showOverflowTooltip || false"
            :sortable="column.sortable || false"
            :prop="column.prop"
            :fixed="column.fixed"
          >
            <template slot-scope="scope">
              <!-- 仅仅显示文字 -->
              <span v-if="!column.hidden">
                <!-- 如果hidden为true的时候 那么当前格可以不显示，可以选择显示自定义的slot-->
                <!-- 操作按钮 -->
                <span v-if="column.type === 'operate'">
                  <!-- <a v-for="(operate, i) in column.operates" :key="i" href="javascript:void(0)" class="operate-button" @click="handleClick(operate, scope.row)">
                    {{ operate.name }}
                    &nbsp;&nbsp;
                  </a> -->
                  <span v-for="(operate, i) in column.operates" :key="i">
                    <el-button
                      :size="operate.size || 'mini'"
                      :type="operate.type || 'primary'"
                      style="margin-right: 5px"
                      @click="handleClick(operate, scope.row)"
                      >{{ operate.name }}</el-button
                    >
                  </span>
                </span>
                <span v-else>
                  {{ scope.row[column.prop] }}
                </span>
              </span>
              <!-- 使用slot的情况下 -->
              <span v-if="column.slot">
                <!-- 具名slot -->
                <slot v-if="column.slot" :name="column.slot" :scope="scope" />
              </span>
            </template>
          </el-table-column>
          <!-- 匿名slot -->
        </template>
        <slot />
      </el-table>
    </el-col>
    <!-- 分页部分 -->
    <el-col v-if="!hiddenPage" :span="24" class="page">
      <pagination
        :total="total"
        :page.sync="searchData.PageIndex"
        :limit.sync="searchData.PageSize"
        @pagination="pagination"
      />
    </el-col>
  </el-row>
</template>
<script>
/**
 * @author
 * @todo 项目中基本使用表格
 * @slot 1: defaultSlot：插入表格一行 2: front-slot：默认在表格开始处加一行 3:column内slot
 * @property
 * list => 表格数据
 * columns: [ ==> 配置表格头
 *  key: => 渲染字段名称
 *  title: => 表头名称
 *  operates： => 操作数组 [
 *      name: 名称
 *      emitKey: 要emit出去的事件
 *  ]
 * ]
 * demo columns
 * headers: [
        { type: 'selection'},
        { type: 'index'},
        { key: 'loginName', title: 'XXX' },
        { key: 'userName', title: 'XXX' },
        { key: 'roleName', title: 'XXX', hidden: true, slot: 'roleSlot' },
        { key: 'createDate', title: 'XXX' },
        // operate 这一行可以选择直接使用slot或者是使用配置项
        { type: 'operate', title: 'XXX',
          operates: [
            { name: 'XXX', emitKey: 'reset' },
            { name: 'XXX', emitKey: 'edit' },
            { name: 'XXX', emitKey: 'delete' }
        ] }
      ]
 */
import Pagination from '@/components/Pagination'
export default {
  name: 'BaseTable',
  components: { Pagination },
  props: {
    // 核心数据
    list: {
      type: Array,
      default: () => [],
    },

    // columns
    columns: {
      type: Array,
      required: true,
      default: () => [],
    },
    // is hidden page for table
    hiddenPage: {
      type: Boolean,
      default: false,
    },
    bottomOffset: {
      type: Number,
      default: 45,
    },
    searchData: {
      type: Object,
      default: () => {},
    },
    total: {
      type: Number,
      default: 0,
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {}
  },
  computed: {
    tableHeight() {
      return 100
    },
  },
  methods: {
    // 处理点击事件
    handleClick(action, data) {
      // emit事件
      this.$emit(`${action.emitKey}`, data)
    },
    // 选中变化
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
    handleSelect(rows, row) {
      this.$emit('handleSelect', rows, row)
    },
    celldblclick(row, column) {
      this.$emit('celldblclick', row, column)
    },
    sortByColumn(column) {
      this.$emit('sortByColumn', column)
    },
    pagination() {
      this.$emit('getList')
    },
  },
}
</script>
<style lang="scss" scoped>
.page {
  padding-top: 3px;
  text-align: right;
}
</style>
