<template>
    <view
        class="b-list-empty c-font-normal">
        <view class="b-list-empty-wrap">
            <image v-if="emptyImg" :src="emptyImg"  class="empty-img c-gap-bottom-small" mode="widthFix"/>
            <view v-else class="empty-icon-wrap c-gap-bottom-large">
                <view class="empty-icon m-icon m-icon-listempty"></view>
            </view>
            <view class="empty-info">
                <view
                    v-for="(item, index) in info"
                    :key="index"
                    :style="itemStyle"
                    class="info-item">
                    <text
                        :style="{color: item.url? primaryColor : ''}"
                        @tap="tapInfo(item)">
                        {{item.text}}
                    </text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 空列表
 * @author wangying51
 */
import {navigate} from '../../utils/navigate';
import * as Log from '../../utils/log';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
    },
    props: {
        info: {
            type: Array,
            default: [
                {
                    text: '没有更多结果'
                }
            ]
        },
        itemStyle: {
            type: Object
        },
        primaryColor: String,
        emptyImg: {
            type: String
        }
    },
    data() {
        return {
        };
    },
    methods: {
        tapInfo(e) {
            if (e.url) {
                // 发送日志
                Log.send({
                    type: 'l',
                    action: 'empty-url'
                });
                navigate({
                    url: e.url
                });
            }
        }
    }
};
</script>
<style lang="less">
.b-list-empty {
    &-wrap {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -75%);
        text-align: center;
    }
    .empty-img {
        width: 1.8rem;
        margin: 0 auto;
        display: block;
    }
    .empty-icon {
        color: #e9e9e9;
        font-size: 60px;
        line-height: 60px;
    }
    .empty-info {
        color: #999;
    }
    .info-item {
        display: inline-block;
        vertical-align: middle;
    }
}
</style>


