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

<script>
import resourceMap from "./components/resourceMap.vue"
import resourceManagement from "./components/resourceManagement.vue"
import resourceClassification from './components/resourceClassification.vue'

export default {
  name: 'communityResource',
  label: "社会资源",

  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
  },

  computed: {
    currentPage() {
      let { hash } = this.$route
      return hash == "#resourceMap" ? resourceMap :
              hash == "#resourceManagement" ? resourceManagement : resourceClassification
    }
  },
  components: {
    resourceMap,
    resourceManagement,
    resourceClassification,
  },

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

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