<template>
  <div class="appPressCenter">
    <ai-list v-show="showList">
      <template slot="title">
        <ai-title
            title="新闻中心"
            :isShowBottomBorder="false"
            @change="changeAreaId"
            :isShowArea="true"
            :instance="instance"
            v-model="areaId"
            :hideLevel="hideLevel"/>
      </template>
      <template slot="tabs">
        <el-tabs v-model="currIndex">
          <el-tab-pane
              v-for="(tab, i) in tabs"
              :key="i"
              :label="tab.label"
              :name="String(i)"
          >
            <component
                :is="tab.comp"
                v-if="currIndex === String(i)"
                :ref="currIndex"
                :instance="instance"
                :dict="dict"
                :permissions="permissions"
                :areaId="areaId"
                @goPage="goPage"
            />
          </el-tab-pane>
        </el-tabs>
      </template>
    </ai-list>

    <component
        v-if="!showList"
        :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, commentList, newsDetail, newsList, videoDetail} from './components'

export default {
  name: 'AppPressCenter',
  label: '新闻中心',
  props: {
    instance: Function,
    dict: Object,
    permissions: Function
  },
  components: {
    newsList,
    commentList,
    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
        },
        {label: '评论管理', name: 'commentList', comp: commentList}
      ]
    },
    showList() {
      return !this.$route.hash
    },
    hideLevel() {
      return this.user.info.areaList?.length - 1
    },
    currentPage() {
      return this.$route.hash?.substring(1)
    }
  },
  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
  }
}
</script>

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