<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2018-08-13 20:18:10
 * @LastEditTime: 2019-11-01 19:19:47
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="zte-table-local">
    <div class="content-body" v-if="Object.keys(buttonList).length || $slots.content">
      <el-button v-if="buttonList.add" @click.native="handlerAddRow">{{$t('新增')}}</el-button>
      <el-button v-if="buttonList.del" @click.native="handlerDeleteRow">{{$t('删除')}}</el-button>
      <Throttle :time="1000" events="click" v-if="buttonList.enable">
        <el-button  @click.native="handlerSwitch('enable')">{{$t('启用')}}</el-button>
      </Throttle>
      <Throttle :time="1000" events="click" v-if="buttonList.disable">
        <el-button @click.native="handlerSwitch('disable')">{{$t('禁用')}}</el-button>
      </Throttle>
      <slot name="content"></slot>
    </div>
    <div class="table-body">
      <el-table
        ref="table"
        :size="size"
        :data="currentData"
        stripe
        :border="border"
        highlight-current-row
        :height="height"
        style="width: 100%;"
        :row-key="rowKey"
        :row-class-name="rowClassName"
        v-bind="$attrs"
        v-on="$listeners"
        @current-change="handlerRowSelect"
        @row-dblclick="handleDBclick"
        @selection-change="handlerRowCheck">
        <el-table-column
          v-if="indexStyle === 'selection'"
          type="selection"
          :reserve-selection='!!rowKey'
          width="55">
        </el-table-column>
        <el-table-column
          :label="$t('序号')"
          type="index"
          width="55"
        >
        </el-table-column>
        <el-table-column
          v-for="column of tableColumn"
          :key="column.code"
          :class-name="column.code"
          :prop="column.code"
          :label="$t(column.label)"
          :width="column.width"
          :fixed="column.fixed"
          :show-overflow-tooltip="column.tips">
          <template slot-scope="scope">
            <slot
              v-if="column.temp"
              class="temp-column"
              :name="column.code"
              :row="scope.row"
              :column="scope.column"
              :$index="isPagination ? realSize(scope.$index) : scope.$index">
            </slot>
            <template v-else>{{scope.row[column.code]}}</template>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="isPagination"
        background
        layout="total, prev, pager, next"
        :current-page="pageNum"
        :page-size="pageSize"
        :total="totalSize"
        @current-change="handlerPageChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import zteItem from './zte-item';

export default {
  name: 'zteTableLocal',
  components: {
    zteItem,
  },
  props: {
    tableColumn: {
      type: Array,
      default: () => ([]),
    },
    tableData: {
      type: Array,
      default: () => ([]),
    },
    indexStyle: {
      type: String,
      default: 'index',
    },
    rowKey: {
      type: [String, Function],
    },
    labelWidth: {
      type: Number,
      default: 100,
    },
    buttonList: {
      type: Object,
      default: () => ({}),
    },
    isPagination: {
      type: Boolean,
      default: false,
    },
    height: {
      type: String,
    },
    border: {
      type: Boolean,
      default: false,
    },
    size: {
      type:String,
      default: 'small',
    },
    rowClassName: Function,
  },
  data() {
    return {
      selectionRows: [],
      pageNum: 1,
      pageSize: 5,
    };
  },
  computed: {
    totalSize() {
      return this.tableData.length;
    },
    currentData() {
      const data = this.isPagination
        ? this.tableData.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize)
        : this.tableData;
      return data;
    },
  },
  watch: {
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handlerPageChange(currentPage) {
      this.pageNum = currentPage;
    },
    handlerRowSelect(currentRow) {
      this.$emit('row-select', currentRow);
    },
    handleDBclick(row) {
      this.$emit('dblclick', row);
    },
    handlerRowCheck(selection) {
      this.selectionRows = selection;
      this.$emit('row-check', selection);
    },
    handlerAddRow() {
      this.$emit('add-row');
    },
    handlerDeleteRow() {
      if (!this.selectionRows.length) {
        this.$message.warning(this.$t('请选择一条数据'));
        return;
      }
      this.$emit('delete-row', this.selectionRows);
    },
    handlerSwitch(type) {
      if (!this.selectionRows.length) {
        this.$message.warning(this.$t('请选择一条数据'));
        return;
      }
      this.$emit('switch', this.selectionRows, type);
    },
    realSize(index) {
      return (this.pageNum - 1) * this.pageSize + index;
    },
  },
};
</script>
