<template>
    <div ref="goSimpleTree" class="go_simple_tree">
        <ul>
            <li class="menu_li clearfix activeLi level_one" :key="item.label" v-for="item of items">
                <div @click="clickNode(item, $event)" class="nodeInfo clearfix" :class="item.active ? 'active' : ''" >
                    <div v-if="showMainIcon" class="liImg pull-left">
                        <i :class="rootIcon"></i>
                    </div>
                    <div class="label pull-left">{{ item.label }}</div>

                    <div class="pull-right" v-show="operation" @click.stop="addTreeNode" style="padding-right: 20px;font-size: 18px;position: relative;top:-2px">
                        <Icon type="ios-add-circle-outline"/>
                    </div>
                </div>

                <ul>
                    <li :key="sonItem.name" class="menu_li clearfix level_two" v-for="sonItem of item.childrens" >
                        <div @click="clickNode(sonItem, $event)" class="nodeInfo clearfix" :class="sonItem.active ? 'active' : ''" >
                            <div class="liImg pull-left" v-if="showSubIcon">
                                <i :class="subIcon"></i>
                            </div>
<!--                            如果不是创建节点-->
                            <div class="label pull-left" :class="extendClass" v-if="sonItem.state !== 'create'">
                                {{ sonItem.name||sonItem.label }}
                            </div>
<!--                            如果是创建节点-->
                            <div class="label pull-left"  :class="extendClass" v-if="sonItem.state === 'create'">
                                <input @blur="saveNode($event, sonItem, 'blur')" @keyup.enter="saveNode($event, sonItem, 'enter')" class="input_el" type="text"/>
                            </div>
                            <!--删除按钮-->
                            <div v-if="sonItem.state !== 'create' && sonItem.operation && operation" class="pull-right node_btn" @click.stop="delTreeNode(sonItem)" >
                                <Icon type="ios-trash"/>
                            </div>
                            <!--编辑按钮-->
                            <div
                                v-if="
                  sonItem.state !== 'create' && sonItem.operation && operation
                "
                                class="pull-right node_btn"
                                @click.stop="editorTreeNode(sonItem)"
                            >
                                <Icon type="md-create"/>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>
    import goDialog from "../../jsCom/go-dialog";
    import {AssertUtils} from "goingutils";

    export default {
        name: "go-simple-tree",
        props: {
            rootIcon:{
                type: String,
                default: "ivu-icon ivu-icon-md-paper"
            },
            subIcon:{
                type: String,
                default: "paper ivu-icon ivu-icon-md-paper"
            },
            //显示子项图片
            showSubIcon: {
                type: Boolean,
                default: true
            },
            //显示主项图片
            showMainIcon: {
                type: Boolean,
                default: true
            },
            operation: {
                type: Boolean,
                default: true
            },
            items: {
                type: Array,
                default: () => []
            }
        },
        computed: {
            extendClass(){
                //如果不是显示子项图标
                if(this.showSubIcon===false){
                    return "point_icon";
                }
                return "";
            }
        },
        methods: {
            //删除节点
            delTreeNode(sonItem) {
                let vueObj = this;
                this.$WinUtils.executeConfirm("您确定删除该记录吗?", function () {
                    vueObj.$emit("delTreeNode", sonItem.id);
                });
            },
            //编辑节点
            editorTreeNode(sonItem) {
                let vueObj = this;
                goDialog.attachForm(
                    {
                        height: 200,
                        width: 350,
                        title: "输入新的节点名称",
                        config: {
                            fieldAry: [{id: "name", label: "类别名称", defVal: sonItem.name}]
                        },
                        //确定按钮
                        confirmBtn(goingForm) {
                            let subData = goingForm.getSubmitData();
                            subData.id = sonItem.id;
                            vueObj.$emit("updateNodeName", {...subData});
                        }
                    },
                    this
                );
            },
            //清空选择状态
            clearSelect(){
                $(this.$refs.goSimpleTree).find(".nodeInfo.active").removeClass("active");
            },
            //点击节点
            clickNode(item, event) {
                //移除选择的状态
                $(event.target).closest(".go_simple_tree").find(".nodeInfo.active").removeClass("active");
                //设置其子项的选中状态
                $(event.target).closest(".nodeInfo").addClass("active");
                //触发节点点击事件
                this.$emit("click", item);
            },
            saveNode(event, item, eventType) {
                let val = $(event.target).val();
                //如果保存操作为false 则进行保存操作
                if (!item.saveFlag) {
                    if (AssertUtils.isNotEmpty(val) && $.trim(val + "").length > 0) {
                        this.$emit("saveItem", {...item, val});
                    } else {
                        $(event.target).closest(".menu_li").remove();
                    }
                }
                //如果是点击回车 则进行保存操作
                if (eventType === "enter") {
                    item.saveFlag = true;
                }
            },
            //添加树节点
            addTreeNode() {
                let vueObj = this;
                this.$emit("addItem");
                setTimeout(function () {
                    $(vueObj.$refs.goSimpleTree).find("input").focus();
                }, 100);
            }
        },
        mounted() {
        },
        components: {}
    };
</script>
