<template>
  <div>
    <div class="main-tool">
      <el-button class="btn-filtrate" type="primary" size="small" @click="queryShow = !queryShow" v-if="search">筛选
      </el-button>
      <slot name="button"></slot>
      <div class="main-site fr" v-if="navList.length>0">
        <template v-for="(item,index) of navList">
          <router-link :to="item.url" v-if="item.url">
            <span v-if="index>0"> / </span>{{item.label}}
          </router-link>
          <template v-else>
            <span v-if="index>0"> / </span>{{item.label}}
          </template>
        </template>

      </div>
    </div>
    <div class="main-container">
      <div :class="queryShow?'queryShow':''" v-if="search">
        <div class="main-query-box">
          <el-form :label-width="labelWidth+'px'" label-position="left" size="small" class="main-query-form">
            <slot name="form"></slot>
            <div class="clear"></div>
            <el-form-item label-width="0" size="large" class="text-right">
              <el-button type="primary" size="small" @click="doSearch">筛选</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="main-content" v-if="mainClass">
        <slot></slot>
      </div>
      <template v-else>
        <slot></slot>
      </template>
    </div>
    <div class="main-page mt10 text-right" v-if="pageNav" v-show="target?target.$total:total">
      <el-pagination
        :page-sizes="pageSizes"
        :page-size="target?target.$limit:pageSize"
        layout="sizes, prev, pager, next"
        :total="target?target.$total:total"
        :current-page="target?target.$nowPage:currentPage"

        v-on:current-change="handlerPageChange"
        v-on:size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {getType} from '../../math/basic';

  export default {
    name: "mainPage",
    data() {
      return {
        queryShow: !this.showSearch,
        // navList: []
      }
    },
    props: {
      showSearch: {
        type: Boolean,
        default: false
      },
      //是否自动在表格的外层加上main-content样式
      mainClass: {
        type: Boolean,
        default: true
      },
      //搜索表单label宽度
      labelWidth: {
        type: Number,
        default: 90
      },
      //是否显示搜索
      search: {
        type: Boolean,
        default: true
      },
      //是否显示分页导航
      pageNav: {
        type: Boolean,
        default: true
      },
      pageSizes: {
        type: Array,
        default() {
          return [10, 20, 40, 80, 100]
        }
      },
      nowAt: {
        type: Array,
        default() {
          return []
        }
      },
      //绑定的类实例
      target: {
        type: Object,
        default() {
          return null;
        }
      },

      //如果启用了target，则忽略以下属性
      //分页大小
      pageSize: {
        type: Number,
        default: 20
      },
      //总数据量
      total: {
        type: Number,
        default: 0
      },
      //当前页面
      currentPage: {
        type: Number,
        default: 1
      },
    },
    methods: {
      /**
       * 触发搜索事件
       */
      doSearch() {
        this.queryShow = true;
        this.$emit('on-search');//这个放在执行实际搜索之前，用于页面上对查询条件做额外处理
        if (this.target) {
          this.target.$search();
          this.target.$getPageDataPro();
        }
      },
      handlerPageChange(newPage) {
        if (this.target) {
          this.target.$nowPage = newPage;
          this.target.$getPageDataPro();
        }
        this.$emit('current-change', newPage)
      },
      handleSizeChange(limit) {
        if (this.target) {
          this.target.$setLimit(limit);
          this.target.$getPageDataPro();
        }
        this.$emit('size-change', limit)
      }
    },

    computed: {
      navList() {
        if (this.nowAt.length === 0) {
          return [];
        }
        switch (getType(this.nowAt[0])) {
          case 'String':
            return this.nowAt.map(function (label) {
              return {
                label
              }
            });
          default:
            return this.nowAt;
        }

      }
    }
  }
</script>

<style scoped>

</style>
