<template>
  <span class="tree">
    <span class="mouse"></span>
    <span class="treename">{{ DATA.compName }}</span>
    <span class="temp">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link dropdown"></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(lab,index) in msg" :key="index" :command="lab.id">{{ lab.node }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </span>
  </span>
</template>
<script>

export default {
  name: 'dropdown',
  props: ['NODE', 'DATA', 'STORE'],

  data() {
    return {
      msg: [
        { node: '添加子公司', id: 'add' }
      ]
    };
  },
  methods: {
    handleCommand(command) {
      const STORE = this.STORE;
      const DATA = this.DATA;
      const NODE = this.NODE;

      if (command === 'add') {
        this.$emit('nodeAdd', STORE, DATA, NODE);
      } else if (command === 'edit') {
        this.$emit('nodeEdit', STORE, DATA, NODE);
        this.nodeEdit(STORE, DATA, NODE);
      } else {
        this.$emit('nodeDel', STORE, DATA, NODE);
      }
    },
  }
};

</script>
<style scoped lang="scss">
.tree {
  width: 200px;
  font-size: 14px;
  color: #333333;
}
.treename {
  display: inline-block;
  width: 185px;
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.treename:before {
  content: url("../../static/images/components/tree/folder.png");
  margin-right: 8px;
}
.temp {
  position: absolute;
  right: -3px;
}
.temp:after {
  content: "";
  border-right: 20px solid rgba(0, 0, 0, 0);
}

.dropdown {
  display: inline-block;
  vertical-align: -4px;
  width: 16px;
  height: 16px;
  background-image: url("../../static/images/components/tree/operaction1.png");
  background-size: contain;
}

.dropdown:hover {
  background-image: url("../../static/images/components/tree/operaction2.png");
  background-size: contain;
}
/deep/.el-input--mini .el-input__inner {
  width: 120px;
  height: 25px;
  line-height: 25px;
}
</style>
