<template>
<div class="inventory-query">
  <!-- !!! v-show不支持template -->
  <div v-show="$route.name === 'queryByTerms'">
    <Query
      class="inventory-query__query"
      :selection="selection"
      :isInBlock="isInBlock"
      :queryParams="queryParams"
      :trigger="trigger"
      @selectTerm="selectTerm"
      @mergeQuery="mergeQuery"
      @toGetList="toGetList"
    ></Query>
    <List
      :query="query"
      :queryBy="queryBy"
      :needGetList="needGetList"
      :isInblock="isInBlock"
      @selectionChange="cacheSelection"
    ></List>
  </div>
  <router-view></router-view>
</div>
</template>

<script>
import Query from './components/Query'
import List from './components/List'
// import routerMixins from '../../Inventory/routerMixins'

export default {
  name: 'QueryByTerms',
  // mixins: [ routerMixins ],
  components: { Query, List },
  created () {
  },
  mounted () {
  },

  data () {
    return {
      queryBy: {}, // 按哪个条件查询
      query: {
        'page.currentPage': 1,
        'page.limitCount': 10,
      }, // 查询条件
      needGetList: true, // 获取数据的时机
      trigger: false, // 使query内容改变的时机
      selection: [], // 列表中勾选选中的条目
      isInBlock: false, // 是否是从冻结页面来的, ##跟冻结页面配合逻辑略复杂, 再优化
      queryParams: {}, // 主页面拿到的查询参数, 一般是由路由提供
    }
  },
  methods: {
    // 选择了条件
    selectTerm (queryBy, keepQuery = false) {
      this.queryBy = queryBy
      !keepQuery && (this.query = {
        'page.currentPage': 1,
        'page.limitCount': 10,
      })
    },
    // 勾选变化, 缓存id
    cacheSelection (ids) {
      this.selection = ids
    },
    // 合并查询条件
    mergeQuery (query = {}) {
      this.query = { ...this.query, ...query }
    },
    // 通知子组件获取数据
    toGetList () {
      this.needGetList = !this.needGetList
    },
  },
  // 路由进入前
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 可能从菜单冻结到本页, 要判断路由长度
      if (vm.$route.params.fromBlock) {
        // 从冻结页面跳来的或从深层页面返回的
        vm.isInBlock = true
        vm.mergeQuery(to.params.queryParams) // 路由传递查询参数
        // 参数给query
        vm.queryParams = to.params.queryParams
      }
      vm.trigger = !vm.trigger // 使query内容改变, 兼容初始作为主路由和从冻结页面来作为子路由
    })
  }
}
</script>

<style lang="scss" scoped>
  .inventory-query__query {
    margin-bottom: 20px;
  }
</style>
