<template>
  <div class="layout-no-flex">
    <el-toolbar>
      <el-col>
        <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
      </el-col>
    </el-toolbar>
      <el-tabs v-model="activeTabs" @tab-click="changeTabClickHandler">
        <el-tab-pane label="内容列表" name="contentlist">
          <content-list
            :dimension-id="dimenId"
            :dimension-catalog-id="dimensionCatalogId"
            :dimension-catalog-inner-code="innerCode"
            :tab-name="activeTabs">
          </content-list>
        </el-tab-pane>
        <el-tab-pane label="栏目基本信息" name="basic">
          <catalog-basic
            :dimension-id="dimenId"
            :dimension-catalog-id="dimensionCatalogId"
            :dimension-catalog-inner-code="innerCode"
            :tab-name="activeTabs">
          </catalog-basic>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>
<script>
import './css/contentadvance.css'
import ContentList from './contentList.vue'
import DimensionCatalogBasic from './dimensionCatalogBasic.vue'
export default {
  components: {
    'catalog-basic': DimensionCatalogBasic,
    'content-list': ContentList
  },
  props: {
    dimensionId: {
      type: [Number, String],
      required: true
    },
    catalogId: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      activeTabs: 'contentlist',
      innerCode: '0'
    }
  },
  computed: {
    dimenId: {
      get() {
        return parseInt(this.dimensionId)
      }
    },
    dimensionCatalogId: {
      get() {
        return parseInt(this.catalogId)
      }
    }
  },
  mounted() {
    this.innerCode = this.$route.query.innerCode ? this.$route.query.innerCode : '0'
  },
  methods: {
    changeTabClickHandler(tab, event) {
      this.activeTabs = tab.name
    }
  }
}
</script>
<style scoped>

</style>
