<template>
  <div class="layout-row-main" >
      <div class="layout-col-tree">
        <div class="padding-top-bottom" style="overflow:hidden;background-color: #fff;border: 1px solid #ECEDEF;box-shadow: 0 1px 1px rgba(99,99,99,.05);border-radius:4px;">
          <div class="wrapper fontStyle draft">
            <el-menu  @open="handleOpen" @close="handleClose" class="el-menu-vertical-demo" @select="selectMenu">
              <el-menu-item index="persion" v-if="hasPrivs('Draft.Person.Draft')||hasPrivs('Draft.Person.Resource')" 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" v-if="hasPrivs('Draft.Dept.Draft')||hasPrivs('Draft.Dept.Resource')" 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>
                <!-- <dept-subMenu v-for="item in branch" :menu="menu" :currentDept="currentBranch" @nodeClick="handleNodeClick" :dept="item" :key="item.branchInnerCode"></dept-subMenu> -->
               </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>
        </div>
      </div>
      <div class="layout-col-detail" >
        <div class="view-type-tabs">
          <el-tabs @tab-click="handleClick" v-model="currentViewName" class="view-tabs">
            <el-tab-pane v-for="view in views" :label="view.name" :name="view.ID" :key="view.ID" :disabled="isDisable(view.ID)" class="content_tab_class">
            </el-tab-pane>
          </el-tabs>
        </div>
        <component :is="viewComponent" v-if="hasPriv" :branchinnercode="currentBranch.branchInnerCode" :catalog-id="catalogId"></component>
      </div>
  </div>
</template>
<script>
import Privilege from '@src/common/privilege.js'
import CatalogTree from '@src/components/catalogTree/CatalogTree.vue'
import Person from './person.vue'
import Dept from './dept.vue'
import personResource from './personResource.vue'
import deptResource from './deptResource.vue'
// import deptSubMenu from './components/deptSubMenu.vue'

export default {
  components: {
    'catalog-tree': CatalogTree,
    'person-draft': Person,
    'dept-draft': Dept,
    'person-resource': personResource,
    'dept-resource': deptResource
    //  'dept-subMenu':deptSubMenu
  },
  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,
      loadNode: async function(parentNode) {
        let res = await axios.get(`/ui/branches/treebranchs`, {
          params: {
            parentID: parentNode.ID
          }
        })
        return res.data.data
      },
      catalogId: 0,
      //  privPrefix:['Draft.Person''Draft.Dept'],
      show: true,
      clearSelect: false,
      viewComponent: '',
      hasPriv: false,
      allMenuPrivs: [
        {'key': 'person-draft', 'value': 'Draft.Dept.Draft'},
        {'key': 'dept-draft', 'value': 'Draft.Dept.Draft'},
        {'key': 'person-resource', 'value': 'Draft.Person.Resource'},
        {'key': 'dept-resource', 'value': 'Draft.Dept.Resource'}
      ]
    }
  },
  async created() {
    let path = this.$route.path
    if (path.indexOf('/workspace/') === 0) {
      path = path.replace('/workspace/', '')
      if (!path || (path && path.indexOf(this.menus[0]) > -1)) {
        this.menu = this.menus[0]
      } else {
        this.menu = this.menus[1]
      }
      this.currentViewName = (path.indexOf(this.menu + '/') === 0) ? path.replace(this.menu + '/', '') : 'draft'
    }
    this.replaceRoute(this.menu)

    this.changeComponent()
    // this.checkComponent()
    try {
      await this.loadRootInfo()
      await this.loadBranchs(this.menu)
    } catch (e) {
      console.error(e)
    }
  },
  watch: {
    menu(val) {
      this.replaceRoute(val)

      this.loadBranchs(val)
      // this.getBranchInnerCode()
      this.clearSelect = (val === this.menus[0])
      this.changeComponent()
      // this.checkComponent()
    }
  },
  mounted (){
    try {
      this.loadRootInfo()
      this.loadBranchs(this.menu)
    } catch (e) {
      console.error(e)
    }
  },
  methods: {
    checkComponent() {
      this.hasPriv = !!this.allMenuPrivs.find(priv => this.viewComponent === priv.key && this.hasPrivs(priv.value))
      this.viewComponent = this.hasPriv ? this.viewComponent : ''
    },
    replaceRoute(val) {
      val = this.currentViewName && this.currentViewName !== 'draft' ? (val + '/' + this.currentViewName) : val
      this.$router.replace(`/workspace/${val}`)
    },
    onPersonDraft() {
      this.menu = this.menus[0]
    },
    async loadRootInfo() {
      let resp = await axios.get('/ui/workspace/nocatalog/init')
      if (resp.data.status === 1) {
        this.catalogId = resp.data.data.catalogID
      }
    },
    async loadBranchs(val) {
      // if(val===this.menus[1]){
      this.loading = true
      let res = await axios.get('/ui/branches/treebranchs')
      this.branch = res.data.data
      this.loading = false
      // }
    },

    // async getBranchInnerCode(){
    //   let res = await axios.get('/ui/branches/innercodes')
    //   for(let item in res.data.data){
    //      res.data.data[item].branchInnerCode&&this.selectedInnerCode.push(res.data.data[item].branchInnerCode)
    //   }
    //  }

    hasPrivs: function(val) {
      return !!(val && Privilege.hasPriv(val))
    },
    handleNodeClick(dept) {
      this.menu = this.menus[1]
      this.currentBranch = Object.assign({}, dept)
      this.changeComponent()
    },
    selectMenu(val) {
    },
    handleOpen(val) {
      this.show = true
    },
    handleClose(val) {
      this.show = false
    },
    handleClick(tab) {
      this.currentViewName = tab.name
      this.replaceRoute(this.menu)
      this.changeComponent()
    },
    changeComponent() {
      this.currentViewName = this.currentViewName ? this.currentViewName : 'draft'
      this.viewComponent = `${this.menu}-${this.currentViewName}`
      this.checkComponent()
    },
    isDisable(key) {
      let currentPrvi = `Draft.${this.toUpperFirst(this.menu)}.${this.toUpperFirst(key)}`
      return !this.hasPrivs(currentPrvi)
    },
    toUpperFirst(str) {
      return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase())
    }
  }
}
</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: 16px;
  height: 50px;
  line-height: 50px;
  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>
