<template>
  <div class="base-table">
    <el-table
      :data="data"
      :size="size"
      :height="height"
      v-loading="showLoading"
      element-loading-text="加载中...">
      <template v-for="item in column">
        <el-table-column :prop="item.prop" :label="item.label" :key="item.prop" v-if="item.click" :width="item.width" align="center">
          <!-- 自定义单元格 -->
          <template slot-scope="scope">
            <!-- 单个cell点击 -->
            <el-button type="text" @click="handleCellClick(scope.row)" v-if="!item.list">{{ item.formatter ? item.formatter(scope.row) : scope.row[item.prop] }}</el-button>
            <!-- 操作列表（新增、编辑、删除） -->
            <div v-if="item.list">
              <template  v-for="(btn,key) in item.list">
                <!-- 需要根据返回状态动态渲染按钮 -->
                <el-button type="text" v-if="btn.prop" v-has="btn.action" :class="[btn.val[scope.row[btn.prop]].color]"  @click="handleAction(key,scope.row)" :key="key">
                  {{ btn.val[scope.row[btn.prop]].text || btn.val[scope.row[btn.prop]] }}
                </el-button>
                <!-- 普通操作按钮 -->
                <el-button type="text" v-else v-has="btn.action" :class="[btn.color]" @click="handleAction(key,scope.row)" :key="key">
                  {{ btn.text }}
                </el-button>
              </template>
            </div>
          </template>
        </el-table-column>
        <!-- 普通列 -->
        <el-table-column :prop="item.prop" :label="item.label" :show-overflow-tooltip="true" :key="item.prop" v-else>
          <template slot-scope="scope">
            <!-- 图片显示 -->
            <div v-if="item.type === 'image'">
              <el-image
                :style="{ width: (item.width || 50) + 'px', height: (item.height || 50) + 'px' }"
                :src="scope.row[item.prop]"
                :preview-src-list="scope.row[item.imageList] || []">
              </el-image>
            </div>
            <div v-else>
              <!-- 根据badge对象，获取徽标颜色 -->
              <el-badge is-dot class="item" v-if="item.badge" :type="item.badge.state[scope.row[item.badge.id]]"></el-badge>
              {{ item.formatter ? item.formatter(scope.row) : scope.row[item.prop] }}
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 50]"
      :page-size="pagination.page_size || 20"
      :current-page="pagination.page || 1"
      :total="pagination.total_count"
      :layout="layout"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  name: 'BussBaseTable',
  props: {
    showLoading: Boolean,
    column: {
      type: Array,
      default() {
        return []
      }
    },
    data: {
      type: Array,
      default() {
        return []
      }
    },
    pagination: {
      type: Object,
      default() {
        return {
          page_num: 1,
          page_size: 20,
          total_count: 0
        }
      }
    },
    height: {
      type: Number
    },
    size: {
      type: String,
      default() {
        return 'small'
      }
    },
    layout: {
      type: String,
      default() {
        return 'total, sizes, prev, pager, next, jumper'
      }
    }
  },
  methods: {
    // 单元格-文本点击事件
    handleCellClick(row) {
      this.$emit('handleCellClick', row)
    },
    // 操作区域-多按钮点击
    handleAction(action, row) {
      this.$emit('handleAction', { action, row })
    },
    // 分页条数变化
    handleSizeChange(val) {
      this.$emit('handleChange', { page_size: val, page: 1 })
    },
    // 页码变化
    handleCurrentChange(val) {
      this.$emit('handleChange', { page: val })
    },
  }
}
</script>
<style lang="scss">
  .base-table{
    .el-table{
      th{
        background: #f7f8fa;
      }
    }
    .el-pagination{
      text-align: right;
      padding-top: 20px;
      padding-right:20px;
      background-color:#ffffff;
    }
  }

</style>
