<template>
<div class="layout-no-flex right-detail-tabs">
    <el-tabs v-model="activeTabs" @tab-click="changeTabClickHandler">
      <el-tab-pane label="基本配置" name="info">
        <div v-if="currentType==='Default'">
          <basic-catalog
            :catalog-id="ID"
            :site-id="siteId"
            :dimension-id="dimensionId"
            :type.sync="currentType"
            :old-type="oldType"
            :content-type="currentContentType"
            :content-types="contentTypes"
            :types="types"
            :branch-tree="branchTree"
            :tree-items-options="treeItemsOptions"
            :tab-name.sync="activeTabs"
            @loadCatalogTree="loadCatalogTree"
            @callback="turnToPlatformTabs">
          </basic-catalog>
        </div>
        <div v-if="currentType==='Link'">
          <link-catalog
            :catalog-id="ID"
            :dimension-id="dimensionId"
            :type.sync="currentType"
            :old-type="oldType"
            :content-type="currentContentType"
            :content-types="contentTypes"
            :tab-name.sync="activeTabs"
            :types="types"
            :branch-tree="branchTree"
            :tree-items-options="treeItemsOptions"
            @loadCatalogTree="loadCatalogTree"
            @callback="turnToPlatformTabs">
          </link-catalog>
        </div>
        <div v-if="currentType==='Virtual'">
          <virtual-catalog
            :catalog-id="ID"
            :dimension-id="dimensionId"
            :type.sync="currentType"
            :old-type="oldType"
            :content-type="currentContentType"
            :tab-name.sync="activeTabs"
            :content-types="contentTypes"
            :types="types"
            :branch-tree="branchTree"
            :tree-items-options="treeItemsOptions"
            @loadCatalogTree="loadCatalogTree"
            @callback="turnToPlatformTabs">
          </virtual-catalog>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="currentType!='Virtual'" label="扩展配置管理" name="config">
        <catalog-config
          :catalog-id="ID"
          :type="currentType"
          :tab-name="activeTabs"
        >
        </catalog-config>
      </el-tab-pane>
      <el-tab-pane label="发布平台模板配置" name='template'>
        <catalog-templates
          :ID="ID"
          :parent-id="pID"
          :content-type="currentContentType"
          :type="currentType"
          :content-types="contentTypes"
          :tab-name="activeTabs"
          from-catalog
        >
        </catalog-templates>
      </el-tab-pane>
      <!-- <el-tab-pane label="栏目资源" name='resources'>
        <catalog-resources
          :catalog-id="ID"
          :type="currentType"
          :tab-name="activeTabs"
        >
        </catalog-resources>
      </el-tab-pane> -->
    </el-tabs>
</div>
</template>
<script>
import Config from './components/CatalogExtend.vue'
import Templates from './catalogDefaultTemplate.vue'
// import Resources from './catalogResources.vue'
import CatalogBasic from './catalogBasic.vue'
import LinkCatalog from './linkCatalog.vue'
import VirtualCatalog from './virtualCatalog.vue'
export default {
  components: {
    'catalog-config': Config,
    'catalog-templates': Templates,
    //  'catalog-resources': Resources
    'basic-catalog': CatalogBasic,
    'link-catalog': LinkCatalog,
    'virtual-catalog': VirtualCatalog
  },
  props: {
    catalogId: {
      type: [Number, String],
      required: true
    },
    contentType: {
      type: String
    },
    type: {
      type: String
    },
    parentId: {
      type: [Number, String]
    },
    dimensionId: {
      type: Number,
      default: 0
    },
    siteId: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      types: [], //  栏目类型
      branchTree: [], //  机构
      treeItemsOptions: {
        //  树形菜单选项
        children: 'children',
        label: 'name',
        key: 'branchInnerCode'
      },
      contentTypes: [],
      activeTabs: 'info',
      oldType: this.type,
      catalogInfo: {}
    }
  },
  computed: {
    ID: {
      get() {
        return parseInt(this.catalogId)
      }
    },
    currentContentType: {
      get() {
        return this.contentType || ''
      }
    },
    currentType: {
      get() {
        return this.catalogInfo.type ? this.catalogInfo.type : this.type
      },
      set(val) {
        this.$emit('update:type', val)
      }
    },
    pID: {
      get() {
        return this.parentId
      }
    }
  },
  watch: {
    ID(val) {
      this.oldType = this.type
    }
  },
  mounted() {
    this.loadCatalogData()
    this.loadBranchTree()
    this.loadCatalogType()
    this.loadContentType()
    // this.currentContentType = !!this.currentContentType ? this.currentContentType : this.$route.query.contentType ? this.$route.query.contentType : 'Article'
    // this.currentType = !!this.currentType ? this.currentType : this.$route.query.type ? this.$route.query.type : 'Default'
    // this.pID = !!this.pID ? this.pID : this.$route.query.parentId ? parseInt(this.$route.query.parentId) : 0
  },
  methods: {
    turnToPlatformTabs(tabName) {
      this.activeTabs = tabName
    },
    changeTabClickHandler(tab, event) {
      this.activeTabs = tab.name
    },
    // 加载栏目类型
    async loadCatalogType() {
      let res = await axios.get('/ui/catalogs/catalogtypes')
      this.types = res.data.data
    },
    async loadContentType() {
      let res = await axios.get('/ui/contentcore/contenttypes')
      this.contentTypes = res.data.data
    },
    // 加载机构树
    async loadBranchTree() {
      let res = await axios.get('/ui/branches')
      this.branchTree = res.data.data
      this.defaultBranch = res.data.data[0].defaultBranch
    },
    loadCatalogTree(val) {
      this.$emit('callback', val)
    },
    async loadCatalogData () {
      let res = await axios.get(`/ui/catalogs/${this.catalogId}`)
      this.catalogInfo = res.data.data
    }
  }
}
</script>
