<template>
	<view class="k-empty"
		:style="{
			'--size': size + 'px'
		}"
		@click="emptyClick"
	>
		<image :style="{
			width: iconSize
		} " class="k-empty_image" src="./empty.png" mode="widthFix"></image>
		<view class="k-empty_text">{{ text }}</view>
	</view>
</template>

<script>
	/**
	 * 空内容占位组件
	 * @description 空内容占位组件
	 * @property {type} text 空内容描述文字（默认：空空如也~）
	 * @property {type} size text描述字体大小（默认：16）
	 * @event {Function()} emptyClick 点击空占位组件， 可自定义刷新等其他事件
	 */
	export default {
		name: 'k-empty',
		props: {
			// 提示文字信息
			text: {
				type: String,
				default: '暂无信息'
			},
			// 字体大小
			size: {
				type: [String, Number],
				default: 16
			},
			// 图标大小， 需要带单位
			iconSize: {
				type:[String, Number],
				default: '50%',
			}
		},
		data() {
			return {}
		},
		methods: {
			// 点击组件， 可自定义事件
			emptyClick() {
				// 点击组件事件
				this.$emit('emptyClick')
			}
		}
	}
</script>

<style scoped lang="scss">
	.k-empty {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		// margin-top: 30px;
		&_image {
			width: 50%;
			margin-top: -15px;
		}
		&_text {
			font-size: var(--size);
			color: #aaa;
			margin-top: -18px;
		}
	}

</style>
