<template>
  <div class="card-container">
    <el-card :shadow="shadow" class="card-body" v-if="showCard" :style="cardStyle">
      <el-row class="mb20" style="display: flex;flex-wrap: wrap">
        <slot name="operations" :selections="selections" :params="searchParams.param"></slot>
      </el-row>
      <el-table ref="innerTable" :data="data || modalData" v-loading="loading" :span-method="spanMethod"
                tooltip-effect="light"
                :row-key="rowKey"
                @cell-mouse-enter="cellMouseEnter" @toggle-row-selection="toggleRowSelection"
                @selection-change="handleSelectionChange" @row-click="rowClick" :cell-style="cell ? cellStyle : null"
                :row-class-name="tableRowClassName" class="page-table" :stripe="stripe" :border="border"
                :max-height="maxHeight"
                :height="height" :header-cell-style="{ 'background-color': '#F3F4FB' }" :default-sort="defaultSort"
                @sort-change="sortChange" :show-summary="showSummary" :summary-method="summaryMethod">
        <slot name="default" :params="searchParams.param"></slot>
      </el-table>
      <slot name="leftTotalShow" v-if="leftTotalShowFlag && qurable && searchParams.total > 0">

      </slot>
      <div style="position: relative" v-if="showPage">
        <pagination v-show="qurable && searchParams.total > 0" :total="searchParams.total"
                    :page.sync="searchParams.current" :limit.sync="searchParams.size" @pagination="getList"/>
        <div style="position: absolute; top: 30px; left: 5px; font-size: 14px">
          <slot name="feet"></slot>
        </div>
      </div>
    </el-card>

    <template v-if="!showCard">
      <el-row class="mb20">
        <slot name="operations" :selections="selections" :params="searchParams.param"></slot>
      </el-row>
      <el-table ref="innerTable" :data="data || modalData" v-loading="loading" :span-method="spanMethod"
                @cell-mouse-enter="cellMouseEnter" @toggle-row-selection="toggleRowSelection"
                @selection-change="handleSelectionChange" :row-class-name="tableRowClassName" class="page-table"
                :stripe="stripe"
                :border="border" :max-height="maxHeight" :key="'id'"
                :header-cell-style="{ 'background-color': '#F3F4FB' }"
                :default-sort="defaultSort" @sort-change="sortChange" :show-summary="showSummary"
                :summary-method="summaryMethod">
        <slot name="default" :params="searchParams.param"></slot>
      </el-table>
      <div style="position: relative" v-if="showPage">
        <pagination v-show="qurable && searchParams.total > 0" :total="searchParams.total"
                    :page.sync="searchParams.current" :limit.sync="searchParams.size" @pagination="getList"/>
        <div style="position: absolute; top: 30px; left: 5px; font-size: 14px">
          <slot name="feet"></slot>
        </div>
      </div>
    </template>

    <slot name="dialogs"></slot>
  </div>
</template>

<script>
import {escapePercent} from "@/utils/common";
// #FAFCFF
/**
 * 列表组件
 */
