<template>
  <div class="main-table">
    <div class="table-management">
      <el-table
        border
        style="width: 100%"
       :data="tableData"
        v-loading="loading"
        element-loading-text="正在加载"
        @selection-change="handleSelectionChange"
      >
        <el-table-column v-if="isSelect" type="selection" width="40">
        </el-table-column>
        <el-table-column
          v-for="(item, index) in columns"
          :key="index"
          :type="item.type"
          :index="item.index"
          :column-key="item.columnKey"
          :label="item.label"
          :prop="item.prop"
          :width="item.width"
          :min-width="item.minWidth"
          :fixed="item.fixed"
          :header-align="item.headerAlign"
          :align="item.align"
          :show-overflow-tooltip="showOverflowTooltip || true"
        >
          <template  slot-scope="scope" slot="header">
<!--            //表头显示icon可单独修改，我是默认添加的？icon,并展示相应的tips-->
            <div v-if="item.tip">
              <span>{{item.label}}</span>
              <el-tooltip placement="right">
                <div slot="content">
                  <div v-for="(items,index) in item.tipData" :key="index">
                    <p >
                      {{items.msg}}
                    </p>
                  </div>
                </div>
                <i class="el-icon-question"></i>
              </el-tooltip>
            </div>
            <p v-else>{{item.label}}</p>
          </template>
          <template slot-scope="scope">
            <expand-dom
              v-if="item.render"
              :render="item.render"
              :row="scope.row"
              :index="scope.$index"
              :column="item"
            ></expand-dom>
            <span v-else>{{ scope.row[item.prop]||'-' }}</span>
          </template>
        </el-table-column>
      </el-table>
<!--      //分页封装-->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          :hide-on-single-page="total > 10 ? false : true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  props:{
    tableData: { type: Array },//表格数据list
    columns: { type: Array },//表格展示的表头以及单元格字段
    isSelect: { type: Boolean, default: false },//是否显示选中组件
    total: { type: Number },//分页总条数
    pageNo:{type:Number,default:1},//分页--当前页
    loading:{type:Boolean,default:false},//表格加载loading
    pageSize:{type:Number,default:10},//分页--每页显示条数，pageSizes已写死，如有变更可修改
  },
  data(){
    return{

    }
  },
  methods:{
    //选中方法回调
    handleSelectionChange(val) {
      // 选中事件
      this.$emit("handleSelectBtn", val);
    },
    handleButton(methods, row, index) {
      // 按钮事件
      this.$emit("handleButton", { methods: methods, row: row, index: index });
    },
    //分页api（展示每页显示条数）
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
    //分页点击api（获取当前页数据）
    handleCurrentChange(val) {
      this.curPage = val;
      this.$emit("handleCurrentChange", val);
    },
  }
}
</script>

<style lang="scss"  scoped>

.table-management {

.pagination {
  float: right;
  margin: 20px;
}

.imgBox {
  width: 50px;
  height: 50px;
  margin: 0 auto;
}

img {
  width: 100%;
  height: 100%;
}

}
</style>
