/**
* list.vue
* Version: 0.1
* User: shz
* Date: 2017-06-20
* Copyright(c)  2017. U-GEN Tech.Co,Ltd. All Rights Reserved.
* list
*/
<template>
    <div class="u-list" v-bind:class="initClass">
        <ul class="u-list-scroll" v-show="list.length">
            <v-touch tag="li" class="u-list-row" v-for="(item, index) in list" :key="index"
                     v-bind:class="[item.class, {disabled: item.disabled}]" v-on:tap="onTapRow(index)">
                <img class="u-list-left-image" v-if="item.leftImage" v-bind:src="item.leftImage">
                <p class="u-list-left-bg-image" v-bind:class="item.imgClass" v-else-if="item.imgClass"></p>
                <span class="u-list-left-icon" v-else-if="item.leftIcon" v-html="item.leftIcon"></span>
                <div>
                    <p class="u-list-title">{{ item.title }}</p>
                    <p class="u-list-subtitle" v-if="item.subtitle">{{ item.subtitle }}</p>
                </div>
                <span class="u-list-right-text" v-if="item.rightText">{{ item.rightText }}</span>
                <span class="u-list-right-icon" v-if="(item.rightIcon || item.disabled !== true)"
                      v-html="item.rightIcon"></span>
                <img class="u-list-right-image" v-else-if="(item.rightImage || item.disabled !== true)"
                     v-bind:src="item.rightImage">
            </v-touch>
            <v-touch tag="li" class="u-list-load" v-on:tap="onTapLoad" v-show="loadShowFlag">
                <span class="u-list-load-animation" v-show="loadFlag"></span>
                {{ loadText }}
            </v-touch>
        </ul>
        <p class="u-list-tip" v-show="tipShowFlag && (list.length == 0)">{{ tip }}</p>
    </div>
</template>

<script>
    export default {
        props: ['initParam'],
        data() {
            return {
                // 组件初始化列表
                list: this.initParam.list || [],
                // 组件初始化样式
                initClass: this.initParam.class,
                // 组件初始化无数据显示文字
                tip: this.initParam.tip,
                pagesize: this.initParam.pagesize,
                pullup: this.initParam.pullup || false,
                loadText: Vue.t('scroll.clickToLoadMore'),
                // loading是否显示
                loadShowFlag: false,
                // 是否在loading
                loadFlag: false,
                tipShowFlag: false

            }
        },
        mounted() {
            this.setLoadShowFlag(this.list.length);
            let ulistDom = this.$el;
            let self = this;
            ulistDom.onscroll = function () {
				//在一些特殊情况下ulistDom.scrollHeight和ulistDom.offsetHeight + ulistDom.scrollTop会相差1px,这里考虑1px的误差
                if (!self.loadFlag && self.pullup && (ulistDom.scrollHeight - (ulistDom.offsetHeight + ulistDom.scrollTop)) <= 1) {
                    self.loadText = Vue.t('scroll.loading');
                    self.loadFlag = true;
                    self.$emit('u-list-load');
                }
            }
        },
        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) {
        if (self.list[index].disabled !== true) {
            self.$emit('u-list-tap', index);
        }
    }

    // 通知点击加载更多事件
    function tapLoad(self) {
        // loading
        if (!self.loadFlag && !self.pullup) {
            self.$emit('u-list-load');
            self.loadText = Vue.t('scroll.loading');
            self.loadFlag = true;
        }
    }

    // 修改list组件列表
    function changeList(self, list) {
        let array = Array.isArray(list) ? list : [];
        self.tipShowFlag = (array.length === 0);
        self.setLoadShowFlag(array.length - self.list.length);
        self.list = array;
        self.$nextTick(function () {
            self.loadText = Vue.t('scroll.clickToLoadMore');
            self.loadFlag = false;
        });
    }
</script>