<template>
  <div>
    <!-- 头部组件 -->
    <table-header-title ref="headerTitle" :on-back-btn="onBack">
      <template slot="header">
        <slot name="header" />
      </template>
    </table-header-title>
    <!-- 搜索组件 -->
    <table-header-search
      ref="headerSearch"
      :advanced-search="advancedSearch"
      :label-position="labelPosition"
      :tabs="tabs"
      class="p0-16"
    >
      <template slot="search">
        <slot :onSearch="onSearchChange" name="search" />
      </template>
      <template slot="searchMenu">
        <slot name="searchMenu" />
      </template>
    </table-header-search>
    <!--表格内容-->
    <div class="p0-16">
      <!--新增等按钮-->
      <div v-show="menu" class="mb10">
        <slot name="menuLeft" />
      </div>
      <!--表格-->
      <slot name="GXTable" />
      <!-- 分页 -->
      <div>
        <table-page v-if="pageFlag" ref="tablePage" />
      </div>
    </div>
  </div>
</template>

<script>
import tableHeaderTitle from './table-header-title'
import tableHeaderSearch from './table-header-search'
import tablePage from './table-page'
/* 公用方法*/
import { filterObj, restoreInitialValue } from '@/assets/js/utils' // 常用方法

export default {
  name: 'Index',
  provide() {
    return {
      tableCrud: this
    }
  },
  components: {
    tableHeaderTitle,
    tableHeaderSearch,
    tablePage
  },
  props: {
    /* 搜索参数*/
    searchForm: {
      type: Object,
      default() {
        return {}
      }
    },
    /* 返回按钮*/
    onBack: {
      type: Function,
      default: null
    },
    /* 是否展示分页*/
    pageFlag: {
      type: Boolean,
      default: true
    },
    /* 是否展示高级搜索*/
    advancedSearch: {
      type: Boolean,
      default: true
    },
    /* 是否展示操作按钮 */
    menu: {
      type: Boolean,
      default: false
    },
    /* 搜索框label宽度*/
    searchLabelWidth: {
      type: String,
      default: ''
    },
    // label显示
    labelPosition: {
      type: String,
      default: ''
    },
    /*
            ·tabs列表
            name 必填
            [{name:'名称'}]
          */
    tabs: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      searchData: {}, // 搜索条件初始值存储
      page: {
        total: 0, // 总页数
        pageNo: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      saveCode: 'QuerySaved_' + this.$route.fullPath,
      tabData: {}
    }
  },
  watch: {
    // 监听分页
    page: {
      handler() {
        this.$refs.tablePage.pageInit()
      },
      deep: true
    }
  },
  created() {
    this.searchData = this.searchForm
  },
  methods: {
    pageTotal(total) {
      this.page.total = total
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.page.pageNo
      param.pageSize = this.page.pageSize
      return filterObj(param)
    },
    // 初始化数据 tab： tabs 的当前选项
    initAutoList(tab) {
      this.tabData = tab
      this.getInitSearchForm()
      this.pageChange()
    },
    // 分页切换时
    pageChange() {
      /*
          @on-load(
            params： 搜索内容，
            pageTotal： 列表总数 回调函数，
            tab： 使用tabs的时候的当前选项
          )
        */
      this.$nextTick(() => {
        this.$emit('on-load', this.getQueryParams(), this.pageTotal, this.$refs.headerSearch.tabData)
        this.saveToLocalStore()
      })
    },
    // 搜索
    onSearchChange() {
      this.saveToLocalStore('01')
      this.pageChange()
    },
    // 清空
    searchReset() {
      restoreInitialValue(this.searchForm)
      this.saveToLocalStore('01')
      this.pageChange()
    },
    // 将查询保存到 vuex 里
    saveToLocalStore(type) {
      // type 01 搜索/重置时需要重置分页
      if (type === '01') {
        this.page.pageNo = 1
      }
      this.$store.dispatch('setSysLocal', {
        queryParams: this.searchForm,
        localNameSaveCode: this.saveCode,
        tabData: this.tabData,
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize
      })
    },
    // 取出vuex存储查询条件
    getInitSearchForm() {
      const sysLocal = this.$store.getters.sysLocal
      if (sysLocal.localNameSaveCode === this.saveCode) {
        this.$emit('update:searchForm', sysLocal.queryParams)
        if (typeof (this.tabData) !== 'string') {
          this.page.pageNo = 1
        } else {
          this.page.pageNo = sysLocal.pageNo
          this.page.pageSize = sysLocal.pageSize
        }
        this.$nextTick(() => {
          if (this.tabData && this.tabData.index !== sysLocal.tabData.index) {
            this.$refs.headerSearch.tabClick({ index: Number(sysLocal.tabData.tabIndex) })
          }
        })
      }
    }
  }
}
</script>

<style scoped></style>
