<template>
  <span class="tree">
    <span v-show="DATA.isEdit" class="tree-label">
      <el-input
        :ref="'treeInput'+DATA.id"
        v-model="DATA.label"
        class="edit"
        size="mini"
        autofocus
        @click.stop.native="nodeEditFocus"
        @blur.stop="nodeEditPass(STORE,DATA,NODE)"
        @keyup.enter.stop.native="nodeEditPass(STORE,DATA,NODE)"
        maxlength="12"
      />
    </span>
    <span class="mouse"></span>
    <span v-show="!DATA.isEdit" class="treename">{{ DATA.label }}</span>
    <span class="temp">
    </span>
  </span>
</template>
<script>
import { amendTreeList } from '../../api/organization/tree';

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

  data() {
    return {
      msg: [
      ]
    };
  },
  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);
      }
    },
    nodeEdit(s, d) {
      // 编辑
      d.isEdit = true;
      this.$nextTick(() => {
        this.$refs['treeInput' + d.id].$refs.input.focus();
      });
    },
    nodeEditPass(s, d) {
      // 编辑完成
      d.isEdit = false;
      const data = {
        deptId: d.id,
        deptName: d.label
      };
      amendTreeList(data)
        .then(() => {
          this.$message({
            message: '修改成功',
            type: 'success',
            showClose: true,
          });
        })
        .catch(() => {
          this.$message({
            message: '保存失败',
            type: 'error',
            showClose: true,
          });
        });
    },
    nodeEditFocus() {
      // 阻止点击节点的事件冒泡
    }
  }
};

</script>
<style scoped lang="scss">
.tree {
  width: 200px;
  font-size: 14px;
  color: #333333;
}
.treename {
  display: inline-block;
  width: 150px;
  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-popper[x-placement^="bottom"] {
  margin-top: 8px;
}
/deep/.el-popper[x-placement^="top"] {
  margin-bottom: 3px;
}
.el-dropdown-menu {
  padding: 0;
}
.el-dropdown-menu__item {
  padding: 0 10px;
  overflow-y: hidden;
}
/deep/.el-input--mini .el-input__inner {
  width: 120px;
  height: 25px;
  line-height: 25px;
}
</style>
