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

<script>
import gridScoreManage from "./components/gridScoreManage.vue"
import gridScoreRules from "./components/gridScoreRules.vue"
import gridScoreStatistics from './components/gridScoreStatistics.vue'
import gridScoreDetail from './components/gridScoreDetail.vue'
import gmScore from './components/gmScore.vue'

export default {
  name: 'AppGridMemberScore',
  label: "网格员积分",

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

  computed: {
    currentPage() {
      let {hash} = this.$route
      return hash == "#gridScoreDetail" ? gridScoreDetail :
              hash == "#gridScoreRules" ? gridScoreRules :
                hash == "#gridScoreStatistics" ? gridScoreStatistics : 
                  hash == "#gridScoreManage" ? gridScoreManage : gmScore
    }
  },
  components: {
    gmScore,
    gridScoreManage,
    gridScoreRules,
    gridScoreStatistics,
    gridScoreDetail,
  },

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

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