<template>
    <view class="middle-page" :style="customSty">
        <image
            :src="image"
            :style="imageSty"
            class="middle-page__image"
        />
        <view v-if="text && !textList.length" class="middle-page__text">{{ text }}</view>
        <view v-if="textList && textList.length" class="middle-page__text">
            <view
                v-for="(itm, idx) in textList"
                :key="idx"
                class="c-tac"
            >
                {{ itm }}
            </view>
        </view>
        <view
            v-if="showBtn"
            class="middle-page__btn"
            @tap="handleTap"
        >{{ button }}</view>
    </view>
</template>
<script>
/**
 * @file 中间页
 * @author yantingxi
 * @categories 业务组件
 * @tags [component]
 */
import {netError} from '../../utils/img-map';
export default {
    config: {
        component: true
    },
    props: {
        /**
         * 背景图
         */
        image: {
            type: String,
            default: netError
        },
        /**
         * 文字
         */
        text: {
            type: String,
            default: '网络不给力，请稍后重新尝试'
        },
        /**
         * 文字列表
         */
        textList: {
            type: Array,
            default: () => []
        },
        /**
         * 是否展示按钮
         */
        showBtn: {
            type: Boolean,
            default: true
        },
        /**
         * 按钮文案
         */
        button: {
            type: String,
            default: '重新加载'
        },
        /**
         * 自定义样式
         */
        customSty: {
            type: Object,
            default: () => ({})
        },
        /**
         * 图片自定义样式
         */
        imageSty: {
            type: Object,
            default: () => ({})
        }
    },
    methods: {
        handleTap(event) {
            /**
             * 按钮点击
             *
             * @param {Object} event 点击事件对象
            */
            this.$emit('btnTap', event);
        }
    }
};
</script>
<style lang="less" scoped>
.middle-page {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 40vh;
    transform: translateY(-50%);
    &__text {
        margin-top: 15px;
        width: 300px;
        font-size: .15rem;
        color: #999;
        text-align: center;
    }
    &__btn {
        margin-top: 15px;
        padding: 5px 20px;
        border-radius: 25px;
        color: #555;
        border: 1px solid #999;

        &:active {
            background: #f1f1f1;
        }
    }
}
</style>
