<template>
  <div :class="{'card-Table': shadow}">
    <el-row class="mb20">
      <slot name="operations" :selections="selections"></slot>
    </el-row>
    <el-table
      ref="table"
      :row-class-name=" showRowClassName ? tableRowClassName : null"
      :data="localPage ? tempData : modalData"
      v-loading="loading"
      :row-key="rowKey"
      element-loading-text="loading..."
      @select="handleSelect"
      @select-all="handleSelectAll"
      @selection-change="handleSelectionChange"
      @row-click="rowClick"
      @row-dblclick="rowDblclick"
      class="page-table"
      :cell-style="cellStyle"
      :row-style="{'height':rowHeight}"
      :max-height="maxHeight"
      :stripe="stripe"
      :border="true"
      @sort-change="sortChange"
      :header-cell-style="{'background-color':'#F4F6F8','border-right':'1px solid #dfdcdc','color':'#92A2B5'}"
      :tree-props="{children: children, hasChildren: hasChildren}"
      v-bind="$attrs"
    >
      <slot name="default" :list="modalData"></slot>
    </el-table>
    <div style="position: relative">
      <pagination v-show="searchParams.total > 0 && !localPage"
                  :total="searchParams.total?searchParams.total:0" :page.sync="searchParams.pageNum" :limit.sync="searchParams.pageSize"
                  @pagination="changePage"/>
      <pagination v-show="searchParams.total > 0 && localPage "
                  :total="searchParams.total?searchParams.total:0"
                  :page.sync="searchParams.pageNum" :limit.sync="searchParams.pageSize" @pagination="changeLocalPage"/>
      <div style="position: absolute; top: 30px; left: 5px; font-Size: 14px">
        <slot name="feet"></slot>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
      name: "CardTable",
      props: {
        showRowClassName: {
          type: Boolean,
          default: false
        },
        list: {
          required: false,
        },
        formatter: {
          type: Function,
          default: (obj) => obj,
        },
        cellStyle: {
          type: Object
        },
        labelWidth: {
          type: String,
          default: '200px',
        },
        searchParams: {
          type: Object,
          default: () => {
          }
        },
        localPage: {
          type: Boolean,
          default: false
        },
        fieldName: {
          type: String,
          default: 'id'
        },
        rowHeight: {
          type: String,
          default: '8px'
        },
        clickSelect: {
          type: Boolean,
          default: false
        },
        maxHeight: {
          type: String|Number,
          default: '750px'
        },
        rowKey: {
          type: String,
          default: 'id'
        },
        shadow: {
          type: Boolean,
          default: true
        },
        rowStyle: {},
        stripe: {
          type: Boolean,
          default: false,
        },
        // sortChange: {
        //   type: Function,
        //   default: () => {
        //   }
        // },
        loading:{
          type: Boolean,
          default: false
        },
        modalData: {
          type: Array,
          default: () => []
        },
        tempData: {
          type: Array,
          default: () => []
        },
        tableSearch:{
          type: Boolean,
          default: false
        },
        //搜索时不需要的参数
        delProp: {
          type: Array,
          default: () => []
        },
        children: {
          type: String,
          default: 'children'
        },
        hasChildren: {
          type: String,
          default: 'hasChildren'
        },
      },
      data() {
        return {
          // modalData: [],
          // tempData: [],
          // loading: false,
          selections: [],
          excludeData: [],
          delRows: [],
          visibleTable: true,
          highlightRow: '',
          searchParamsCache: null,
          scrollPosition: 0,// 存储滚动位置
        }
      },
      created() {

      },
      // watch: {
      //   // 根据名称筛选部门树
      //   modalData(val,oldval) {
      //     // if(  (this.tableSearch && !this.modalData)  || (this.tableSearch && !this.modalData[0].hasSearch)){
      //     //   //代表存在数据且开启了查询，需要新增首行作为查询条件
      //     //   // this.modalData.$set(0, {hasSearch:1});
      //     //   this.modalData.splice(0,0,{hasSearch:1});
      //     // }
      //     if(this.tableSearch){
      //       if(this.modalData&&this.modalData.length>0){
      //         if(!this.modalData[0].hasSearch){
      //           this.modalData.splice(0,0,{hasSearch:1});
      //         }
      //       }else {
      //         this.modalData = [{hasSearch:1}]
      //       }
      //     }
      //   }
      // },
      mounted() {
      },
      destroyed() {
        // 销毁enter事件
        // this.enterKeyupDestroyed();
      },
      methods: {
        sortChange:function(column,prop,order){
          this.$emit('sortChange',column,prop,order)
        },
          //table颜色改变
        tableRowClassName({row, rowIndex}) {
          if (true) {
            return 'warning-row'
          }
          if (true) {
            return 'success-row'
          }
          if (true) {
            return 'warning-row';
          }
          let index = this.selections.findIndex(selectedRow => selectedRow[this.fieldName] === row[this.fieldName])
          if (index == -1) {
            return rowIndex % 2 === 0 ? 'stripe' : ''
          } else {
            return 'highlight-row'
          }

          return '';
        },
        //单击行数据
        rowClick(row, column, event) {
          if (this.clickSelect) {
            let index = this.selections.findIndex(selectedRow => selectedRow[this.fieldName] === row[this.fieldName])
            if (index == -1) {
              this.$refs.table.toggleRowSelection(row, true);
            } else {
              this.$refs.table.toggleRowSelection(row, false);
            }
          }
          this.$emit('rowClick', {row: row, column: column, event: event})
        },
        //双击行数据
        rowDblclick(row, column, event) {
          this.$emit('rowDblclick', {row: row, column: column, event: event})
        },
        handleSelect(selection, row) {
          // for (let i = 0; i < selection.length; i++) {
          //   const {id} = selection[i]
          //   if (id === row.id) {
          //     return
          //   }
          // }
          let selected = selection.length && selection.indexOf(row) !== -1
          if(selected){
            this.$emit('select', [row])
          }else {
            this.$emit('cancel', [row])
          }
        },
        handleSelectAll(selection) {
          const isSelect = selection.length > 0
          this.$emit(
            isSelect ? 'select' : 'cancel',
            this.modalData.map((row) => row)
          )
        },
        handleSelectionChange(selection) {
          this.selections = selection
          this.$emit('selection-change',selection)
        },
        changePage(){

          this.$emit('pagination',this.delPropF())
        },
        changeLocalPage(){
          //本地分页
          if (this.localPage) {
            /**前端分页**/
            let pageNum = this.searchParams.pageNum;
            let pageSize = this.searchParams.pageSize;
            this.tempData = this.modalData.slice((pageNum - 1) * this.pageSize, (pageNum - 1) * pageSize + pageSize)
          }
          this.$emit('paginationLocal',{pageNum:this.searchParams.pageNum,pageSize:this.searchParams.pageSize})
        },
        columnSearch(){
          this.$emit('columnSearch',this.delPropF())
        },
        delPropF(){
          let searchQuery = JSON.parse(JSON.stringify({...this.searchParams}))
          if (this.delProp && this.delProp.length > 0) {
            this.delProp.forEach(prop => {
              delete searchQuery[prop]
            })
          }
          return searchQuery
        },
        resetList() {
          //重置
          this.$emit('resetList')
        },
      }
    }
</script>


<!--
注意： （在里面写注释报错？？？）
.el-table .caret-wrapper 取消原本的排序箭头样式；
.el-table .label-header .caret-wrapper 保留在label同一行位置的排序箭头样式；
-->
<style scoped lang="scss">
.card-Table {
  padding: 24px;
  margin-top: 0;
  background: #FFFFFF;
  box-shadow: none;
  border-radius: 6px;

  ::v-deep .el-table {
    .caret-wrapper {
      display: none !important;
    }

    .label-header .caret-wrapper {
      display: inline-block !important;
    }
  }

}

</style>
