<template>
	<view class="el-empty" :style="[emptyStyle]" v-if="show">
		<image :style="{ width: width + 'px', height: height + 'px' }" :src="getImages(mode)" mode="widthFix"></image>
		<text class="text" :style="[textStyle]">{{text ? text : tips[mode]}}</text>
		<view class="wrap">
			<slot />
		</view>
	</view>
</template>

<script setup>
	import { computed,watch,ref,onMounted,nextTick, reactive } from "vue";
	import { deepMerge } from "../../libs/utils.js";
	import { addStyle } from "../../libs/style.js";
	import http from "../../http/http.js";
	
	const props = defineProps({
		// 内置图标名称，或图片路径，建议绝对路径
		icon: {
		    type: String,
		    default: ''
		},
		// 提示文字
		text: {
		    type: String,
		    default: ''
		},
		// 文字颜色
		textColor: {
		    type: String,
		    default: '#c0c4cc'
		},
		// 文字大小
		textSize: {
		    type: [String, Number],
		    default: 14
		},
		// 图标的颜色
		iconColor: {
		    type: String,
		    default: '#c0c4cc'
		},
		// 图标的大小
		iconSize: {
		    type: [String, Number],
		    default: 90
		},
		// 选择预置的图标类型
		mode: {
		    type: String,
		    default: 'car'
		},
		//  图标宽度，单位px
		width: {
		    type: [String, Number],
		    default: 160
		},
		// 图标高度，单位px
		height: {
		    type: [String, Number],
		    default: 160
		},
		// 是否显示组件
		show: {
		    type: Boolean,
		    default: true
		},
		// 组件距离上一个元素之间的距离，默认px单位
		marginTop: {
		    type: [String, Number],
		    default: 0
		},
		customStyle: {
			type: [String,Object],
			default: ''
		}
	});
	
	const emits   = defineEmits(["fixed","unfixed"]);
	
	const tips = reactive({
		car: '购物车为空',
		search: '没有搜索结果',
		address: '没有收货地址',
		order: '订单为空',
		history: '无历史记录',
		message: '消息列表为空',
		data: '亲，暂无相关数据',
		page: '您查看的页面不存在',
		comment: '暂无评论'
	});
	
	const emptyStyle = computed(()=>{
		const style = {}
		style.marginTop = props.marginTop + 'px';
		return deepMerge(addStyle(props.customStyle), style);
	});
	
	const textStyle = computed(()=>{
		const style = {}
		style.color = props.textColor
		style.fontSize = props.textSize + 'px';
		return style;
	});
	
	const isSrc = computed(()=>{
		return props.icon.indexOf('/') >= 0
	});
	
	const getImages = (value)=>{
		return http.getDomain() + '/static/mobile/empty/' + value + '.png';
	}
	
</script>

<style lang="scss" scoped>
	.el-empty {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.text {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;
		}
	}
	.wrap {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
	}
</style>