<template>
  <div class="AppNewsCenter">
    <component
        :is="currentPage"
        :detail="detail"
        :instance="instance"
        :dict="dict"
        :permissions="permissions"
        :areaId="areaId"
        @goBack="goBack"
        @goPage="goPage"
    />
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {addArticle, addVideo, newsDetail, newsList, videoDetail} from './components'

export default {
  name: 'AppNewsCenter',
  label: '新闻中心',
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  components: {
    newsList,
    addVideo,
    addArticle,
    newsDetail,
    videoDetail
  },
  data() {
    return {
      areaId: '',
      currIndex: '0',
      detail: {}
    }
  },
  computed: {
    ...mapState(['user']),
    tabs() {
      return [
        {
          label: '内容管理',
          name: 'newsList',
          comp: newsList,
          addVideo: addVideo,
          addArticle: addArticle,
          newsDetail: newsDetail,
          videoDetail: videoDetail,
        },
      ]
    },
    showList() {
      return !this.$route.hash
    },
    hideLevel() {
      return this.user.info.areaList?.length - 1
    },
    currentPage() {
      return this.$route.hash == "#video" ? videoDetail :
          this.$route.hash == "#news" ? newsDetail :
              this.$route.hash?.substring(1) || newsList
    }
  },
  methods: {
    changeAreaId() {
      this.$nextTick(() => {
        this.$refs[this.currIndex][0].getList()
      })
    },
    goBack() {
      this.$router.push({})
    },
    goPage(obj) {
      let hash = "#" + obj.key
      if (obj.row) {
        let {id} = obj.row
        this.$router.push({query: {id}, hash})
      } else {
        this.$router.push({hash})
      }
    }
  },
  created() {
    this.areaId = this.user.info.areaId
    this.dict.load("appNewsType", "appNewsStatus", "appNewsCategory")
  }
}
</script>

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