<template>
    <div class="editorTreeComponent fsize-m4" :class="{ editorTreeItem: showItem }">
        <div class="editorTreeContent">
            <span class="treeShowLabel" @click.stop="() => labelClick(node, data)"
                  :title="node.data.lable  === undefined ? node.data.name: node.data.lable"
                  v-text="node.data.lable === undefined ? node.data.name: node.data.lable"></span>
            <span class="treeCtrlBtn" slot="treeItem">
              <i class="el-icon-edit " v-if="needControl && data.number !== 0" @click.stop="() => editor(node, data)"></i>
              <i class="el-icon-plus " v-if="needControl" @click.stop="() => append(node, data)"></i>
              <i class="el-icon-delete " v-if="needControl && data.number !== 0" @click.stop="remove(node, data)"></i>
            </span>
        </div>
        <el-input v-model="input" ref="treeInput" placeholder="请输入内容"
                  :key="node.id === undefined ? node.roleId : node.id" :autofocus="true"
                  @blur="onblurFun" @keydown.native.13.prevent="onEnterFun"></el-input>
        <!--<MtaStDialog
                :dVisible.sync="mtaStDialogVisible"
                dType="warning"
                :modalAppendToBody="false"
                dMessage="选中的数据将彻底删除"
                @comfirmCallback="comfirmCallback()"
        ></MtaStDialog>-->
        <el-dialog
                :close-on-click-modal="false"
                :visible.sync="mtaStDialogVisible"
                center
                class="response-tip-dialog"
                title="删除"
        >
            <div>选中的数据将彻底删除。</div>
            <span class="dialog-footer" slot="footer">
                    <el-button @click="comfirmCallback" type="primary">确 定</el-button>
                    <el-button @click="mtaStDialogVisible = false">取 消</el-button>
                    </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name:    'EditableTreeItem',
        props:   {
            node: {
                type:    Object,
                default: {},
            },
            data: {
                type:    Object,
                default: {},
            },
            needControl: {
                type: Boolean,
                default: true,
            }
        },
        data() {
            return {
                mtaStDialogVisible: false,
                input:    '',
                showItem: true,
                oldValue: '',
                mydata: '',
            };
        },
        methods: {
            comfirmCallback() {
                this.$emit('treeItemRemove', this.mydata);
            },
            // label 点击触发事件
            labelClick(node, data) {
                this.$emit('labelClick', {
                    'data': data,
                    'Node': node,
                });
            },
            // 新增事件触发
            append(node, data) {
                this.$emit('treeItemAppend', {
                    node: node,
                    data: data,
                });
            },
            // 删除事件触发
            remove(node, data) {
                this.mydata = {
                    node: node,
                    data: data
                };
                this.mtaStDialogVisible = true
            },
            // 编辑事件触发
            editor(node, data) {
                this.$emit('changeDragState', false);
                // 记录当前数据缓存
                this.oldValue = data.lable;
                this.showItem = false;
                this.$nextTick(() => {
                    this.input = data.lable;
                    this.$refs.treeInput.focus();
                    this.$emit('drapTreeList', false);

                });
            },
            // 失去焦点时触发
            onEnterFun() {
                this.$refs.treeInput.blur();
            },
            onblurFun() {
                const treeItemObj = {
                    node:       this.node,
                    data:       this.data,
                    editorText: _.trim(this.input),
                };

                if (this.oldValue !== this.input) {
                    this.$emit('treeItemEditor', treeItemObj);
                }
                this.$emit('drapTreeList', true);
                this.showItem = true;
                this.$emit('changeDragState', true);
            },
        },
    };
</script>

