<template>
    <view class="van-tree-select" :class="customClass" :style="'height: ' + heightRes">
        <scroll-view scroll-y class="van-tree-select__nav">
            <van-sidebar v-if="items.length > 0" :active-key="mainActiveIndex" @change="onClickNav"
                custom-class="van-tree-select__nav__inner">
                <van-sidebar-item v-for="(item) in items" :key="item.index" custom-class="main-item-class"
                    active-class="main-active-class" disabled-class="main-disabled-class" :title="item.text"
                    :disabled="item.disabled"></van-sidebar-item>
            </van-sidebar>
        </scroll-view>
        <scroll-view scroll-y class="van-tree-select__content">
            <slot name="content"></slot>
            <view v-for="(item) in subItems" :key="item.id"
                :class="'van-ellipsis content-item-class van-tree-select__item ' + (activeId === item.id || (Array.isArray(activeId) && activeId.indexOf(item.id) > -1) ? 'van-tree-select__item--active content-active-class ' : '') + (arrow?'arrow':'') + (item.disabled ? 'tree-select__item--disabled content-disabled-class' : '')"
                :data-item="item" @click="onSelectItem">
                <text>{{ item.text }}</text>
                <view class="tree-select__item_icon">
                    <uni-icons type="checkbox-filled" size="20px" color="#1890FF" v-if="activeId === item.id || (Array.isArray(activeId) && activeId.indexOf(item.id) > -1)" />
                </view>       
            </view>
        </scroll-view>
    </view>
</template>
<script>
    import VanIcon from '../icon/index.vue';
    import VanSidebar from '../sidebar/index.vue';
    import VanSidebarItem from '../sidebar-item/index.vue';
    import Util from '../../utils/utils.js';
    export default {
        components: {
            'van-icon': VanIcon,
            'van-sidebar': VanSidebar,
            'van-sidebar-item': VanSidebarItem,
        },
        props: {
            customClass: {
                type: String,
                default: ''
            },
            arrow: {
                type: Boolean,
                default: false
            },
            items: {
                type: Array,
                default: []
            },
            activeId: null,
            mainActiveIndex: {
                type: Number,
                default: 0
            },
            height: {
                type: [Number, String],
                default: 300
            },
            max: {
                type: Number,
                default: 0
            }
        },
        computed: {
            heightRes: function() {
                return Util.addUnit(this.height);
            }
        },
        watch: {
            items: function(newData) {
                console.log(newData)
                this.updateSubItems();
            },
            mainActiveIndex: function(newData) {
                this.updateSubItems();
            }
        },
        data() {
            return {
                classes: ['main-item-class', 'content-item-class', 'main-active-class', 'content-active-class',
                    'main-disabled-class', 'content-disabled-class'
                ],
                subItems: []
            };
        },
        mounted() {
            console.log(this.items)
            this.updateSubItems();
        },
        methods: {
            // 当一个子项被选择时
            onSelectItem: function(event) {
                // console.log(event)
                var item = event.currentTarget.dataset.item;
                var isArray = Array.isArray(this.activeId);
                // 判断有没有超出右侧选择的最大数
                var isOverMax = isArray && this.activeId.length >= this.max;
                // 判断该项有没有被选中, 如果有被选中，则忽视是否超出的条件
                var isSelected = isArray ? this.activeId.indexOf(item.id) > -1 : this.activeId === item.id;
                if (!item.disabled && (!isOverMax || isSelected)) {
                    // console.log('选择的ITEM：')
                    // console.log(item)
                    this.$emit('click-item', item);
                }
            },
            // 当一个导航被点击时
            onClickNav: function(index) {
                // console.log(index)
                // console.log(this.items)
                var item = this.items[index];
                // console.log(item)
                if (!item.disabled) {
                    this.$emit('click-nav', {
                        index: index
                    });
                }
            },
            // 更新子项列表
            updateSubItems: function() {
                var _a = this,
                    items = _a.items,
                    mainActiveIndex = _a.mainActiveIndex;
                var _b = (items[mainActiveIndex] || {}).children,
                    children = _b === void 0 ? [] : _b;
                return this.setData({
                    subItems: children
                });
            }
        }
    };
</script>
<style>
    @import '../common/index.css';

    .van-tree-select {
        position: relative;
        display: -webkit-flex;
        display: flex;
        -webkit-user-select: none;
        user-select: none;
        font-size: 14px;
        font-size: var(--tree-select-font-size, 14px)
    }

    .van-tree-select__nav {
        -webkit-flex: 1;
        flex: 1;
        background-color: #f7f8fa;
        background-color: var(--tree-select-nav-background-color, #f7f8fa);
        --sidebar-padding: 12px 8px 12px 12px
    }

    .van-tree-select__nav__inner {
        width: 100% !important;
        height: 100%
    }

    .van-tree-select__content {
        -webkit-flex: 2;
        flex: 2;
        background-color: #fff;
        background-color: var(--tree-select-content-background-color, #fff)
    }

    .van-tree-select__item {
        display: flex;
        justify-content: space-between;
        position: relative;
        font-weight: 700;
        padding: 0 32px 0 16px;
        padding: 0 32px 0 var(--padding-md, 16px);
        line-height: 44px;
        line-height: var(--tree-select-item-height, 44px)
    }

    .tree-select__item_icon {
        position: absolute;
        right: 10px;
    }

    .van-tree-select__item.arrow::before {
        content: ' ';
        position: absolute;
        right: 24rpx;
        top: 32rpx;
        width: 16rpx;
        height: 16rpx;
        border-top: 4rpx solid #AAAAAA;
        border-right: 4rpx solid #AAAAAA;
        transform: rotate(45deg);
    }

    .van-tree-select__item--active {
        color: #ee0a24;
        color: var(--tree-select-item-active-color, #ee0a24)
    }

    .van-tree-select__item--disabled {
        color: #c8c9cc;
        color: var(--tree-select-item-disabled-color, #c8c9cc)
    }

    .van-tree-select__selected {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 16px;
        right: var(--padding-md, 16px)
    }
</style>