<template>
	<view class="box">
		<image :src="image?image:images[mode]"></image>
		<slot v-if="!text">
			<view class="hiht">暂无商品，去<text @click="$emit('click')">添加商品</text></view>
		</slot>
		<view class="hiht" v-if="text" @click="$emit('click')">{{text}}</view>
	</view>
</template>

<script>
	/**
	 * steps 内容为空
	 * @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景
	 * @property {String} mode 设置模式（默认list）
	 */
	export default {
		name: 'd-empty',
		props: {
			mode: {
				type: String,
				default: 'list'
			},
			text: {
				type: String,
				default: ''
			},
			image: {
				type: String,
				default: ''
			},
			images: {
				type: [Object,Array],
				default: () => {
					return {
						'list': '../../static/image/list.png',
						'search': '../../static/image/search.png'
					}
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 32rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	image {
		width: 200rpx;
		height: 173rpx;
	}

	.hiht {
		display: flex;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #6C7380;
		margin-top: 32rpx;
		text-align: center;
		text {
			color: #6ACDBB;
		}
	}
</style>
