<template >
  <el-submenu :index="dept.branchInnerCode" v-if="dept.children && dept.children.length">
     <template slot="title">
        <p :class="['title','fontStyle',{'is-active':currentDept.branchCode==dept.branchCode && menu=='dept'}]" @click="nodeClick(dept)" :style="styles"><span class="nameStyle">{{dept.name}}</span></p>
     </template>
     <dept-subMenu v-for="item in dept.children" :paddingLeft="paddingLeft+15" @nodeClick="click" :dept="item" :currentDept="currentDept" :key="item.branchInnerCode"></dept-subMenu>
  </el-submenu>
  <el-menu-item :index="dept.branchInnerCode"  v-else>
    <p :class="['title','fontStyle',{'is-active':currentDept.branchCode==dept.branchCode && menu=='dept'}]" @click="nodeClick(dept)" :style="styles"><span class="nameStyle">{{dept.name}}</span></p>
  </el-menu-item>
</template>

<script>
export default {
  name: 'DeptSubMenu',
  componentName: 'DeptSubMenu',
  data() {
    return {
      styles: {
        paddingLeft: this.paddingLeft + 'px'
      }
    }
  },
  props: {
    dept: {
      type: Object,
      required: true
    },
    currentDept: {
      type: Object,
      required: false,
      default: _ => ({})
    },
    paddingLeft: {
      type: Number,
      default: 20
    },
    menu: String
  },
  methods: {
    nodeClick(data) {
      this.$emit('nodeClick', data)
    },
    click(data) {
      this.$emit('nodeClick', data)
    }
  }
}
</script>

<style scoped>

 p.title.fontStyle{
  text-align: left
 }
 p.is-active{
  color:#28B06E;
 }
 .el-menu-item.is-active{
  color:#28B06E
 }
</style>
