<template>
  <keep-alive include="GmList">
    <component :is="currentPage" v-bind="$props" @change="onChange"/>
  </keep-alive>
</template>

<script>
import List from './components/list'
import ApplyList from './components/ApplyList'
import Add from './components/add'
import ApplyDetail from './components/ApplyDetail'
import ApplyAdd from './components/ApplyAdd'
import Family from './components/Family'
import MonitorUser from './components/MonitorUser'
import GmList from "./components/gmList";

export default {
  name: "AppGridMember",
  label: "网格管理员",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  computed: {
    currentPage() {
      let {hash} = this.$route
      return hash == "#Family" ? Family :
          hash == "#MonitorUser" ? MonitorUser :
              hash == "#Add" ? Add :
                  hash == "#ApplyAdd" ? ApplyAdd :
                      hash == "#ApplyDetail" ? ApplyDetail :
                          GmList
    }
  },
  components: {
    GmList,
    Add,
    List,
    Family,
    ApplyList,
    ApplyDetail,
    MonitorUser,
    ApplyAdd
  },

  methods: {
    onChange(data) {
      let {type, params: query} = data,
          hash = ["ApplyList", "list"].includes(type) ? "" : "#" + type
      this.$router.push({hash, query})
    }
  }
}
</script>

<style lang="scss">
.AppGridMember {
  height: 100%;
}
</style>
