/** 
* grid-list.vue
* Version: 0.1
* User: zjx
* Date: 2017-09-07
* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
* grid-list
*/
<template>
	<div class="grid-list" v-bind:class="initClass">
	    <ul class="grid-list-scroll" v-show="list.length">
	        <li class="grid-list-row" v-for="(item, index) in list" :key="item.value">
	          	<v-touch class="grid-list-handle" v-on:tap="onTapRow(index)">
	          		<img :src="item.leftImage" class="grid-list-left-image" v-if="item.leftImage">
		            <span class="grid-list-left-icon" v-else-if="item.leftIcon" v-html="item.leftIcon"></span>
		            <div>
		                <p class="grid-list-title">{{ item.title }}</p>
		                <p class="grid-list-subtitle" v-if="item.subtitle">{{ item.subtitle }}</p>
		            </div>
		            <span class="grid-list-right-text" v-if="item.rightText">{{ item.rightText }}</span>
		            <span class="grid-list-right-icon">&#xe611;</span>
	          	</v-touch>
	            <div class="grid-list-content">
		            <v-touch tag="div" class="grid-list-button" v-for="(buttonItem, buttonIndex) in item.buttons" v-on:tap="onTapButton(index, buttonIndex)">
		            	<p class="grid-list-button-bg" v-html="buttonItem.icon"></p>
		            </v-touch>
	            </div>
	        </li>
	        <v-touch tag="li" class="grid-list-load"  v-on:tap="onTapLoad" v-show="loadShowFlag">{{ loadText }}</v-touch>
	    </ul>
	    <p class="grid-list-tip" v-show="(list.length == 0)">{{ tip }}</p>
	</div>
</template>
<script>
	const PAGE_SIZE = 10;
    export default {
        props: ['initParam'],
        data () {
            return {
                // 组件初始化列表
                list: this.initParam.list,
                // 组件初始化样式
                initClass: this.initParam.class,
                // 组件初始化无数据显示文字
                tip: this.initParam.tip,
                 // loading是否显示
                loadShowFlag: false,
                pagesize: this.initParam.pagesize || PAGE_SIZE,
                loadText: Vue.t('scroll.clickToLoadMore')
            }
        },
        mounted(){
            this.setLoadShowFlag(this.list.length);
        },
        methods: {
        	setLoadShowFlag(number){
                this.loadShowFlag = (number >= this.pagesize);
            },
            onTapRow(index){
                tapRow(this, index);
            },
            onTapButton(index, buttonIndex){
            	tapButton(this, index, buttonIndex);
            },
            changeList(list){
                changeList(this, list);
            },
            onTapLoad(){
            	tapLoad(this);
            }
        }
    }
    //点击下拉出现按钮
    function tapRow(self, index) {
		self.$emit('grid-list-tap',index);
    }
    //通知事件和当前点击列表的下标及按钮的下标
    function tapButton(self, index, buttonIndex) {
        self.$emit('grid-list-button-tap', index, buttonIndex);
        self.foldingListIndex = null;
    }

    function changeList(self, list) {
        self.list = list;
        self.setLoadShowFlag(list.length - self.list.length);
        self.$nextTick(function () {
        	self.loadText = Vue.t('scroll.clickToLoadMore');
        });
    }
    
    function tapLoad(self){
    	self.$emit('grid-list-load-tap');
        self.loadText = Vue.t('scroll.loading');
    }
</script>