<template>
  <div style="height:100%">
        <div v-if="showRunSearchBar" class="search-content">
            <!-- <div :style="{width:`calc(100% - ${btnWrapClientWidth}px)`}">
                <slot name="headerSearch"></slot>
            </div> -->
            <div>
                <slot name="headerSearch"></slot>
            </div>
            <div class="btn-group-wrap" ref="btnWrap">
              <el-button v-if="btnTextArray.includes('查询')" type="primary"
									size="mini"
									@click="handleQuery">查&nbsp;询</el-button>
									<el-button type="primary"
									size="mini"
									@click="resetClick" v-if="btnTextArray.includes('重置')">重&nbsp;置</el-button>
									<el-button type="primary"
									size="mini"
									@click="exportData" style="margin-left: 12px;" v-if="btnTextArray.includes('导出数据')">导出数据</el-button>
            </div>
            <div>
                <slot name="footerSearch"></slot>
            </div>
        </div>
        <div v-else>
          <slot name="selfSlot"></slot>
        </div>
        <div class="container" :style="heightWrap" v-if="contentH">
            <el-table :data="tableData" size="small"
                :height="height"
                element-loading-text="数据加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                style="width: 100%"
                v-loading="tableLoading"
                :header-row-style="headerRowStyle"
                :header-cell-style="headerCellStyle"
                @cell-click='handleCellClick'
            >
            <el-table-column label="序号"
                         v-if="indexVis"
                         :index="indexMethod"
                         type='index'
                         align="center"
                         width="100">
            </el-table-column>
            <el-table-column v-for="(th, key) in tableHeader"
                            :key="key"
                            :prop="th.prop"
                            :type="th.type"
                            :label="th.label"
                            :show-overflow-tooltip="true"
                            :align="th.align"
                            :fixed="th.fixed"
                            :class-name='th.class ? th.class : ""'
                            :min-width="th['min-width']">
                <template slot-scope="scope">
                    <ex-slot v-if="th.render" :render="th.render" :row="scope.row" :index="scope.$index" :column="th" />
                    <span v-else>{{ (scope.row[th.prop] || scope.row[th.prop] == 0) ?  scope.row[th.prop] : '-'}}</span>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-wrapper" v-if="showPagination && tableData.length > 0 && contentH">
          <el-pagination background layout="total,prev, pager, next" :page-size="searchObj.pageSize" :current-page="curPage" :total="paginationTotal" @current-change="currentChange"></el-pagination>
        </div>
        </div>
  </div>
</template>

