<template>
  <span class="customformtype-tree-node" :class="{'customformtype-tree-node-notedit': !data.isEdit}">
    <span class="tree-label" v-show="data.isEdit">
      <el-input class="edit" size="mini"
      v-model="data.name"
      autofocus
      @click.stop.native="nodeEditFocus"
      @blur.stop="blurHandle(data)"
      @keyup.enter.stop.native="nodeEditPass(store,data,node)"></el-input>
    </span>
    <span v-show="!data.isEdit" class="tree-label tree-node-label">
      <i class="fa fa-list-ul"></i>
      <span>{{data.name}}</span>
    </span>
    <span class="tree-btn" v-if="!data.isEdit">
      <i class="fa fa-plus" title="新建子分类" @click.stop="nodeAdd(store,data,node)"></i>
      <i class="fa fa-pencil" title="修改分类" @click.stop="nodeEdit(store,data,node)"></i>
      <i class="fa fa-remove" title="删除分类" @click.stop="nodeDel(store,data,node)"></i>
    </span>
  </span>
</template>

<script>
let isEnterEvt = false
let origNodeLabel
export default {
  props: ['node', 'data', 'store'],
  watch: {
    // 发现el-tree中添加新节点是先复制子节点中最后一个节点的data，然后设置当前节点的data，所以这里监听isEdit值的变化
    'data.isEdit'(val) {
      if (val) {
        this.$nextTick(() => {
          this.$children[0] && this.$children[0].$refs['input'] && this.$children[0].$refs['input'].select()
        })
      }
    }
  },
  created() {
    if (this.data.isEdit) {
      this.$nextTick(() => {
        this.$children[0] && this.$children[0].$refs['input'] && this.$children[0].$refs['input'].select()
      })
    }
  },
  methods: {
    nodeAdd(s, d, n) { // 新增
      n.doCreateChildren([{
        name: '分类名称',
        parentID: d.ID,
        pInnerCode: d.innerCode || '0',
        isEdit: true,
        children: []
      }])
      isEnterEvt = false
      if (!n.expanded) {
        n.expand()
      }
    },
    nodeDel(s, d, n) { // 删除
      this.$emit('nodeDel', s, d, n)
    },
    blurHandle(data) {
      if (!isEnterEvt) {
        this.data.isEdit = false
        if (!this.data.hasOwnProperty('ID')) {
          this.node.parent.removeChild(this.node)
        } else {
          data.name = origNodeLabel
        }
      }
    },
    nodeEdit(s, d, n) { // 修改
      d.isEdit = true
      this.$nextTick(() => {
        this.$children[0] && this.$children[0].$refs['input'] && this.$children[0].$refs['input'].focus()
      })
      isEnterEvt = false
      origNodeLabel = d.name
    },
    nodeEditPass(s, d, n) { // 编辑完成
      isEnterEvt = true
      d.isEdit = false
      this.$emit('nodeSave', s, d, n)
    },
    nodeEditFocus() {
      // 阻止点击节点的事件冒泡
    }
  }
}
</script>

<style>
  .customformtype-tree-node{
    overflow:hidden;
    position:relative;
  }
  .customformtype-tree-node-notedit:hover .tree-btn{
    display:block;
  }
  .customformtype-tree-node .tree-label{
    font-size:0.9em;
    font-weight:bold;
  }
  .customformtype-tree-node .tree-label.tree-node-label{
    max-width:120px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    vertical-align:middle
  }
  .customformtype-tree-node .tree-btn{
    display:none;
    float: right;
  }
  .customformtype-tree-node .tree-btn i:nth-child(1){
    margin-left: 20px;
  }
  .customformtype-tree-node .tree-btn i{
    color:#8492a6;
    font-size:0.9em;
    margin-right:3px;
  }
  .customformtype-tree-node .tree-label .el-input .el-input__inner {
    line-height:25px!important;
    height:25px!important;
  }
</style>
