<template>
    <div :class="`${prefixCls}`">
        <div :class="getTreeNodeClasses()">
            <div :class="`${prefixCls}-node-expand-icon`" v-if="showExpandIcon">
                <span :class="`${prefixCls}-node-expand-loading`" v-show="loading">
                    <Icon type="loading" size="12px"/>
                </span>
                <Expand 
                    v-show="!loading" 
                    :expand="expand" 
                    @click="handleExpand"/>
            </div>
            <div :class="`${prefixCls}-node-content`"
                @click="handleClickTitle"
                :style="{
                    height: height,
                    ['line-height']: height
                }">
                <slot name="content"></slot>
            </div>
            <slot name="operate"></slot>
            <div :class="`${prefixCls}-node-checkbox`" 
                v-if="showChecked">
                <CheckBox 
                    ref="checkbox"
                    :checked="checked" 
                    @click="handleChecked"/> 
            </div>
            <div :class="`${prefixCls}-node-checkbox`" 
                v-if="showIndeterminate">
                <Indeterminate 
                    ref="indeterminate"
                    :checked="indeterminate" 
                    @click="handleChecked"/> 
            </div>
        </div>
        <div v-show="expand" :class="`${prefixCls}-node-children`">
            <slot name="children"></slot>
        </div>
    </div>
</template>
<script>
    import Expand from './expand'
    import CheckBox from './checkbox'
    import Indeterminate from './indeterminate'
    import Icon from '../../../base/icon/'

    const prefixCls = 'yy-select-member-153-tree'
    export default {
        name: 'YYTree',
        components: {
            Expand,
            CheckBox,
            Icon,
            Indeterminate
        },
        props: {
            showExpand: {
                type: Boolean,
                default: true
            },
            showExpandIcon: {
                type: Boolean,
                default: true
            },
            showChecked: {
                type: Boolean,
                default: true
            },
            showIndeterminate: {
                type: Boolean,
                default: false
            },
            loading: {
                type: Boolean,
                default: false
            },
            indeterminate: {
                type: Boolean,
                default: false
            },
            checked: {
                type: Boolean,
                default: false
            },
            expand: {
                type: Boolean,
                default: false
            },
            height: {
                type: String,
                default: '28px'
            }
        },
        data() {
            return {
                prefixCls: prefixCls
            }
        },
        methods: {
            getTreeNodeClasses() {
                return [
                    `${this.prefixCls}-node`,
                    {
                        [`${this.prefixCls}-node-expand`]: this.showExpand
                    }
                ]
            },
            handleExpand(isExpand) {
                this.$emit('handleExpand', isExpand)
            },
            handleChecked(isChecked) {
                if (!this.showChecked && !this.showIndeterminate) return;
                this.$emit('handleChecked', isChecked)
            },
            handleClickTitle() {
                if (this.showChecked) this.$refs.checkbox.$el.click();
                else if (this.showIndeterminate) this.$refs.indeterminate.$el.click();
            }
        }
    }
</script>