<template>
  <div>
    <ul class="tab-nav">
      <li :class="{ 'active-tab-nav': activeIndex == 0 }" @click="changeActiveTab(0)">已整理<i /></li>
      <li :class="{ 'active-tab-nav': activeIndex == 1 }" @click="changeActiveTab(1)">未整理<i /></li>
      <!-- 最右侧装饰img -->
      <span class="tab-right-img" />
    </ul>
    <CollectHeader :is-title-type="isTitleType" :selected-category="selectedCategory" />
    <component :is="comName" />
    <el-button v-if="selectedCategory.isType === 2 || selectedCategory.isType === 3" type="text" @click="openJuannei">打开卷内的Drawer</el-button>
    <el-button v-if="selectedCategory.isType === 5" type="text" @click="openJuannei">打开文件的Drawer</el-button>
  </div>
</template>

<script>
import SortedModule from './sorted.vue'
import UnSortedModule from './unsorted.vue'
import CollectHeader from '../module/collectHeader.vue'
export default {
  name: 'AnjuanContent',
  components: { SortedModule, UnSortedModule, CollectHeader },
  props: {
    data: {
      type: String,
      default: ''
    },
    selectedCategory: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      isTitleType: 3,
      activeIndex: 0
    }
  },
  computed: {
    comName: function() {
      if (this.activeIndex === 0) {
        return 'SortedModule'
      } else if (this.activeIndex === 1) {
        return 'UnSortedModule'
      }
      return 'SortedModule'
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    openJuannei() {
      // this.$emit('openJuannei', '这是来自案卷的通知')
      if (this.selectedCategory.isType === 2) {
        this.$parent.$parent.$emit('openJuannei')
      } else {
        this.$parent.$emit('openJuannei')
      }
    },
    changeActiveTab(data) {
      this.activeIndex = data
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
