<template>
  <div class="st-base-table" v-show="isShow">
    <!-- 表格主体 -->
    <el-table
      ref="mainTable"
      :data="dataTabel"
      row-key="ROW_ID"
      :stripe="stripe"
      :border="border"
      :row-class-name="rowClassName"
      :cell-class-name="cellClassName"
      :height="height"
      :highlight-current-row="highlightCurrentRow"
      style="width:100%"
      @sort-change="sortChange"
      @selection-change="selectionChange"
      @filter-change="filterChange"
      @row-click="rowClick"
      v-loading="loading"
      element-loading-text="玩命加载中"
      element-loading-spinner="el-icon-loading"
      :isHeigth="isHeigth"
      :shiyHeigth="shiyHeigth"
    >
      <!-- 多选列 -->
      <el-table-column
        v-if="selectionType == 'select'"
        type="selection"
        width="50"
        align="center"
        fixed="left"
        :reserve-selection="reserveSelection"
        :resizable="false"
      >
      </el-table-column>

      <!-- 单选 -->
      <el-table-column
        v-if="selectionType == 'radio'"
        width="50"
        align="center"
        label="单选"
        fixed="left"
        :resizable="false"
      >
        <template slot-scope="scope">
          <el-radio
            :value="dataRadioId"
            :label="scope.row.ROW_ID"
            @click.native.prevent.stop="rowClick(scope.row)"
          >
            {{ "" }}
          </el-radio>
        </template>
      </el-table-column>

      <!-- 序号 -->
      <el-table-column
        v-if="showIndex"
        type="index"
        width="50"
        label="序号"
        align="center"
        fixed="left"
        :resizable="false"
      >
      </el-table-column>

      <!-- 表格列 -->
      <el-table-column
        v-for="(item, index) in dataColumnData"
        :key="item.data_id || 'auto_' + index"
        v-bind="item"
        :column-key="dataDropColumn[index].prop"
        :align="item.align || align"
        :sortable="dataSortable(item)"
        :show-overflow-tooltip="item.showOverflowTooltip || showOverflowTooltip"
        :min-width="item['min-width'] || dataColumnMinWidth(item)"
        :class-name="item['class-name'] || 'allowDrag'"
      >
        <!-- 表格每行的内容 -->
        <div slot-scope="scope">
          <!-- 功能位置 -->
          <component-proxy
            v-if="item.template"
            :html="item.template"
            :scope="scope"
            v-on="$listeners"
          >
          </component-proxy>

          <!-- 文本位置 -->
          <template v-else>
            {{ dataTabel[scope.$index][dataDropColumn[index].prop] }}
          </template>
        </div>
      </el-table-column>

      <!-- 默认插槽 -->
      <slot></slot>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      v-if="isPagination"
      :layout="layout"
      :current-page="dataCurrentPage"
      :page-sizes="pageSizes"
      :page-size="dataPageSize"
      :total="dataTotal"
      @current-change="currentChange"
      @size-change="sizeChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import table from "./table.js";
export default {
  name: "DilTable",
  extends: table,
  props: {
    shiyHeigth:{
      default:null,
    },
    isHeigth:{
      default:false,
    },
    drawer:{
      default:false,
    },
    //判断是否带分页查询
    isKuang:{
      default:false,
    },
    // 请求地址
    requestUrl: {
      default: "",
    },
    // 请求参数 请求体中的参数
    requestQuery: {
      default() {
        return {};
      },
    },
    // 表头数据
    columnData: {
      default() {
        return [];
      },
    },
    // 是否显示序号
    showIndex: {
      default: true,
    },
    // 是否显示选择框
    // radio : 显示单选框
    // select : 显示多选框
    selectionType: {
      default: "",
    },
    // 是否在数据翻页后保留之前选中的数据（需指定 row-key）
    reserveSelection: {
      default: false,
    },
    // 是否为斑马纹 table
    stripe: {
      default: true,
    },
    // Table 的高度，默认为自动高度。
    // 如果 height 为 number 类型，单位 px；
    // 如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。
    height: {
      default: null,
    },
    // Table 的最大高度。合法的值为数字或者单位为 px 的高度。
    //sdada
    maxHeight: {
      default: null,
    },
    // 是否启用排序
    sortable: {
      default: "custom",
    },
    // 对齐方式 left/center/right
    align: {
      default: "center",
    },
    // 是否带有纵向边框
    border: {
      default: true,
    },
    // 是否要高亮当前行
    highlightCurrentRow: {
      default: false,
    },
    // 当内容过长被隐藏时显示 tooltip
    showOverflowTooltip: {
      default: true,
    },
    // 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。
    rowClassName: {
      default() {
        return ({ row, rowIndex }) => "";
      },
    },
    // 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。
    cellClassName: {
      default() {
        return ({ row, rowIndex }) => "";
      },
    },
    loading:{
      default:false,
    },
    // 是否启用分页器
    isPagination: {
      default: true,
    },
    // 当前页数，支持 .sync 修饰符
    currentPage: {
      default: 1,
    },
    // 每页显示个数选择器的选项设置
    pageSizes: {
      default() {
        return [10, 20, 50, 100, 200, 1000];
      },
    },
    // 每页显示条目个数，支持 .sync 修饰符
    pageSize: {
      default: 10,
    },
    //组件布局，子组件名用逗号分隔
    layout: {
      default: "total, prev, pager, next, sizes, jumper",
    },
  },
  watch:{
    requestUrl(){
      this.refreshData();
    },
    drawer(val){
      if(val){
        this.dataRadioId = null;
      }
    },
    // dataTabel: function() {
    //   this.$nextTick(function() {
    //     this.$refs.mainTable.setCurrentRow(this.dataTabel[0])
    //   })
    // }
  },
  methods: {
    // 刷新表格数据
    refreshData() {
      this.requestData();
      //多选表格，清空用户的选择
      this.$refs.mainTable.clearSelection();
    },
    toggleRowExpansion(row, expanded) {
      this.$refs.mainTable.toggleRowExpansion(row, expanded);
    },

  },
};
</script>

<style lang="scss" scoped>
@media print {
  .el-pagination {
    display: none;
  }
  
}
 /deep/.el-table .success-row {
    background: #fff !important;
    color: #f56c6c;
    height: 44px;
    line-height: 46px;
    font-size: 22px;
    font-weight: 700;
  }
</style>
