<template>
  <div ref="page">
    <div id="conditionBox" ref="conditionBox">
      <el-form :model="condition" label-width="100px">
        <el-row class="search-box">
          <slot name="condition" :condition="condition"/>
          <el-col v-if="!hiddenCondition" :span="6">
            <el-form-item label-width="20px">
              <el-button type="primary" @click="getPage">查 询</el-button>
              <el-button v-if="moreCondition" @click="clickCondition">
                {{ isShowMoreCondition ? '收起' : '更多' }}
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <transition
          @before-enter="autoComputeTableHeight"
          @after-enter="autoComputeTableHeight"
          @after-leave="autoComputeTableHeight"
        >
          <div v-if="isShowMoreCondition">
            <slot name="moreCondition" :condition="condition"/>
          </div>
        </transition>
      </el-form>
    </div>
    <el-table
      v-loading="loading"
      :data="tableData"
      :height="height"
      border
      @select="onSelect"
      @select-all="onSelectAll"
      @selectable="onSelectable"
      @row-click="onRowClick"
      @cell-click="cellClick"
      @cell-dblclick="onCellDblclick"
    >
      <slot/>
    </el-table>
    <el-row ref="footerBox" class="footer-box">
      <el-col v-if="!hiddenOperateButton" :span="10">
        <slot name="operateButton"/>
        <el-button v-if="exportUrl" type="primary" @click="handleExport">导出Excel</el-button>
        <excel-import
          v-if="importUrl"
          custom-button
          :class-name="importClassName"
          :url="importUrl"
          :template-name="importTemplateName"
        >
          <template v-slot:button="{handleClick}">
            <el-button type="primary" @click="handleClick">导入Excel</el-button>
          </template>
        </excel-import>
      </el-col>
      <el-col :span="14" style="text-align: right">
        <pagination
          :total="pagination.total"
          :page.sync="pagination.current"
          :limit.sync="pagination.size"
          @pagination="getPage"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>

import Pagination from '../Pagination'
import request from '../../utils/request'
import { downloadFile } from '../../utils/file'
import ExcelImport from '../ExcelImport'
import format from '../../utils/formatter'

export default {
  name: 'PageTable',
  components: { ExcelImport, Pagination },
  props: {
    url: {
      type: String,
      required: true
    },
    exportUrl: String,
    importUrl: String,
    importTemplateName: String,
    importClassName: String,
    hiddenOperateButton: Boolean,
    hiddenCondition: Boolean,
    moreCondition: Boolean, // 是否多条件
    params: Object,
    createRequest: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      format: format,
      showEdit: false,
      showResetPassword: false,
      loading: false,
      isShowMoreCondition: false,
      height: window.innerHeight - 185,
      // 分页
      pagination: {
        total: 0,
        size: 20,
        current: 1
      },

      condition: {},
      tableData: []
    }
  },
  created() {
    if (this.createRequest) {
      this.getPage()
    }
  },
  mounted() {
    this.autoComputeTableHeight()
  },
  methods: {

    getPage() {
      const condition = this.condition
      if (this.params != null) {
        for (let key in this.params) {
          condition[key] = this.params[key]
        }
      }
      this.loading = true
      console.log(this.url);
      request({
        url: this.url,
        method: 'post',
        data: { condition: condition, pagination: this.pagination }
      }).then((response) => {
        const { current, total, size, records } = response.data
        this.tableData = records
        this.pagination.total = total
        this.pagination.current = current
        this.pagination.size = size
      }).finally(() => {
        this.loading = false
      })
    },
    onSelect(select) {
      this.$emit('select', select)
    },
    onSelectAll(select) {
      this.$emit('selectAll', select)
    },
    onSelectable(row, index) {
      this.$emit('selectable', row, index)
    },
    onRowClick(row, column) {
      this.$emit('row-click', row, column)
    },
    cellClick(row, column, cell, event) {
      this.$emit('cell-click', row, column, cell, event)
    },
    onCellDblclick(row, column, cell, event) {
      this.$emit('cell-dblclick', row, column, cell, event)
    },
    handleExport() {
      return request({
        url: this.exportUrl,
        method: 'post',
        responseType: 'blob',
        data: { condition: this.condition }
      }).then(response => {
        downloadFile(response)
      })
    },
    clearCondition() {
      for (let key in this.condition) {
        this.condition[key] = null
      }
    },
    clickCondition() {
      this.isShowMoreCondition = !this.isShowMoreCondition
    },
    // 自动计算表格高度
    autoComputeTableHeight() {
      let pageY = this.$refs.page.getBoundingClientRect().y
      let footerBoxHeight = this.$refs.footerBox.$el.clientHeight
      let conditionBoxHeight = this.$refs.conditionBox.clientHeight
      let offset = 11
      this.height = window.innerHeight - pageY - footerBoxHeight - conditionBoxHeight - offset
    },
  }

}
</script>

<style>
#popover .el-popover {
  right: 10px;
}
</style>
