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

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

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

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

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

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

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