<!--145501 【TS:201906120789-财富业委会_杨哲宇-【需求类型】	需求【需求描述】	希望提供一个左右联动】-->
<template>
    <div class="cascad-menu">
        <scroller class="left-menu" :style="{height:mainHeight+'px', width: (menuStyles.width)+'px'}">
            <div class="left-item" :style="{width: (menuStyles.width)+'px', height: (menuStyles.height)+'px' }"
                :class="[index == currentIndex?'current': '']"
                @click="chooseleft(menu, index)" v-for="(menu, index) in menus" :key="index">
                <slot name='title'>
                    <text class="text">{{menu.name}}</text>
                </slot>
            </div>
        </scroller>
        <scroller class="right-menu" @scroll="scrollHandler" :style="{height:mainHeight+'px'}">
            <div class="right-item" ref="rightItem" v-for="(menu, i) in menus" :key="i">
                
                    <text class="title" slot="title">{{menu.name}}</text>
                <slot name="content">
                    <div v-for="(item, j) in menu.data" :key="j">
                        <div class="data-wrapper">
                        <text class="data">{{item.name}}</text>
                        </div>
                    </div>
                </slot>
            </div>
        </scroller>
    </div>
       
</template>
<script>
 import Light from "light";
 const dom = Light.requireModule('dom');
 import Utils from "lighting-ui/packages/utils";
 let defaultMenus=
    [
        {
        name: '菜单1',
        data: [
            {
            name: '1.1'
            },
            {
            name: '1.2'
            },
            {
            name: '1.3'
            },
            {
            name: '1.4'
            },
            {
            name: '1.5'
            },
            {
            name: '1.6'
            }
        ]
        },
        {
        name: '菜单2',
        data: [
            {
            name: '1.1'
            },
            {
            name: '1.2'
            },
            {
            name: '1.3'
            },
            {
            name: '1.4'
            },
            {
            name: '1.5'
            },
            {
            name: '1.6'
            }
        ]
        },
        {
        name: '菜单3',
        data: [
            {
            name: '1.1'
            },
            {
            name: '1.2'
            },
            {
            name: '1.3'
            },
            {
            name: '1.4'
            },
            {
            name: '1.5'
            },
            {
            name: '1.6'
            }
        ]
        },
        {
        name: '菜单4',
        data: [
            {
            name: '1.1'
            },
            {
            name: '1.2'
            },
            {
            name: '1.3'
            },
            {
            name: '1.4'
            },
            {
            name: '1.5'
            },
            {
            name: '1.6'
            }
        ]
        },
        {
        name: '菜单5',
        data: [
            {
            name: '1.1'
            },
            {
            name: '1.2'
            },
            {
            name: '1.3'
            },
            {
            name: '1.4'
            },
            {
            name: '1.5'
            },
            {
            name: '1.6'
            }
        ]
        },
        {
        name: '菜单6',
        data: [
            {
            name: '1.1'
            },
            {
            name: '1.2'
            },
            {
            name: '1.3'
            },
            {
            name: '1.4'
            },
            {
            name: '1.5'
            },
            {
            name: '1.6'
            }
        ]
        },
        {
        name: '菜单7',
        data: [
            {
            name: '1.1'
            },
            {
            name: '1.2'
            },
            {
            name: '1.3'
            },
            {
            name: '1.4'
            },
            {
            name: '1.5'
            },
            {
            name: '1.6'
            }
        ]
        },
        {
        name: '菜单8',
        data: [
            {
            name: '1.1'
            },
            {
            name: '1.2'
            },
            {
            name: '1.3'
            },
            {
            name: '1.4'
            },
            {
            name: '1.5'
            },
            {
            name: '1.6'
            }
        ]
        },
        {
        name: '菜单9',
        data: [
            {
            name: '1.1'
            },
            {
            name: '1.2'
            },
            {
            name: '1.3'
            },
            {
            name: '1.4'
            },
            {
            name: '1.5'
            },
            {
            name: '1.6'
            }
        ]
        }
    ];
    export default {
        props: {
            menus: {
                type: Array,
                default(){
                    return defaultMenus
                }
            },
            mainHeight:{
                type: [String,Number],
                default:1334
            },
            menuStyles: {
                type: Object,
                default: () => ({
                    width: 200,
                    height: 80
                })
            },
        },
        data(){
            return {
                 rightTops: [],
                 scrollY: 0,
           }
        },
        mounted() {
            this._calculateHeight();
        },
        computed: {
            //选中的值
            currentIndex () {
                const { scrollY, rightTops } = this
                let index = rightTops.findIndex((height, i) => {
                    return scrollY >= rightTops[i] && scrollY < rightTops[i + 1]
                })
                if (scrollY > rightTops[index] + 50) {
                    index++;
                }
                return index
            }
        },
        methods: {
            // 滚动
            scrollHandler(e) {
                //防止ios回弹效果
                if(e.contentOffset.y<0){
                    this.scrollY = Math.abs(Math.round(e.contentOffset.y));
                }else{
                    this.scrollY = 0;
                }
            },
            //左侧点击
            chooseleft(item, index) {
                const el = this.$refs.rightItem[index];
                dom.scrollToElement(el,{});
            },
            _calculateHeight() {
                let lis = this.$refs.rightItem;
                let height = 0
                this.rightTops.push(height)
                if(weex.config.env.platform=="Web"){
                    this.$refs.rightItem.forEach((li,index) => {
                        dom.getComponentRect(li, ret=> {
                            height += ret.size.height*weex.config.env.dpr
                            this.rightTops.push(height)
                        });
                    })
                }else{
                    this.$refs.rightItem.forEach((li,index) => {
                        dom.getComponentRect(li, ret=> {
                            height += ret.size.height
                            this.rightTops.push(height)
                        });
                    })
                }
            }
        }
    }
</script>

<style >
.cascad-menu{
    flex-direction: row;
    width: 750px;
}
.left-menu{
    background-color: #f3f5f7;
    border-width: 1px;
    border-color:#ccc;
}

.left-item{
    border-bottom-width: 1px;
    border-bottom-color:#ccc;
    align-items: center;
    justify-content: center;
    background-color: #f3f5f7;
}
        
.current{
    background-color: #fff;
}
     
.right-menu{flex:1;}
.right-item{border-bottom-width: 1px; border-bottom-color:#ccc;}
        
.title{
    border-bottom-width: 1px;
    border-bottom-color:#ccc;
    height :50px;
    line-height: 50px;
    padding-left: 30px;
}
.data-wrapper{
    align-items: center;
}        
.data{
    height: 100px;
}
</style>
