<!--表格组件 -->
<template>
<section class="ces-table-page">
  <!-- 表格操作按钮 -->
    <section class="ces-handle" v-if='isHandle'>
      <el-button
        v-for='item in tableHandles'
        :key='item.label'
        :size="size || item.size"
        :type="item.type"
        :icon='item.icon'
        @click="item.handle(that)">{{item.label}}</el-button>
    </section>
    <!-- 数据表格 -->
    <section :class="isPagination?'ces-table':'ces-table1'">
        <el-table :id='tableId' :height="'100%'" :data='tableData' :size='size'
          ref='refTable'
          max-height="100%"
          :border ='isBorder'
          :stripe ='isStripe'
          :highlight-current-row = 'isHighlight'
          :row-style="isRowStyle?rowStyle:rowStyle1"
          @select='select'
          @select-all='selectAll'
          @current-change="chooseTable"
          v-loading='loading'
          :defaultSelections='defaultSelections'
          >
            <el-table-column v-if="isSelection" type="selection" align="center"></el-table-column>
            <el-table-column v-if="isIndex" type="index" :label="indexLabel" align="center" width="50"></el-table-column>
            <!-- 数据栏 -->
            <template  v-for="(item,index) in tableCols">
              <el-table-column
                :key="index"
                v-if="item.isShow==='show'||!item.isShow"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :align="item.align"
                :render-header="item.require?renderHeader:null"
                >
                  <template slot-scope="scope" >
                    <!-- html -->
                    <span v-if="item.type==='html'" v-html="item.html(scope.row)" class="html"></span>
                    <!-- 按钮 -->
                    <span v-if="item.type==='button'" >
                      <el-button v-for="btn in item.btnList" :key="btn.label"
                        :disabled="btn.disabled && btn.disabled(scope.row)"
                        :type="btn.type"
                        :size="size || btn.size"
                        :icon="btn.icon"
                        @click="btn.handle(that,scope.row)">{{btn.label}}</el-button>
                      </span>
                    <!-- 输入框 -->
                    <el-input v-if="item.type==='input'" v-model="scope.row[item.prop]" :size="size || btn.size"
                      :disabled="item.isDisabled && item.isDisabled(scope.row)"
                      @focus="item.focus && item.focus(scope.row)"></el-input>
                    <!-- 下拉框 -->
                    <el-select v-if="item.type==='select'" v-model="scope.row[item.prop]" :size="size || btn.size"  :props="item.props"
                      :disabled="item.isDisabled && item.isDisabled(scope.row)"
                      @change='item.change && item.change(that,scope.row)'>
                        <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"></el-option>
                    </el-select>
                    <!-- 单选 -->
                    <el-radio-group v-if="item.type==='radio'" v-model="scope.row[item.prop]"
                      :disabled="item.isDisabled && item.isDisabled(scope.row)" :size="size || btn.size"
                      @change='item.change && item.change(that,scope.row)'>
                        <el-radio v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio>
                    </el-radio-group>
                    <!-- 复选框 -->
                    <el-checkbox-group v-if="item.type==='checkbox'" v-model="scope.row[item.prop]"
                      :disabled="item.isDisabled && item.isDisabled(scope.row)" :size="size || btn.size"
                      @change='item.change && item.change(that,scope.row)'>
                        <el-checkbox v-for="ra in item.checkboxs" :label="ra.value" :key='ra.value'>{{ra.label}}</el-checkbox>
                    </el-checkbox-group>
                    <!-- 评价 -->
                    <el-rate v-if="item.type==='rate'" v-model="scope.row[item.prop]"
                      :disabled="item.isDisabled && item.isDisabled(scope.row)" :size="size || btn.size"
                      @change='item.change && item.change(scope.row)'></el-rate>
                    <!-- 开关 -->
                    <el-switch v-if="item.type==='switch'" v-model="scope.row[item.prop]" :size="size || btn.size"
                      :active-value='item.values&&item.values[0]'
                      :inactive-value='item.values&&item.values[1]'
                      :disabled="item.isDisabled && item.isDisabled(scope.row)"
                      @change='item.change && item.change(scope.row)'></el-switch>
                    <!-- 图像 -->
                    <img v-if="item.type==='image'" :src="scope.row[item.prop]" @click="item.handle && item.handle(scope.row)"/>
                    <!-- 滑块 -->
                    <el-slider v-if="item.type==='slider'" v-model="scope.row[item.prop]"
                    :disabled="item.isDisabled && item.isDisabled(scope.row)" :size="size || btn.size"
                      @change='item.change && item.change(scope.row)'></el-slider>
                    <!-- 默认 -->
                    <span v-if="!item.type"
                      :style="item.itemStyle && item.itemStyle(scope.row)" :size="size || btn.size"
                      :class="item.itemClass && item.item.itemClass(scope.row)">{{(item.formatter && item.formatter(scope.row)) || scope.row[item.prop]}}</span>
                  </template>
              </el-table-column>
            </template>
        </el-table>
    </section>
    <!-- 分页 -->
    <section class="ces-pagination"  v-if='isPagination'>
        <el-pagination style='display:flex;flex-direction:row;margin-top:10px;justify-content : flex-end;'
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            background
            layout="total ,prev, pager, next"
            :page-size="tablePage.pageSize"
            :current-page="tablePage.pageNum"
            :total="tablePage.total"
        ></el-pagination>
    </section>
