<template>
    <view
        v-if="status"
        class="c-color c-font-small status"
        :style="{
            'background': bgColor,
            'color': color,
            'border-radius': borderRadius,
            'box-shadow': boxShadow,
            'font-size': fontSize
        }"
    >
        <image
            v-if="status === 'loading'"
            :src="loadingImg"
            class="loading"
        />
        <view
            v-else
            class="status-txt"
            @tap="onReload"
        >{{ stat2Txt[status] }}</view>
    </view>
</template>

<script>
/**
 * @file list loading
 * @author  haoyan@baidu.com
 * @categories 业务组件
 * @tags [component]
*/
export default {
    config: {
        component: true
    },
    props: {
        /* 状态 */
        status: {
            type: String,
            default: 'init'
        },
        /* 背景色 */
        bgColor: {
            type: String,
            default: '#ffffff'
        },
        /* 字色 */
        color: {
            type: String,
            default: ''
        },
        /* 字体大小 */
        fontSize: {
            type: String,
            default: '0.12rem'
        },
        /* loading图 */
        loadingImg: {
            type: String,
            default: 'https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2669382790,1249805892&fm=179&app=35&f=GIF?w=100&h=50&s=FF8838624B8367744EFDF0CA0000E0B1'
        },
        /* border-radius */
        borderRadius: {
            type: String,
            default: 'none'
        },
        /* box-shadow */
        boxShadow: {
            type: String,
            default: 'none'
        },
        /* 完成后显示文案 */
        completeText: {
            type: String,
            default: '没有更多内容了'
        }
    },
    data() {
        return {
        };
    },
    components: {
    },
    computed: {
        stat2Txt() {
            return {
                init: '',
                loading: '正在加载...',
                fail: '加载失败，点击重新加载',
                complete: this.completeText || '没有更多内容了'
            };
        }
    },
    methods: {
        onReload() {
            if (this.status === 'fail') {
                /* 重试 */
                this.$emit('reload');
            }
        }
    }
};

</script>
<style>

.status {
    position: relative;
    height: .52rem;
    line-height: .52rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

.status-txt {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
    text-align: center;
}

.loading {
    width: .8rem;
    height: .4rem;
    display: inline-block;
}
</style>
