<template>
    <div class="app-slider-menu">
        <van-panel :title="title">
        <van-swipe :loop="false" indicator-color="white" :height="168" >
        <van-swipe-item v-for="(items,index) in groupMenus"  v-bind:key ="index">
            <van-grid :column-num="4">
                <van-grid-item
                    v-for="value in items"
                    :key="value.id"
                    :id="value.id"
                    :icon="value.icon?value.icon:'photo-o'"
                    :text="value.text"
                    @click="menuClick(value.name)"
                />
                </van-grid>
        </van-swipe-item>
        </van-swipe>
        </van-panel>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator';



@Component({
    components: {
      
    }
})
export default class AppSliderMenu extends Vue {

        /**
         * 名称
         *
         * @type {string}
         * @memberof AppSliderMenu
         */
        @Prop() public title?: string;

        /**
         * 菜单数据
         *
         * @type {Array<any>}
         * @memberof AppSliderMenu
         */
        @Prop() public menus?:Array<any>;

        /**
        *存储后的菜单
        *@memberof AppSliderMenu
        */
        public groupMenus:Array<any> =[];

         /**
         * 监听菜单数据
         * @memberof AppSliderMenu
         */
        @Watch('menus', { immediate: true, deep: true })
        onMenusChanged(val: any, oldVal: any) {
            if(val){
                if(val.length>=8){
                    let tempArray:any = []; 
                    val.forEach((item:any,index:any) =>{
                        if(index%8  == 0){
                             if(index != 0){
                                this.groupMenus.push(tempArray);
                             }
                             tempArray = [];
                        }
                        tempArray.push(item);
                    })
                    if(tempArray.length >0){
                        this.groupMenus.push(tempArray);
                    }
                }else{
                    this.groupMenus = val;
                }
            }
         }

        /**
         * 菜单点击事件
         *
         * @memberof AppSliderMenu
         */
        public menuClick($event:any){
            this.$emit('menuClick',$event);
        }
    
}
</script>
<style lang="less">
@import "./app-slider-menu.less";
</style>