<style>
  @import "../../assets/iconfont/iconfont.css";
  @import "../../styles/sy-ui.scss";
  @import "./index.scss";
</style>
<template>
  <div>
    <div class="sy-btn-texts" v-if="datas.btns && datas.btns.length >0">
      <el-button v-for="(item,index) in datas.btns" :key="index" class="sy-btn-text" type="text" :disabled="item.disabled" :loading="item.loading" :icon="item.icon" size="small" @click="btnClick(index)">{{item.name}}</el-button>
    </div>
    <el-table ref="table" size="medium" :border="border" :stripe="stripe" :data="datas.data"
      :max-height="maxHeight" style="width: 100%" @selection-change="selectionChange" :show-summary="showSummary"
      :summary-method="summaryMethod"    
      :sum-text="sumText"
      :row-style = "rowStyle"
      :row-class-name="rowClassName"
      :span-method="spanMethod?spanMethod:spanMethodDefault"
      :show-header="showHeader"
      :highlight-current-row="highlightCurrentRow"
      :cell-class-name="cellClassName?cellClassName:cellClassNameDefault" 
      :cell-style="cellStyle"
      :header-row-class-name="headerRowClassName"
      :header-row-style="headerRowStyle?headerRowStyle:headerRowStyleDefault"
      :header-cell-style = "headerCellStyle"
      :empty-text="emptyText"
      :default-expand-all="defaultExpandAll"
      :tooltip-effect="tooltipEffect"
      :select-on-indeterminate="false"
      @select="select"
      @select-all="selectAll"
      @cell-mouse-enter="cellMouseEnterDefault"

      @cell-mouse-leave="cellMouseLeave"
      @cell-click="cellClick"
      @cell-dblclick="cellDblclick"
      @row-click="rowClick"
      @row-contextmenu="rowContextmenu"
      @row-dblclick="rowDblclick"
      @header-click="headerClick"
      @sort-change="sortChange"
      @filter-change="filterChange"
      @current-change="currentChange"
      @expand-change="expandChange"

      
      v-loading="loading">
      <el-table-column type="expand" v-if="expand">
        <template slot-scope="props">
          <slot name='expand' :data="props.row"></slot>
        </template>
      </el-table-column>
      <el-table-column v-if="checkbox" type="selection" width="55" align="center" :selectable="selectable"></el-table-column>
      <el-table-column v-if="indexName" type="index" :label="indexName" align="center" :index="indexMethod"> </el-table-column>
      <el-table-column v-for="(item,index) in datas.head" :key="index" :label="item.name" :width="item.width" :fixed="item.fixed" :min-width="item.minWidth"
        :align="item.center" :header-align="item.headerAlign" :class-name="item.className" :label-class-name="item.labelClassName" :sortable="item.sort" :show-overflow-tooltip="item.showTip">
        <template slot="header" slot-scope="scope">
            <span v-if="!item.customHeader">{{item.name}}</span>
            <span v-if="item.customHeader">
               <slot :name='"header-"+item.field' :data="scope.row"></slot>
            </span>
        </template>
    
        <template slot-scope="scope">
            <span v-if="!item.customContent" :class="{'text-label':item.label}" @click="labelClick(scope.row,item)">{{ scope.row[item.field] }}</span>
            <slot v-if="item.customContent" :name='"content-"+item.field' :data="scope.row"></slot>
        </template>
      </el-table-column>
      <el-table-column v-if="operation" align="center" :label="operation" width="55">
        <template slot-scope="scope">
          <i class="iconfont sy-icon-chakanxiangqing text-point" @click="details(scope.row)"></i>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-bar" v-if="datas.total && datas.total > 0">
      <span class="pagination">
        <el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange"
          :current-page.sync="nowCurrentPage" :page-size="pageSize" layout="prev, pager, next, jumper" :total="datas.total">
        </el-pagination>
      </span>
    </div>
  </div>
