<template>
    <dl :class="['v-select-tree', sizeClass]" v-click-outside="clickOutside">
        <dt class="v-select-tree-dt">
            <a class="v-select-tree-selected" @click.stop.prevent="toggleItems" :style="{'width': inputWidth +'px'}">
                <span class="v-select-tree-selected-span">{{ showSelectInfo() }}</span>
                <i class="v-select-tree-selected-i v-icon-down-dir"></i>
            </a>
        </dt>
        <dd v-show="visible" class="v-select-tree-dd">
           <v-ztree
                :data="datas"
                :max-height="maxHeight"
                :width="treeWidth"
                show-checkbox
                node-key="id"
                ref="vSelectTree"
                :default-expanded-keys="defaultExpandedKeys"
                :default-checked-keys="defaultCheckedKeys"
                :props="defaultProps"
                @check-change="checkChange"
           >
           </v-ztree>
           <div class="v-select-tree-oper" v-if="showOper">
               <a class="v-select-tree-btn" @click.stop="selectAll">全选</a>
               <a class="v-select-tree-btn" @click.stop="clearAll">清空</a>
               <a class="v-select-tree-btn" @click.stop="certainSelect">确定</a>
           </div>
        </dd>
    </dl>
</template>

<script>
import VZtree from '../../v-ztree/index'
import clickoutside from '../../../../src/directives/clickoutside.js'
import settings from '../../../../src/settings/settings.js'

export default {
    name: 'VSelectTree',
    components: {
        VZtree
    },
    directives: {
        'click-outside': clickoutside
    },
    props: {
        datas: {
            type: Array,
            required: true
        },
        size: {
            type: String
        },
        // 输入框宽度
        inputWidth: {
            type: Number,
            default: 120
        },
        // 下拉树显示宽度
        treeWidth: {
            type: Number,
            default: 220
        },
        // 下拉树最大显示高度：不包括操作按钮栏高度
        maxHeight: {
            type: Number,
            default: 200
        },
        placeholder: {
            type: String,
            default: '请选择',
            validator: function (value) {
                return value!=null || value!=undefined;
            }
        },
        defaultCheckedKeys: Array,
        defaultExpandedKeys: Array,
        // 显示操作按钮
        showOper: {
            type: Boolean,
            default: true
        },
        // 返回的数据（包括ID列表或NODE列表）：
        // true： 如果父元素被选中，父元素的ID或Node及其子元素的ID或NODE都需要返回
        // false：如果父元素被选中，只返回父元素的ID或NODE，不返回子元素的ID或NODE
        resultNeedChildData: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            visible: false,
            results: '',
            resultKeys: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    watch: {
       
    },
    methods: {
        sizeClass () {
            let size = settings.sizeMaps[this.size] || settings.sizeMapDefault
            return size === settings.sizeMaps['large'] ? ' v-select-tree-large' : (size === settings.sizeMaps['middle'] ? ' v-select-tree-middle' : ' v-select-tree-small')
        },
        toggleItems () {
            this.visible = !this.visible;
        },
        clickOutside () {
            this.visible = false
        },
        // 显示选中的信息
        showSelectInfo () {
            let info = this.results.length > 0 ? this.results : this.placeholder;
            return info;
        },
        checkChange (val) {
            this.getAllCheckedKey()
        },
        getAllCheckedKey () {
            let self = this
            self.results = ''
            self.resultKeys = [];
            let nodes = self.resultNeedChildData? self.$refs.vSelectTree.getCheckedNodes(): self.$refs.vSelectTree.getCheckedNodes_noChild();
            nodes.forEach((item)=>{
                self.results += item.label + ',';
                self.resultKeys.push(item.id)
            })
            self.$emit('get-checked-items', self.resultKeys)
            self.results = self.results.substring(0, self.results.length - 1)
        },
        // 全选功能
        selectAll () {
            let keys = []
            let result = ''
            for (let i = 0, lens = this.datas.length; i < lens; i++) {
                keys.push(this.datas[i].id)
                result += this.datas[i].label + ','
            }
            this.$refs.vSelectTree.setCheckedKeys(keys)
            this.results = result.substring(0, result.length-1)
            this.$emit('get-checked-items', keys)
        },
        certainSelect () {
            this.getAllCheckedKey()
            this.visible = false
        },
        // 清空所有
        clearAll () {
            this.$refs.vSelectTree.setCheckedKeys([]);
            this.results = '';
            this.$emit('get-checked-items', null)
        }
    }
}
</script>