<template>
  <div>
    <div class="flex-align-center">
      <div v-for="item in data" :key="item.index" @click="classClick(item)">
        <p v-if="item.index === 1" class="normal-margin class-item classIndex"  :class="class_act === item.itemclassnum?'act':''">{{item.itemclassname}}</p>
        <p v-else class="normal-margin class-item classIndexItem"  :class="class_act === item.itemclassnum?'act':''">{{item.itemclassname}}</p>
        <Tree v-if="item.subdep" :data="item.subdep" @onClassChange="change"></Tree>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Tree",
  props:['data'],
  data () {
    return {
      activeClass:{},
      class_act:0,
    }
  },
  methods:{
    classClick (item) {
      this.activeClass = item
      this.class_act = item.itemclassnum
      this.change(item)
    },
    change(item) {
      this.$emit('onClassChange',item)
    }
  }
}
</script>
<style scoped>
.class-item{
  margin:0 25px;
  color: #333;
  cursor: pointer;
  transition: .2s all linear;
  font-size: 13px;
  
}
.act{
  color:#3874f6;
  font-weight: bold;
}
.classIndex{
  margin-bottom: 0px
  !important;
}
.classIndexItem{
  margin-left: -18px;
  margin-bottom: 0px
  !important;
}

</style>