<!--author: luoshuo-->
<template>
  <div class="el-table-self">
    <el-table id="form1"
      @row-click="rowClick"
      :data="tableData"
      :height="tableHeight"
      @sort-change="sortChange"
      @select="select"
      @select-all="selectAll"
      :summary-method="summaryMethod"
      :show-summary="showSummary"
      @header-click="headerClick"
      @cell-dblclick="celldbClick"
      border
      @expand="handleExpand"
      @selection-change="selectionChange"
      :default-sort = "defaultSort"
      style="width: 100%;">
      <el-table-column v-if="checkBox" type="selection">
      </el-table-column>
      <!-- <el-table-column v-if="checkBox&&columnType==='expand'" :type="columnType" width="55">
      </el-table-column> -->
      <el-table-column
        v-for="column in columns"
        :fixed="column.fixed"
        :prop="column.value"
        :label="column.label"
        :key="column.value"
        :width="column.width"
        :sortable="column.sortable"
        :formatter="column.formatter"
        :align="column.align"
        :class-name="column.className">
        <template scope="scope">
          <div v-if="column.editable">
            <div v-if="column.type === 'input'">
              <el-input v-show="scope.row.editable" size="small" v-model="scope.row[column.value]" icon="close" :on-icon-click="function(){scope.row[column.value] = ''}" @change="column.change(scope.$index, scope.row)"></el-input>
              <span v-show="!scope.row.editable">{{ scope.row[column.value] }}</span>
            </div>
            <div v-if="column.type === 'number'">
              <el-input-number v-show="scope.row.editable" size="small" v-model="scope.row[column.value]" @change="column.change(scope.$index, scope.row)"></el-input-number>
              <span v-show="!scope.row.editable">{{ scope.row[column.value] }}</span>
            </div>
            <div v-if="column.type === 'datetime'">
              <el-date-picker v-show="scope.row.editable" v-model="scope.row[column.value]" type="date" placeholder="选择日期"> </el-date-picker>
              <span v-show="!scope.row.editable">{{ scope.row[column.value] }}</span>
            </div>
            <div v-if="column.type === 'checkbox'">
              <el-checkbox v-model="scope.row[column.value]" > </el-checkbox>
            </div>
            <div v-if="column.type === 'select'">
              <el-select :style="column.style" v-model="scope.row[column.value]" placeholder="请选择">
                <el-option
                  v-for="item in column.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div v-if="column.type === 'icon'" @click="changeIcon(scope.$index, scope.row, iconArr, column.value)">
              <i :class="iconArr[scope.row[column.value]]"></i>
            </div>
          </div>
          <div v-else>
             <span>{{ scope.row[column.value] }}</span>
          </div>

        </template>
      </el-table-column>
      <el-table-column
        v-if="btnMode&&btns!==undefined"
        :fixed="btns.fixed"
        :prop="btns.value"
        :label="btns.label"
        :key="btns.value"
        :width="btns.width"
        :sortable="btns.sortable"
        :formatter="btns.formatter"
        :class-name="btns.className">
        <template scope="scope">
          <el-button :disabled="btn.visible" :key="btn.value" @click="btn.functionName(scope.$index, scope.row)" v-for="btn in btns.btnArr" :type="btn.type" size="small" :icon="btn.icon">
            {{btn.label}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-footer">
      <!-- <span style="padding-top:10px"><el-button v-show="isExport" @click="export2Excel">导出</el-button></span> -->
      <span class="description">{{description}}</span>
      <el-pagination
        v-show="hasPagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="tpageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default{
  data () {
    return {
      isExport: true,
      clientHeight: '600px',
      tableHeight: '',  // 分页列表的高度
      checkBox: false, // 复选框
      btnMode: false, // 按钮
//      page: 1,
      tpageSize: this.pageSize
    }
  },
  props: {
    rowClick: { // 单击行事件
      type: Function,
      default: function () {
      }
    },
    select: { // 当用户手动勾选数据行的 Checkbox 时触发的事件
      type: Function,
      default: function () {
      }
    },
    selectAll: { // 当用户手动勾选全选 Checkbox 时触发的事件
      type: Function,
      default: function () {
      }
    },
    tableData: Array,    // 表格数据
    columns: Array,      // 表格列配置数据,{vlaue:对应数据对象中的属性，label：对应的是标题文字，className：对应的是列的样式类名}
    totalCount: Number,  // 表格数据总数
    pageSizes: Array,    // 决定每页显示的条数[10,15,20,25]
    // checkBox: Boolean,  // 决定是否有列的类型
    tableType: String, // 表格类型 1.纯数据 表格；2.带复选框表格；3.带按钮表格；4.带复选框、按钮表格
    description: String, // 分页脚底左侧的数据说明
    // btnMode: Boolean, // 列是否使用按钮
    btns: Object, // 按钮对象
    pageSize: Number, // 每页条数
    currentPage: Number, // 当前页码
    sortChange: { // 用户点击列表头进行排序 { column, prop, order }
      type: Function,
      default: function () {
      }
    },
    queryData: { // 分页查询数据
      type: Function,
      default: function () {
      }
    },
    defaultSort: Object, // 表格默认排序
    sortable: Boolean, // 列是否需要排序，true || false
    summaryMethod: { // 汇总方法
      type: Function,
      default: function () {
      }
    },
    showSummary: Boolean, // 是否显示汇总
    headerClick: { // 列点击方法
      type: Function,
      default: function () {
      }
    },
    celldbClick: { // 单元格点击方法
      type: Function,
      default: function () {
      }
    },
    iconArr: { // 图标数组
      type: Array,
      default: function () {
        return ['el-icon-close', 'el-icon-upload', 'el-icon-edit']
      }
    },
    changeIcon: { // 切换图标事件
      type: Function,
      default: function () {
      }
    },
    hasPagination: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    pageSize: 'changeSize'
  },
  methods: {
    changeSize: function () {
      this._data.tpageSize = this.pageSize
      this._data.page = this.currentPage
    },
    handleSizeChange: function (size) {
      this.tpageSize = size
      this.$parent.currentPage = 1
      this.queryData(1, this.tpageSize)
    },
    handleCurrentChange: function (currentPage) {
      this.$parent.currentPage = currentPage
      this.queryData(currentPage, this.tpageSize)
    },
    selectionChange: function (selections) {
      this.$emit('selectionChange', selections)
    },
    handleExpand (row, expanded) {
      // console.log(row, expanded)
    },
    exportExcel () {
      return this.export2Excel()
    },
    export2Excel () {
      require.ensure([], () => {
        const { export_json_to_excel } = require('vendor/Export2Excel')
        const tHeader = this.columns.map(item => item.label)
        const filterVal = this.columns.map(item => item.value)
        const list = this.tableData
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, '导出excel')
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
    // changeIcon (index, item) {
    //   let length = this.iconArr.length
    //   let idx = item.icon + 1
    //   if (idx === length) {
    //     item.icon = 0
    //   } else {
    //     item.icon = idx
    //   }
    // }
  },
  mounted () {
    this.$nextTick(() => {
      this.tableData.map(v => {
        this.$set(v, 'editable', false)
        return v
      })
      if (document.body.scrollHeight < 500) {
        this.tableHeight = 500
      } else {
        this.tableHeight = document.body.scrollHeight - 250
      }
      if (this.tableType === '2') { // 如果是复选框模式
        this.checkBox = true // 显示复选框
        this.btnMode = false // 取消按钮
      } else if (this.tableType === '3') { // 如果是按钮模式
        this.btnMode = true
        this.checkBox = false
      } else if (this.tableType === '4') { // 如果是复选框+按钮模式
        this.checkBox = true
        this.btnMode = true
      } else { // 如果是单表格
        this.tableType = '1'
        this.btnMode = false // 取消按钮
        this.checkBox = false // 取消复选框
      }
      window.onresize = function temp () {
        if (document.body.scrollHeight < 500) {
          this.tableHeight = 500
        } else {
          this.tableHeight = document.body.scrollHeight - 250
        }
      }
    })
    // 动态设置背景图的高度为浏览器可视区域高度

    // 首先在Virtual DOM渲染数据时，设置下背景图的高度．
    // this.clientHeight.height = `${document.documentElement.clientHeight}px`
    // 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
    // const that = this
    // that.clientHeight = document.body.scrollHeight
    // console.log(this.clientHeight)
    // this.tableHeight = this.clientHeight

    // console.log('页面加载方法')
  },
  updated () {
    // console.log('this.currentPage', this.currentPage)
  }
}

</script>
<style>
  .el-table-self{
    /*margin-left:16px;*/
    /*margin-right:16px;*/
    height:100%;
  }
  .pagination-footer {
    display: inline-block;
    width: 100%;
  }
  .pagination-footer .description{
    float:left;
    margin-left:20px;
    margin-top:12px;
  }
  .pagination-footer .el-pagination{
    float:right;
    margin-top:8px;
    margin-bottom:8px;

  }

  .el-table__empty-block {
    position: relative;
    min-height: 60px;
    text-align: center;
    width: 100%;
    height: 100%;

  }
  .el-table td, .el-table th {
    /*height: 30px;*/
    min-width: 0;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
  .el-table__empty-text {
    position: absolute;
    left: 50%;
    width: 110px;
    height: 110px;
    top: 50%;
    line-height:220px;
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    color: #5e7382;
    /* background-image: url(../../resource/images/null-data.png); */
    background-position: center center;
    background-repeat: no-repeat;
    background-size:cover;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }


</style>