<script>
// 自定义内容的组件
var exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },
  render: (h, data) => {
    const params = {
      row: data.props.row,
      index: data.props.index
    }
    if (data.props.column) params.column = data.props.column
    return data.props.render(h, params)
  }
}
export default {
  data() {
    return {
      btnWrapClientWidth: 0,
      contentH: true,
      curPage: 1
    }
  },
  components: {
    exSlot
  },
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    },
    btnTextArray: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 表头数据
    tableHeader: {
      type: Array,
      default: function() {
        return []
      }
    },
    height: {
      type: String,
      default: function() {
        return '430px'
      }
    },
    headerRowStyle: {
      type: Object,
      default: function() {
        return {
          backgroundColor: 'rgb(51, 153, 255, 0.3)', height: '36px'
        }
      }
    },
    headerCellStyle: {
      type: Object,
      default: function() {
        return {
          padding: '6px 0'
        }
      }
    },
    heightWrap: {
      type: Object,
      default: function() {
        return { height: '100%' }
      }
    },
    showRunSearchBar: {
      type: Boolean,
      default: function() {
        return true
      }
    },
    tableLoading: {
      type: Boolean,
      default: function() {
        return false
      }
    },
    showPagination: {
      type: Boolean,
      default: function() {
        return false
      }
    },
    indexVis: {
      type: Boolean,
      default: function() {
        return true
      }
    },
    searchObj: {
      type: Object,
      default: function() {
        return {
        }
      }
    },
    searchObjInit: {
      type: Object,
      default: function() {
        return {
        }
      }
    },
    paginationTotal: {
      type: [String, Number],
      default: function() {
        return 0
      }
    }
  },
  methods: {
    handleQuery() {
      this.curPage = 1
      this.searchObj.page = 1
      this.$emit('handleQuery')
    },
    resetClick() {
      // Object.assign(this.$data.searchObj, this.$options.data().searchObj)
      this.$emit('update:searchObj', this.searchObjInit)
    },
    indexMethod(index) {
      // return (this.curPage - 1) * 10 + index + 1
      return index + 1
    },
    exportData() {
      this.$emit('exportData')
    },
    currentChange(page) {
      this.curPage = page
      this.$emit('currentChange', page)
    },
    handleCellClick(row, column, cell, event) {
      this.$emit('cell-click', { row, column, cell, event })
    }
  },
  mounted() {
    this.curPage = 1
    this.$nextTick(vm => {
      // this.btnWrapClientWidth = this.$refs.btnWrap.offsetWidth;
    })
  },
  watch: {
    tableData: {
      handler(val, oldVal) {
        if(val.length > 0 && oldVal.length === 0) {
          this.contentH = false
          this.$nextTick(() => {
            this.contentH = true
            this.curPage = 1
          })
        }
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="less">
    .container{
        // min-height: 500px;
        border: 1px solid rgba(51, 153, 255, 0.4);
    }
    .search-content{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        margin-bottom: 17px;
        .header-wrap{
          display: flex;
          flex-direction: row;
          //justify-content: space-between;
          justify-content: flex-start;
          margin-right: 12px;
            .el-input__inner{
              background-color: transparent;
              border: 1px solid rgba(16, 220, 250, 0.4);
              color: #fff;
            }
            /deep/	.el-input__inner:focus{
              opacity: 1;
            }
            .el-select{
                vertical-align: top;
              /deep/	.el-input{
                width: 160px;
                .el-input__inner{
                  height: 36px;
                  line-height: 36px;
                  background-color: transparent;
                  color: #fff;
                  border: 1px solid rgba(16, 220, 250, 0.4);
                }
              }
            }
            .el-input{
              width: 200px;
              height: 36px;
              font-size: 14px;
              color: #fff;
              vertical-align: top;
              /deep/	.el-input__inner{
                  line-height: 36px;
                  height: 36px;
                  background-color: transparent;
                  border: 1px solid rgba(16, 220, 250, 0.4);
                  color: #fff;
                }
                /deep/	.el-input__inner:focus{
                  opacity: 1;
                  color: #fff;
                }
            }
            /deep/ .el-select-dropdown__item{
              border-bottom: 1px solid rgba(68,138,202,1);
              color: #fff;
            }
            /deep/ .el-select-dropdown__item:hover{
              background:rgba(0,255,255,0.1);
              color: #fff;
            }
            /deep/ .el-select-dropdown__item.hover{
              background:rgba(0,255,255,0.1);
              color: #fff;
            }
            /deep/ .el-select-dropdown__item.selected{
              font-weight:normal;
              color:#00C6FF;
            }
            /deep/ .el-cascader{
              .el-input__inner{
                border: 1px solid rgba(16, 220, 250, 0.4);
                background-color: transparent;
                height: 36px;
              }
              .el-input__inner:hover{
                border: 1px solid rgba(16, 220, 250, 0.4);
                background-color: transparent;
              }
              .el-input__inner:focus{
                border: 1px solid rgba(16, 220, 250, 0.4);
                background-color: transparent;
              }
            }
            /deep/ .el-cascader__tags{
              height: 28px;
              overflow-y: auto;
              overflow-x:hidden;
            }
            /deep/ .el-cascader:not(.is-disabled):hover .el-input__inner{
              border-color: rgba(16, 220, 250, 0.4);
            }
        }
    }
    .btn-group-wrap{
      display: inline-block;
      vertical-align: top;
      white-space: nowrap;
      .el-button--mini, .el-button--mini.is-round{
          padding: 11px 12px;
      }
      .el-button--primary{
          background: rgba(5, 35, 76, 0.2);
          border-radius: 4px;
          border: 1px solid  rgba(255, 255, 255, 0.4);
      }
      .el-button--primary:hover{
          color: #10DCFA;
          border: 1px solid  #10DCFA;
      }
      .el-button+.el-button{
          margin-left: 6px;
      }
  }
  .pagination-wrapper {
    height: 36px;
    margin-top: 10px;
    /deep/ .el-pagination {
      text-align: right;
      .btn-prev,
      .btn-next {
        width: 32px;
        height: 32px;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 2px;
        padding: 0;
        min-width: 0;
        //background: #092549;
        color: #8391a2;
        &:not([disabled]):hover {
          background: #2395f3;
          color: #ffffff;
        }
      }
      .btn-prev {
        margin-right: 10px;
      }
      .btn-next{
        margin-left: 10px;
      }
      .el-pager {
        li {
          min-width: 32px;
          height: 32px;
          background: rgba(255, 255, 255, 0.25);
          border-radius: 2px;
          margin-right: 6px;
          line-height: 32px;
          color: #ffffff;
          &:hover,
          &.active {
            background: #027AF4;
            color: #ffffff;
          }
        }
      }
    }
  }
</style>