<template>
    <li class="vue-tree-item" ref="node">
        <div class="item-wrapper" onselectstart="return false;">
            <span v-if="depth != 0">
                <i :class="[angleIcon]"></i>
            </span>
            <span
                v-else
                class="item-angle"/>

            <!--
                 v-if="options.checkbox"
            ·-->
           <template v-if="depth == 0" >
                <span
                    v-if="isMultiple"
                    class="item-checkbox"
                    :class="[labelIcon, labelStatus]"
                    @click="toggleChecked">
                </span>
           </template>
           <template v-else>
                <span
                    class="item-checkbox"
                    :class="[labelIcon, labelStatus]"
                    @click="toggleChecked">
                </span>
           </template>

            <i v-if="model.type=='user'" class="user-icon icon1" >&#xe863;</i>
            <!-- :class="isBold" -->
            <!--   :style="model.type=='user' ? 'margin-left: 5px' : '' "  -->
            <span
                :class="['item-label', isMultiple ?  'ml10' : depth != 0 ? 'ml10' : '', model.type=='user' ? 'ml5' : '' ]"
                @click="toggleChecked">{{ model.name }}</span>

            <!--  展开收起 -->
            <span
                v-if="isFolder"
                class="item-toggle"
                @click="toggle">
                {{toggleIcon}}
            </span>
            <span
                v-else
                class="item-toggle"/>
        </div>
        <ul v-if="isFolder" v-show="open" class="vue-tree-list">
            <tree-item
                v-for="(item, idx) in model.children"
                :depth="depth + 1"
                :model="item"
                :options="options"
                :eventBus="eventBus"
                :key="idx">
            </tree-item>
        </ul>
    </li>
</template>
<script>
import { Checklist } from 'vux'
// import { getNodeKey } from './util';

export default {
    name: 'treeItem',
    props: {
        model: {
            type: Object,
            default: function () {
                return {}
            }
        },
        eventBus: {
            type: Object,
            default: function () {
                return {}
            }
        },
        options: {
            type: Object,
            default: function () {
                return {}
            }
        },
        depth: {
            type: Number,
            default: 0
        },
        isMultiple: {
            type: Boolean,
            default: true
        }
    },

    data () {
        return {
            open: false,
            tree: null,
            labelIcon: this.options.uncheckedIcon,
            labelStatus: 'unchecked'
        }
    },

    computed: {
        angleIcon () {
            return this.options.angleIcon
        },

        toggleIcon () {
            return this.open ? '收起' : '展开'// this.options.closeIcon : this.options.openIcon
        },

        isFolder () {
            return this.model.children && this.model.children.length
        }

        // self () {
        //     let self = Object.assign({}, this.model, {children: []})
        //     delete self.children
        //     return self
        // }
    },
    watch: {
        // 'model.indeterminate'(val){
        //     this.emitEvent(this.model.checked, 1)
        // },
        model: {
            handler (newVal, oldVal) {
                if (newVal.indeterminate) {
                    this.labelIcon = this.options.halfCheckedIcon
                    this.labelStatus = 'half-checked'
                } else if (newVal.checked) {
                    this.labelIcon = this.options.checkedIcon
                    this.labelStatus = 'checked'
                } else {
                    this.labelIcon = this.options.uncheckedIcon
                    this.labelStatus = 'unchecked'
                }
            },
            deep: true,
            immediate: true
        }
    },

    methods: {
        toggle () {
            if (this.isFolder) {
                this.open = !this.open
            }
        },
        toggleChecked () {
            if (!this.isMultiple && this.depth == 0) {
                return
            }
            this.emitEvent(!this.model.checked, 2)
            // this.eventBus.$emit('checked-change',this.model, !this.model.checked, {})
            // this.tree.tree.$emit('checked-change',this.model, {})
            // this.$nextTick(() => {
            //     this.$emit('child-change', this.model, {
            //         checkedNodes: store.getCheckedNodes(),
            //         checkedKeys: store.getCheckedKeys(),
            //     });
            // });
        },
        emitEvent (checked, type, indeterminate) {
            this.eventBus.$emit('checked-change', this.model, checked, {})
        }

    },
    created () {
        //  this.tree = this.$parent;
    }
}
</script>
<style lang="less" scoped>
    .is-checked::before{
        color: #007aff;
        content: '\e442';
    }
</style>
