<template>
  <div>
    <div class="con-title">
      <div>{{ $t('pages.affairsHall.hall.title') }}</div>
    </div>
    <Tap :tapParam="tapParam" @tapParam="tapIndexs"></Tap>
    <div class="con-box" v-if="affairId">
      <component :is="currentComponent" :affairId="affairId" :hasAdd="hasAdd"></component>
    </div>
  </div>
</template>

<script>
import * as api from '../api'
import Tap from '@/components/comTable/tap.vue'
// 学术活动
import ActivityList from './activity/list'
// 乐分享
import ShareList from './share/list'
// 重修
import RetakeList from './retake/list'
// 纸质成绩单
import PareportList from './reportPaper/list'
// 电子成绩单
import ElreportList from './reportE/list'
// 休学
import PauseStudyList from './studyPause/list'
// 复学
import ContinueStudyList from './studyContinue/list'
// 在职证明
import JobCertList from './certSchool/list'
// 在读证明
import StudyCertList from './certStudy/list'
// 毕业典礼
import GraduationList from './graduation/list'

export default {
  components: {
    Tap,
    ActivityList,
    ShareList,
    RetakeList,
    PareportList,
    ElreportList,
    PauseStudyList,
    ContinueStudyList,
    JobCertList,
    StudyCertList,
    GraduationList
  },
  data() {
    return {
      types: [],
      tapParam: [
        {
          name: '分类',
          isShow: false,
          selectIndex: 0,
          key: 'cc',
          arrItem: []
        }
      ],
      active: {}
    }
  },
  computed: {
    affairId() {
      return this.active ? this.active.id : ''
    },
    hasAdd() {
      return this.active ? this.active.close !== '1' : false
    },
    currentComponent() {
      const components = {
        symposium: 'ActivityList',
        sharing: 'ShareList',
        retake: 'RetakeList',
        pareport: 'PareportList',
        elreport: 'ElreportList',
        suspend: 'PauseStudyList',
        return: 'ContinueStudyList',
        job_certification: 'JobCertList',
        learn_certification: 'StudyCertList',
        graduation: 'GraduationList'
      }
      return components[this.active.form_name]
    }
  },
  methods: {
    getTypes() {
      api.getAffairType().then(response => {
        response = response.concat([{ affair_name: '毕业典礼', form_name: 'graduation', id: 'graduation' }])
        const [first = {}] = response
        this.active = first
        this.types = response
        const query = this.$route.query
        if (query.id || query.channel) {
          let index = 0
          if (query.id) {
            index = response.findIndex(item => item.id === query.id)
          }
          if (query.channel) {
            index = response.findIndex(item => item.form_name === query.channel)
          }
          this.tapParam[0].selectIndex = index
          this.active = response[index]
        }
        this.tapParam[0].arrItem = response.map(item => {
          return Object.assign({}, item, { val: item.id, name: item.affair_name })
        })
      })
    },
    tapIndexs(data, rawData) {
      this.active = rawData
    }
  },
  beforeMount() {
    this.getTypes()
  }
}
</script>
