<template>
  <el-tabs v-model="activeName">
    <el-tab-pane :label="$t('page_unit.tab_about')" name="about">
      <UnitTabAbout :unit-id="unitId" />
    </el-tab-pane>
    <el-tab-pane :label="$t('page_unit.tab_purposes')" name="purposes">
      <UnitTabPurposes :unit-id="unitId" :unit-type="unitType" />
    </el-tab-pane>
    <el-tab-pane :label="$t('page_unit.tab_blog')" name="blog">
      <UnitTabBlog :unit-id="unitId" />
    </el-tab-pane>
    <el-tab-pane :label="$t('page_unit.tab_gallery')" name="gallery">
      <UnitTabGallery :unit-id="unitId"></UnitTabGallery>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import UnitTabAbout from './unit-tab-about/UnitTabAbout'
import UnitTabPurposes from './unit-tab-purposes/UnitTabPurposes'
import UnitTabBlog from './unit-tab-blog/UnitTabBlog'
import UnitTabGallery from './unit-tab-gallery/UnitTabGallery'

export default {
  name: 'UnitContent',
  components: {UnitTabGallery, UnitTabBlog, UnitTabPurposes, UnitTabAbout},
  props: {
    unitType: {
      type: String,
      required: true
    },
    unitId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      activeName: 'about',
    }
  },
}
</script>
