<template>
    <div class="wrapper fontStyle draft">
      <el-menu  class="el-menu-vertical-demo" >
        <el-menu-item index="person"  class="menu-item">
          <p class="title fontStyle" @click="onPersonDraft"><span :class="menu==menus[0]?'is-active':'un-active'"><i class="fa fa-pencil-square-o" aria-hidden="true"></i><span class="nameStyle">个人资源</span></span></p>
        </el-menu-item>
        <el-menu-item index="dept"  class="menu-item">
          <template slot="title">
              <p class="title fontStyle" @click="menu=menus[1]">
                <span :class="menu==menus[1]?'is-active':'un-active'">
                  <i class="fa fa-sitemap" aria-hidden="true"></i>
                  <span class="nameStyle">机构资源</span>
                  <!-- <span @click="show=!show"><i class="el-submenu__icon-arrow"  :class="show?'el-icon-arrow-up':'el-icon-arrow-down'"></i></span> -->
                </span>
              </p>
          </template>
        </el-menu-item>
      </el-menu>
      <catalog-tree v-if="menu==='dept' && (hasPrivs('Draft.Dept.Draft') || hasPrivs('Draft.Dept.Resource'))" v-show="show" :clearSelect="clearSelect"  :first="false" :is-menu="true" :data="branch" ref="ctree" :props="defaultProps" @current-change="handleNodeClick"></catalog-tree>
    </div>
</template>
<script>
import Privilege from '@src/common/privilege.js'
import CatalogTree from '@src/components/catalogTree/CatalogTree.vue'
export default {
  components: {
    'catalog-tree': CatalogTree
  },
  data() {
    return {
      menu: 'person',
      menus: ['person', 'dept'],
      views: [{ID: 'draft', name: '草稿库'}, {ID: 'resource', name: '资源库'}],
      currentViewName: 'draft',
      branch: [],
      currentBranch: {},
      defaultProps: {
        children: 'children',
        label: 'name',
        key: 'branchInnerCode'
      },
      loading: false,
      show: true,
      clearSelect: false
    }
  },
  async created() {
    this.loadBranchs(this.menu)
  },
  methods: {
    hasPrivs: function(val) {
      return !!(val && Privilege.hasPriv(val))
    },
    async loadBranchs(val) {
      this.loading = true
      let res = await axios.get('/ui/branches/treebranchs')
      this.branch = res.data.data
      this.loading = false
    },
    handleNodeClick(dept) {
      this.menu = this.menus[1]
      this.currentBranch = Object.assign({}, dept)
      this.callBack(this.currentBranch.branchInnerCode)
    },
    onPersonDraft() {
      let person = 'Y'
      this.menu = this.menus[0]
      this.callBack(person)
    },
    callBack(val) {
      this.$emit('callback', val)
    }
  }
}
</script>

<style scoped>
.catalog-settings-tree {border-bottom: 1px solid #eee;padding-bottom:10px;margin-top:0px}
.catalog-settings-tree .layout-left-top  .search-icon {top: 70px;right: 10px;}
.catalog-settings-tree .layout-left-top .el-input {padding:0 10px;}
.search-catalog {
  width:90px!important;
}

.editor-workspace-el-row {
  height: 100%;
}
.fullQuickEditor{
  max-width: 1280px;
  margin: auto;
}
.wrapper {
  padding: 0 10px;
  font-size: 16px;
}

.wrapper ul {
  list-style: none;
  padding-left: 22px;
}
.wrapper ul.first-stage {
  padding-left: 0;
}
.wrapper .title {
  font-size: 18px;
  height: 60px;
  line-height: 60px;
  color: #73767F;
}
.fontStyle{
  text-align: center
}
.nameStyle{
  padding-left: 5px;
}
.is-active{
  color: #28B06E;
}
.un-active{
  color:inherit;
}
p.fontStyle{
  text-align: left
}
.wrapper .title:hover{
  color: rgb(8, 165, 87);
  border-color: transparent;
  background-color: transparent;
}
</style>
<style>
.draft .el-menu-item,
.draft .el-submenu__title {
 padding-left: 0px !important;
}
.logoFile {
    position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  margin-top: 2px;
  margin-bottom: 2px;
  }
  .logoFile_table {
    position: relative;
    width: 80%;
    height: 0;
    padding-bottom: 75%;
    overflow: hidden;
    margin-left: 10%;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    margin-top: 13px;
  }
</style>
