/**
* timeline.vue
* Version: 0.1
* User: zjx
* Date: 2017-09-07
* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
* timeline
*/
<template>
    <div class="timeline" v-bind:class="initClass">
        <ul class="timeline-scroll" v-show="list.length">
            <li class="timeline-row" v-for="(item, index) in list" :key="index" v-on:tap="onTapRow(index)">
            	<p class="timeline-left-text" v-if="item.leftText">{{ item.leftText }}</p>
                <img class="timeline-left-image" v-if="item.leftImage" v-bind:src="item.leftImage">
                <div>
                    <p class="timeline-title">{{ item.title }}</p>
                    <p class="timeline-subtitle" v-if="item.subtitle">{{ item.subtitle }}</p>
                </div>
                <p class="timeline-right-text" v-if="item.rightText">{{ item.rightText }}</p>
                <img class="timeline-right-image" v-if="item.rightImage" v-bind:src="item.rightImage">
            </li>
            <v-touch tag="li" class="timeline-load" v-on:tap="onTapLoad" v-show="loadShowFlag">{{ loadText }}</v-touch>
        </ul>
        <p class="timeline-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,
                pagesize: this.initParam.pagesize || PAGE_SIZE,
                loadText: Vue.t('scroll.clickToLoadMore'),
                // loading是否显示
                loadShowFlag: false,
                // 是否在loading
                loadFlag: false
            }
        },
        mounted(){
            this.setLoadShowFlag(this.list.length);
        },
        methods: {
            setLoadShowFlag(number){
                this.loadShowFlag = (number >= this.pagesize);
            },
            onTapRow(index){
                tapRow(this, index);
            },
            onTapLoad(){
                tapLoad(this);
            },
            changeList(list){
                changeList(this, list);
            }
        }
    }
    // 通知事件和当前点击列表选项下标
    function tapRow(self, index) {
        self.$emit('timeline-tap', index);
    }
    // 通知点击加载更多事件
    function tapLoad(self) {
        // loading
        if (!self.loadFlag) {
            self.$emit('timeline-load-tap');
            self.loadText = Vue.t('scroll.loading');
            self.loadFlag = true;
        }
    }
    // 修改list组件列表
    function changeList(self, list) {
        self.setLoadShowFlag(list.length - self.list.length);
        self.list = list;
        self.$nextTick(function () {
            self.loadText = Vue.t('scroll.clickToLoadMore');
            self.loadFlag = false;
        });
    }
</script>