<template>
    <div class="layout-row-main left-menu-toolbar">
      <div class="layout-col-tree">
        <div style="border-bottom: 1px solid #eee;">
          <el-toolbar>
            <el-button @click="addClickHandler" priv="ContentCore.Catalog.Add">
              <i class="fa fa-plus" aria-hidden="true"></i> 新建栏目
            </el-button>
          </el-toolbar>
        </div>
        <div class="padding-top-bottom scroll mini" v-show="showTree">
          <catalog-tree :data="dimCatalogTrees" :props="defaultProps" @current-change="handleDimNodeClick"></catalog-tree>
        </div>
      </div>
      <div class="layout-col-detail" style="min-height: calc(100vh - 200px);">
          <dimension-detail :parent-id="dimCatalogParentID" :catalog-id="dimCatalogID" :dimension-id="dimensionId" :inner-code="dimInnerCode"></dimension-detail>
      </div>
    </div>
</template>
<script>
import contentadvanceDetail from '../contentadvance/contentadvanceDetail.vue'
import CatalogTree from '@src/components/catalogTree/CatalogTree.vue'

export default {
  components: {
    'catalog-tree': CatalogTree,
    'dimension-detail': contentadvanceDetail
  },
  props: {
    dimensionId: {
      type: [Number, String],
      required: true
    }
  },
  data() {
    return {
      clientHeight: 0,
      clientWidth: 0,
      defaultProps: {
        children: 'children',
        label: 'name',
        key: 'ID'
      },
      showTree: true,
      dimensions: [],
      dimCatalogTrees: [],
      dimCatalogID: 0,
      dimCatalogParentID: 0,
      dimInnerCode: ''
    }
  },
  async created() {
    this.clientHeight = document.documentElement.clientHeight - 120
    this.clientWidth = document.documentElement.clientWidth - 340
    this.loadAdvanceCatalogTree()
  },
  methods: {
    addClickHandler() {
      this.$router.push({path: `/settings/contentadvance/${this.dimenId}/add/new`})
    },
    handleDimNodeClick(data) {
      this.dimCatalogID = data.ID
      this.dimCatalogParentID = data.parentID
      this.dimInnerCode = data.innerCode
    },
    async loadAdvanceCatalogTree() {
      this.treeDataLoading = true
      let res = await axios.get(`/ui/dimesion/${this.dimensionId}/catalog`)
      this.treeDataLoading = false
      this.dimCatalogTrees = res.data.data
    }
  }
}
</script>

<style scoped>
</style>
