<template>
    <div class="hanzo-menu-box">
        <div class="hanzo-menu-box__skeleton" v-if="skeleton">
            <div class="hanzo-menu-box__skeleton--search" v-if="showSearch"></div>
            <h-row class="hanzo-menu-box__skeleton--content" gutter="20">
                <h-col :span="6" v-for="item in 8" :key="item">
                    <div :class="['hanzo-menu-box__skeleton--content-item', `${item <= 4 ? 'hasBottom' : ''}`]">
                        <span class="skeleton-icon"></span>
                        <span class="skeleton-text"></span>
                    </div>
                </h-col>
            </h-row>
        </div>
        <div v-else>
            <div class="hanzo-menu-box__search" v-if="showSearch">
                <h-search 
                    v-model="searchValue" 
                    placeholderAlign="center"
                    :exerciseLeft="false" 
                    @focus="handleFocus"
                    @blur="handleBlur"
                    @change="handleChange"
                />
            </div>
            <div class="hanzo-men-box__comtent">
                <h-swipe class="hanzo-men-box__swipe" @change="handleSwipe" ref="swipe" :showIndicators="false">
                    <h-swipe-item v-for="(pageItem, index) in swipeData" :key="index">
                         <div class="hanzo-men-box__comtent--item" :style="{width: `${span}%`}" v-for="(item,index) in pageItem" :key="index" @click="handleClick(item)">
                            <div class="hanzo-menu-box-item">
                                <h-image :src="item.img" class="hanzo-menu-box-item__icon" mode="contain"></h-image>
                                <span class="hanzo-menu-box-item__text">{{item.text}}</span>
                            </div>
                        </div>
                    </h-swipe-item>
                </h-swipe>
                <div class="indicator-dot" v-if="!skeleton && !isSingle">
                    <div class="indicator-dot-box">
                        <div  v-for="(pageItem, index) in swipeData" :key="index" :class="[ 'dot-type', 'dot-left', currentIndex === index ? 'dot-active' : '' ]" >{{index + 1}}</div>
                    </div>
                </div>
                <div class="tips-btn" v-if="!skeleton && !isSingle">
                    <div class="tip-left" @click="handlePre"></div>
                    <div class="tip-right" @click="handleNext"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { hCol, hRow } from '../layout/index.js';
import hSearch from '../search/index.vue';
import hImage from '../image/index.vue';
import { hSwipe, hSwipeItem } from '../swipe/index';
export default {
    name: 'h-menu-box',
    components: {
        hCol,
        hRow,
        hSearch,
        hImage,
        hSwipe,
        hSwipeItem
    },
    props: {
        data: {
            type: Array,
            default: () => []
        },
        showSearch: {
            type: Boolean,
            default: true
        },
        colCount: {
            type: Number,
            default: 4
        },
        value: {
            type: String,
            default: ''
        },
        skeleton: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        colCount( val ) {
            this.span = Math.floor( 100 / val );
        },
        searchValue( val ) {
            console.log('val', val);
            this.$emit( 'update:value', val );
        },
        value(newV) {
            this.searchValue = newV;
        },
        data( data ) {
            this.formattData( data );
        }
    },
    data() {
        return {
            searchValue: this.value,
            span: Math.floor( 100 / this.colCount ),
            isSingle: true,
            currentIndex: 0,
            swipeData: []
        }
    },
    mounted() {
        this.formattData( this.data );
    },
    methods: {
        formattData( data ) {
            let	fullData = data.map( ( it ) => {
                    const { brandWindowId: windId, windowName: text, icon: img, iconUrl } = it || {};
                    return {
                        type: "page",
                        brandId: windId,
                        img: img ? img : iconUrl,
                        text: text ? text : windowName,
                        ...it
                    }
                });
            
            let isSingle = fullData.length <= 10;
            let swipeData = [];
            
            while (fullData.length > 0 ) {
                let swipePage = fullData.splice(0,10);
                swipeData.push(swipePage );
            }

            this.isSingle = isSingle;
            this.swipeData = swipeData;
        },
        handleSwipe( val ) {
            this.currentIndex = val;
        },
        handleClick( item ) {
            this.$emit('click', item);
        },
        handleFocus( e ) {
            this.$emit('focus', this.searchValue, e);
        },
        handleBlur(e) {
            this.$emit('blur', this.searchValue, e);
        },
        handleChange(e) {
            this.$emit('change', this.searchValue, e);
        },
        handlePre() {
            let current = ( this.currentIndex - 1 < 0 ) ? this.swipeData.length - 1 : this.currentIndex - 1;
            this.$refs.swipe.swipeTo( current );
        },
        handleNext() {
            let current = (this.currentIndex + 1 > this.swipeData.length - 1 ) ? 0 : this.currentIndex + 1;
            this.$refs.swipe.swipeTo( current );
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
