<template>
	<view class="blank-page" v-if="showBlank">
		<view class="blank-img-box">
			<slot name="blankImg">
				<image src="../../static/home/blank-box.png" class="blank-img"></image>
			</slot>
		</view>
		<view class="blank-text">
			<text>{{message}}</text>
		</view>
		<view class="blank-button" @click="btnClick" v-if="showButton">
			<slot name="button">
				<view class="default-button">
					{{buttonText}}
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
	/**
	 * 组件根据文档定位至最中部分，层级为 2
	 * 背景并非全部覆盖，请根据需求显示隐藏
	 * 自定义图片的时候需要自己写尺寸
	 * */
	export default {
		props: {
			showBlank: {
				type: Boolean,
				default: true
			},
			message: {
				type: String,
				default: '暂无信息!!'
			},
			buttonText: {
				type: String,
				default: '按钮文字'
			},
			showButton: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {

			}
		},
		methods: {
			btnClick() {
				this.$emit('btnClick')
			}
		},
	}
</script>

<style scoped lang="scss">
	.blank-page {
		width: 100vw;
		padding-top: 100px;
		// position: absolute;
		// top: 50%;
		// left: 50%;
		// transform: translate(-50%, -50%);
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.blank-img-box {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.blank-img {
		display: block;
		width: 193px;
		height: 131px;
	}

	.blank-text {
		margin-top: 5px;
		margin-bottom: 32px;
		font-size: 14px;
		color: #AAAAAA;
	}

	.default-button {
		width: 160px;
		height: 44px;
		background: rgb(52, 137, 255);
		box-shadow: 0px 2px 3px rgba(52, 137, 255, 0.29);
		border-radius: 22px;
		color: #fff;
		line-height: 44px;
		text-align: center;
	}
</style>