</template>
<script>
  export default {
    name:"syTable",
    data() {
        if(!this.index && !(this.index == undefined || this.index == "undefined"))
          this.index="序号";
      return {
        nowPageSize: this.pageSize,
        nowCurrentPage: this.currentPage,
        datas: this.data,
        btnArr:this.btns,
        indexName:this.index,
        // 合并行
        mergeColumns: this.mergeColumn,
        rowIndex: '-1',
        OrderIndexArr: [],
        hoverOrderArr: [],
      }
    },
    watch: {

    },
    props: {
      maxHeight: Number,
      data: {
        type: null,
        default: function () {
          return {head:[],btns:[],data:[],total:0}
        }
      },
      checkbox: {
        type: Boolean,
        default: true
      }, 
      expand: {
        type: Boolean,
        default: false
      },
      pageSize: {
        type: Number,
        default: 10
      },
      currentPage: {
        type: Number,
        default: 1
      },
      loading: {
        type: Boolean,
        default: false
      },
      operation: {
        type: null,
        default: '操作'
      },
      btns:{
        type: Array,
        default: function () {
          return []
        }
      },
      border: {
        type: Boolean,
        default: true
      },
      stripe: {
        type: Boolean,
        default: false
      },
      rowClassName:{
        type: null
      },
      showSummary:{
        type: Boolean,
        default: false
      },
      sumText:{
        type: String,
        default: "合计"
      },
      index:String,
      indexMethod:{
        type: null,
        default: function (index) {
          return index;
        }
      },
      showHeader:{
        type: Boolean,
        default: true
      },
      highlightCurrentRow:{
        type: Boolean,
        default: false
      },
      rowStyle:{
        type: null
      },
      cellClassName:{
        type: null
      },
      cellStyle:{
        type: null
      },
      headerRowClassName:{
        type: null
      },
      headerRowStyle:{
        type: null
      },
      headerCellStyle:{
        type: null
      },
      emptyText:{
        type: String,
        default: "暂无数据"
      },
      defaultExpandAll:{
        type: Boolean,
        default: false
      },
      tooltipEffect:{
        type: String,
        default: "dark"
      },
      spanMethod:{
        type: null
      },
      selectable:{
        type: null
      },
      






      summaryMethod:{
        type: null
      },
      mergeElement:String,
      mergeColumn:{
        type: Array,
        default: function () {
          return []
        }
      },
      
    },
    mounted() {

    },
    created() {
      if(this.mergeColumns.length>0){
        this.getOrderNumber(this.mergeElement);
      }
    },
    methods: {
      select(selection, row){
         this.$emit('select',selection,row);
      },
      selectAll(selection){
        this.$emit('select-all',selection);
      },
      selectionChange(selection) {
        this.$emit('selection-change',selection);
      },
      // cellMouseEnter(row, column, cell, event){
      //   this.$emit('cell-mouse-enter',row, column, cell, event);
      // },
       // 鼠标默认移入样式
      cellMouseEnterDefault(row, column, cell, event) {
        this.rowIndex = row.rowIndex;
        this.hoverOrderArr = [];
        this.OrderIndexArr.forEach(element => {
          if (element.indexOf(this.rowIndex) >= 0)
            this.hoverOrderArr = element
        })
      },
      cellClick(row, column, cell, event){
        this.$emit('cell-click',row, column, cell, event);
      },
      cellDblclick(row, column, cell, event){
        this.$emit('cell-dblclick',row, column, cell, event);
      },
      rowClick(row, column, event){
        this.$emit('row-click',row, column, event);
      },
      rowContextmenu(row, column, event){
        this.$emit('row-contextmenu',row, column, event);
      },
      rowDblclick(row, column, event){
        this.$emit('row-dblclick',row, column, event);
      },
      headerClick(column, event){
        this.$emit('header-click',column, event);
      },
      sortChange({ column, prop, order }){
        this.$emit('sort-change',{ column, prop, order });
      },
      filterChange(filters){
        this.$emit('filter-change',filters);
      },
      currentChange(currentRow, oldCurrentRow){
        this.$emit('current-change',currentRow, oldCurrentRow);
      },
      expandChange(row, expandedRows){
        this.$emit('expand-change',row, expandedRows);
      },
      // 分页（页数）
      handleSizeChange(val) {
        this.nowPageSize = val;
        this.$emit('change-page', {
          currentPage: this.nowCurrentPage,
          pageSize: val
        });
      },
      // 分页（当前页）
      handleCurrentChange(val) {
        this.nowCurrentPage = val;
        this.$emit('change-page', {
          currentPage: val,
          pageSize: this.nowPageSize
        });
      },
      // 表头样式
      headerRowStyleDefault(data) {
        return {
          color: '#566C84'
        }
      },
      // 合并单元格
      spanMethodDefault({row,column,rowIndex,columnIndex}) {
        if (this.mergeColumns.includes(columnIndex)) {
          for (let i = 0; i < this.OrderIndexArr.length; i++) {
            let element = this.OrderIndexArr[i]
            for (let j = 0; j < element.length; j++) {
              let item = element[j]
              if (rowIndex == item) {
                if (j == 0)
                  return {
                    rowspan: element.length,
                    colspan: 1
                  }
                else if (j != 0)
                  return {
                    rowspan: 0,
                    colspan: 0
                  }
              }
            }
          }
        }
      },
      
      // 鼠标移出样式
      cellMouseLeave(row, column, cell, event) {
        this.rowIndex = '-1'
        this.hoverOrderArr = [];
      },
       // 获取相同编号的数组
      getOrderNumber(dom,OrderObj = {}) {
        this.datas.data.forEach((element, index) => {
          element.rowIndex = index
          if (OrderObj[element[dom]]) {
            OrderObj[element[dom]].push(index)
          } else {
            OrderObj[element[dom]] = []
            OrderObj[element[dom]].push(index)
          }
        })
        // 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）
        for (let k in OrderObj) {
          if (OrderObj[k].length > 1)
            this.OrderIndexArr.push(OrderObj[k])
        }
      },
      // 表头添加类
      cellClassNameDefault({ row, rowIndex}) {
        for (let i = 0; i < this.hoverOrderArr.length; i++) {
          if (rowIndex == this.hoverOrderArr[i])
            return 'hovered-row'
        }
      },
      details(row) {
        this.$emit('details', row);
      },
      btnClick(name){
        this.$emit('btn-click', name);
      },
      labelClick(row,item){
        if(item.label){
           this.$emit('label-click', {row:row,field:item.field});
        }
      },
    }
  }

</script>
