<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-12 14:41:22
 * @LastEditTime: 2019-11-25 13:56:31
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="lov-table">
    <div class="search-body" v-if="searchInfo.length">
      <el-form
        ref="searchForm"
        :size="size"
        :model="searchForm"
        :label-width="labelWidth * (isCn ? 1 : 1.5) + 'px'"
        @submit.native.prevent
      >
        <transition
          name="search-info-transition"
          enter-active-class="animated fadeIn"
          leave-active-class="animated fadeOut"
          v-for="info of searchInfo"
          :key="info.code">
          <el-form-item
            v-if="info.show !== false"
            :class="info.code"
            :style="'width: ' + widthPercent * (info.grow || 1) + '%'"
            :label="$t(info.label)"
            :prop="info.code">
            <zte-item v-if="!info.range"
              :props="info"
              v-model="searchForm[info.code]"
              :show="searchForm[info.showLabel]"
              :params="Object.assign({}, info.params, preParams[info.code])"
              @select-change="handlerSelectChange($event, info)"
              @show-change="showChange"
              @single-picker-change="pickerChange"
              @tree-pick-change="treeChange"
              @enter="submitForm"
              @range-change="handlerRangeChange($event, info)"
            />
            <zte-item-range v-else
              :props="info"
              :form="searchForm"
              :same="info.same"
            />
          </el-form-item>
        </transition>
        <!-- 隐藏域input解决浏览器默认提交bug -->
        <!-- <input type="text" style="display: none" v-if="searchInfo.filter(i => i.show !== false).length === 1"> -->
        <el-form-item class="button-list" :style="'width: ' + widthPercent + '%;'">
          <el-button type="primary" @click.native="submitForm" icon="el-icon-search">{{$t('查询')}}</el-button>
          <el-button @click.native="resetForm" icon="el-icon-refresh">{{$t('重置')}}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <div class="table-body"
          :style="{'width': $slots.picked ? '50%' : '100%', 'verticalAlign': 'top' }">
        <el-table
          v-loading="loading"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
          ref="table"
          border
          resizable
          highlight-current-row
          :size="size"
          :data="tableData"
          :height="height"
          :row-key="rowKey"
          header-cell-class-name="table-head-cell"
          @current-change="handlerRowSelect"
          @row-click="hanlerRowClick"
          @row-dblclick="handleDBclick"
          @cell-click="handleCellclick"
          @cell-dblclick="handleCellDblclick"
          @selection-change="handlerRowCheck"
          @select="handleSelectionCheck"
          @select-all="handleSelectionCheckAll"
          @sort-change="handlerSortChange">
          <el-table-column
            v-if="indexStyle === 'selection' || indexStyle === 'index'"
            :type="indexStyle"
            :reserve-selection='!!rowKey'
            width="55">
            <template v-if="indexStyle === 'index'" slot="header">
              <span>{{$t('序号')}}</span>
            </template>
          </el-table-column>
          <el-table-column
            type="expand"
            v-if="$scopedSlots.expand"
          >
            <template slot-scope="scope">
              <slot name="expand" :row="scope.row" :$index="scope.$index"></slot>
            </template>
          </el-table-column>
          <template v-for="column of tableColumn.filter(({ show }) => show !== false)">
            <el-table-column
              v-if="column.temp"
              :key="column.code"
              :class-name="column.code + '-temp'"
              :prop="column.code"
              :label="$t(column.label)"
              :min-width="column.width || computeColumnWidth(column)"
              :fixed="column.fixed"
            >
              <template slot-scope="{row, $index, column: col}">
                <slot
                  class="column-temp"
                  :name="column.code"
                  :row="row"
                  :column="col"
                  :$index="$index">
                </slot>
              </template>
            </el-table-column>
            <el-table-column
              v-else
              :key="column.code"
              :class-name="column.code"
              :prop="column.code"
              :label="$t(column.label)"
              :min-width="column.width || computeColumnWidth(column)"
              :fixed="column.fixed"
              :show-overflow-tooltip="column.tips"
              :sortable="isSortable && column.sort">
            </el-table-column>
          </template>
        </el-table>
        <div class="pager-container">
          <template v-if="$slots.pageExtend">
            <slot name="pageExtend" />
          </template>
          <el-pagination
            v-if="isPagination"
            background
            :pager-count="5"
            :layout="layout"
            :current-page="pageNum"
            :page-size="currentPageSize"
            :page-sizes="pageSizes"
            :total="totalSize"
            @size-change="handlerSizeChange"
            @current-change="handlerPageChange">
          </el-pagination>
        </div>
      </div>
      <div class="picked-body" v-if="$slots.picked">
        <slot name="picked"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import zteTable from './zte-table';

export default {
  name: 'lovTable',
  extends: zteTable
};
</script>