</section>
</template>

<script>

export default {
  name:"WTable",
  props: {
    that: { type: Object, default: this },
    // 表格型号：mini,medium,small
    size: {type: String, default: 'medium'},
    refTable: {type: String, default: 'cesTable'},
    isBorder: {type: Boolean, default: true},
    isStripe: {type: Boolean, default: false},
    isRowStyle: {type: Boolean, default: false},
    isHighlight: {type: Boolean, default: true},
    loading: {type: Boolean, default: false},
    // 表格操作
    isHandle: {type: Boolean, default: false},
    tableHandles: {type: Array, default: () => []},
    // 表格数据
    // eslint-disable-next-line standard/object-curly-even-spacing
    tableData: { type: Array, default: () => []},
    tableId: {type: String, default: ''},
    // 表格列配置
    // eslint-disable-next-line standard/object-curly-even-spacing
    tableCols: { type: Array, default: () => []},
    // 是否显示表格复选框
    isSelection: {type: Boolean, default: false},
    // eslint-disable-next-line standard/object-curly-even-spacing
    defaultSelections: { type: [Array, Object], default: () => null},
    // 是否显示表格索引
    isIndex: {type: Boolean, default: false},
    indexLabel: {type: String, default: '序号'},
    // 是否显示分页
    isPagination: {type: Boolean, default: true},
    // 分页数据
    // eslint-disable-next-line standard/object-curly-even-spacing
    tablePage: { type: Object, default: () => ({pageSize: 10, pageNum: 1, total: 0})}
  },
  data() {
    return {
      isShow: true
    }
  },
  watch: {
    'defaultSelections'(val) {
      this.$nextTick(function() {
        if (Array.isArray(val)) {
          val.forEach(row => {
            this.$refs.cesTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.cesTable.toggleRowSelection(val)
        }
      })
    },
    tableData: {
      handler(newValue, oldValue) {
        if (this.isHighlight) {
          if (newValue.length > 0) {
            this.$refs.refTable.setCurrentRow(this.tableData[0])
          }
        }
      },
      deep: true
    }
  },
  methods: {
    // 表格选中
    chooseTable(row) {
      this.$emit('selectRow', row)
    },
    // 表格勾选
    select(rows, row) {
      this.$emit('select', rows, row)
    },
    // 全选
    selectAll(rows) {
      this.$emit('select', rows)
    },
    // 颜色样式
    rowStyle({row, rowIndex}) {
    //修改样式（我这里根据不同的状态显示不同的背景色）
      if (row.status) {
        return 'background:' + (row.status === 'CRETE' ? 'rgba(241, 37, 37, 0.1);' : (row.status === 'LOADING' ? 'rgba(229, 232, 20, 0.1)' : (row.status === 'COMPLETE' ? 'rgb(192, 196, 204, 0.1)' : '')))
      } else if (row.actionResult) {
        return 'background:' + (row.actionResult === 'OFFLINE' ? 'rgba(241, 37, 37, 0.1);' : (row.actionResult === 'ONLINE' ? 'rgba(33, 232, 20, 0.1)' : ''))
      }
    },
    rowStyle1() {},
    //
    handleCurrentChange(val) {
      this.tablePage.pageNum = val
      this.$emit('refresh')
    },
    handleSizeChange(val) {
      this.tablePage.pageNum = 1
      this.tablePage.pageSize = val
      this.$emit('refresh')
    },

    // tableRowClassName({rowIndex}) {
    //     if (rowIndex % 2 === 0) {
    //         return "stripe-row";
    //     }
    //     return "";
    // }
    renderHeader(h, obj) {
      return h('span', {class: 'ces-table-require'}, obj.column.label)
    }
  },
  mounted() {
    if (this.tableData.length) {
      this.$refs.refTable.setCurrentRow(this.tableData[0])
    }
  }
}
</script>
<style>
.ces-table-require::before{
  content:'*';
  color:red;
}
.ces-table{
  min-height: calc(150px - 50px);
  max-height:calc(100% - 50px);
  flex:1;
}
.ces-table1{
  min-height: 100px;
  max-height:100%;
  flex:1;
}
.newComponents .el-table--scrollable-y .el-table__body-wrapper{
  /* max-height: 100% !important; */
  overflow: auto;
}
</style>
