<template>
    <div class="editorTreeComponent fsize-m4" :class="{ editorTreeItem: showItem }">
        <div class="editorTreeContent">
            <span  class="treeShowLabel org" @click.stop="() => labelClick(node, data)"
                   :title="node.data.lable">{{ node.data.lable }}</span>
            <span v-if="getAuth.orgFlag === 0" class="treeCtrlBtn" slot="treeItem">
                <span v-if="data.isRoot && data.isRoot === true">

                    <i class="el-icon-edit " v-if="!(data.isAdmin  && data.isAdmin === true)" @click.stop="() => editor(node, data)"></i>
                    <i class="el-icon-plus " @click.stop="() => append(node, data)"></i>
                </span>
                <span v-else-if="data.isConstant && data.isConstant === true">
                    <i class="el-icon-edit " @click.stop="() => editor(node, data)"></i>
                    <i class="el-icon-plus " @click.stop="() => append(node, data)"></i>
                    <i class="el-icon-delete " @click.stop="remove(node, data)"></i>
                </span>
            </span>
        </div>
        <el-input v-model="input" ref="treeInput" placeholder="请输入内容" :key="node.id" :autofocus="true"
                  @blur="onblurFun" @keydown.native.13.prevent="onEnterFun"></el-input>
        <MtaStDialog
                :dVisible.sync="BatchFailureDLShow"
                dType="warning"
                dMessage="选中的数据将彻底删除"
                @comfirmCallback="ToSaveDelete()"
        ></MtaStDialog>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex';

    export default {
        name:     'EditableTreeItem',
        props:    {
            node: {
                type:    Object,
                default: {},
            },
            data: {
                type:    Object,
                default: {},
            },
        },
        data() {
            return {
                input:              '',
                showItem:           true,
                oldValue:           '',
                BatchFailureDLShow: false,
                mydata:             '',
            };
        },
        computed: {
            getAuthOrgId() {
                return this.getAuth.orgId;
            },
            ...mapGetters([
                              'getAuth',
                          ]),
        },
        methods:  {
            ToSaveDelete() {
                this.$emit('treeItemRemove', this.mydata);
            },
            // label 点击触发事件
            labelClick(node, data) {
                this.$emit('labelClick', {
                    'data': data,
                    'Node': node,
                });
            },
            // 新增事件触发
            append(node, data) {
                this.$emit('treeItemAppend', data);
            },
            // 删除事件触发
            remove(node, data) {
                this.BatchFailureDLShow = true;
                this.mydata = node;

            },
            // 编辑事件触发
            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);
            },
            handleDialogClose() {
                this.mydata = '';
                this.BatchFailureDLShow = false;
            }

        },
    };
</script>