export default {
  name: 'CustomTable',
  props: {
    leftTotalShowFlag:{
      type: Boolean,
      default: false
    },
    list: {
      type: Function
    },
    spanMethod: {
      type: Function,
      default: () => {
      }
    },
    reserveSelection: {
      type: Boolean,
      default: true
    },
    rowKey: {
      type: String,
      default: 'id'
    },
    cell: {
      type: Boolean,
      default: false
    },
    formatter: {
      type: Function,
      default: (obj) => obj
    },
    data: {
      type: Array,
      default: null,
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    showSearch: {
      type: Boolean,
      default: true
    },
    defaultParams: {
      default: () => {
      }
    },
    cardStyle: {
      type: String,
      default: ""
    },
    showPage: {
      type: Boolean,
      default: true
    },
    firstQuery: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    shadow: {
      type: String,
      default: 'never'
    },
    stripe: {
      type: Boolean,
      default: true
    },
    //最大高度
    maxHeight: {
      type: Number,
      default: 750
    },
    height: {
      default: 450
    },
    defaultSort: {
      type: Object,
      default: () => {
      }
    },
    showCard: {
      type: Boolean,
      default: true
    },
    tableRowClassName: {
      type: Function
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    summaryMethod: {
      type: Function,
    }
  },
  computed: {
    qurable() {
      return typeof this.list === 'function'
    }
  },
  data() {
    return {
      searchParams: {
        total: 0,
        current: 1,
        size: 10,
      },
      modalData: [],
      loading: false,
      selections: [],
      headerRowStyle: {
        'background-color': '#F5F5F5'
      }
    }
  },
  created() {
    this.searchParams.param = this.defaultParams
    if (this.firstQuery) {
      this.getList()
    }

  },
  methods: {
    reloadTable(){
      this.$refs.innerTable.doLayout();
    },
    search() {
      this.searchParams.current = 1
      this.getList()
    },
    async getList() {
      this.loading = true
      let {total, current, size} = this.searchParams;
      //为处理 % 防止注入--此处处理
      let row = {...this.defaultParams}
      row = escapePercent(row);

      let searchParams = {
        ...row,
        total: total,
        pageNum: current,
        pageSize: size,
      }
      if (this.list) {
        try {
          const {rows, total} = await this.list(searchParams)
          this.modalData = this.formatter(rows, searchParams)
          this.searchParams.total = Number(total);
          this.$emit('search', searchParams)
        } finally {
          this.loading = false
        }
      } else {
        this.loading = false
      }
    },
    //sortChange
    sortChange({column, prop, order}) {
      this.$emit('sortChange', {column, prop, order})
    },
    handleSelectionChange(val) {
      this.selections = val
      this.$emit('handleSelectionChange', val)
    },
    rowClick(row) {
      this.$emit('rowClick', row)
    },
    cellStyle(data) {
      if (data.columnIndex != null) {
        return "cursor:pointer;"
      }
    },
    toggleRowSelection(row, selected) {
      this.$refs.innerTable.toggleRowSelection(row, selected)
    },
    clearModalData() {
      this.modalData = [];
      this.searchParams = {
        total: 0,
        current: 1,
        size: 10,
      }
    },


    cellMouseEnter(row, column, cell, event) {
      this.$emit('cellMouseEnter', row,column,cell,event)
    },
    async remove(action) {
      await this.$confirm('是否确认删除选中的数据项？', '删除')
      const {code} = await action()
      if (code === 200) {
        this.$message.success('删除成功')
        this.getList()
      }
    },
  }
}
</script>

<style>
.el-switch.is-checked .el-switch__core {
  border-color: #DE9314;
  background-color: #DE9314;
}

.query_form {
  padding: 0px !important;
}

.el-card__body {
  padding-top: 16px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-bottom: 16px;
}

.page-table {
  margin-top: 16px !important;
  border: 0 !important;
}

.page-table2 {
  margin-top: 0px !important;
  border: 0 !important;
}

.page-table .el-link {
  margin-left: 5px;
  margin-right: 5px;
}

.search-form.el-form--inline .el-form-item {
  margin-bottom: 10px !important;
}

.custom-card .el-card__body {
  padding-bottom: 10px !important;
}

.el-form-item--small.el-form-item {
  margin-bottom: 16px !important;
}

/* striped先开启斑马纹属性，这里是修改斑马纹颜色 */
/*.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {*/
/*background: #FAFBFF !important;*/
/*}*/

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #FAFBFF;
}

.el-table__body tr.hover-row > td {
  background-color: rgb(243, 244, 251) !important;
}

/*.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {*/
/*background-color: rgb(243, 244, 251) !important;*/
/*}*/

/*.el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,*/
/*.el-table__body tr.hover-row > td.el-table__cell {*/
/*background-color: rgb(243, 244, 251) !important;*/
/*}*/

.svg-icon {
  vertical-align: -0.2em;
}

.el-table::before {
  height: 0px !important;
}

.el-table__fixed-right::before {
  height: 0px !important;
}

.el-table .frozen-row {
  background-color: #f79192;
}

.el-table .warning-row {
  background-color: #fbf7ab;
}
</style>

<style scoped>
::v-deep .el-button {
  margin-right: 10px;
  margin-top: 2px;
  margin-buttom: 2px;
}

::v-deep .el-button + .el-button {
  margin-left: 0px;
}
</style>



