<template>
	<view class="b-shop-load" v-show="display">
		<view :style="[position]" class="content">
			<view class="Status-Img">
				<image :src="Img" :style="[Style]" class="img"></image>
			</view>
			<!-- 提示文字 -->
			<view class="Prompt-Text">
				{{Text}}
			</view>
		</view>
	</view>
</template>

<script>
	// 父组件必须存在position: relative;属性
	/**
	 * @param { String } type
	 * */
	import mixin from '@/static/js/mixin/mixin.js'
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js'
	export default {
		name: "b-shop-load",
		mixins: [mixin,restaurantmixins],
		props: {
			type: {
				type: String,
				default: ""
			},
			width: {
				type: String,
				default: "120"
			},
			height: {
				type: String,
				default: "120"
			},
			// 需要带入单位
			offset:{
				type:[Array,String],
				default:'content'
			},
			show:{
				type:Boolean,
				default:false
			}
		},
		computed: {
			// 动态监听
			display(){
				console.log('组件计算属性',this['show']);
			  return this['show']	
			},
			// 动态监听
			GetType() {
				return this['type'];
			},
			Style() {
				return {
					width: `${this['width']}rpx`,
					height: `${this['height']}rpx`
				}
			},
		
			Text() {
				// 加载中
				if (this['GetType'] == 'load') {
					return '加载中，请稍后'
				} else if (this['GetType'] == 'close') {
					// 闭店
					return '抱歉，该门店已打烊'

				} else if (this['GetType'] == 'orders') {
					// 没有订单
					return '您还没有小食订单 '

				} else if (this['GetType'] == 'store') {
					// 没有门店
					return '该地区暂无门店信息'
				}
			},
			Img() {
				// 加载中
				if (this['GetType'] == 'load') {
					if(this['BrandInfor']['brand_id'] == 1){
						return this.qnyurl('load.png', 'rx')
					}else if(this['BrandInfor']['brand_id'] == 10){
						return this.qnyurl('load.gif', 'xbk')
					}else if(this['BrandInfor']['brand_id'] == 13){
						return this.qnyurl('load.png', 'rx')
					}else if(this['BrandInfor']['brand_id'] == 19){
						return this.qnyurl('load.png', 'dyp')
					} 
				} else if (this['GetType'] == 'close') {
					// 闭店
					return this.qnyurl('closureimg.png', 'rx')
				} else if (this['GetType'] == 'orders') {
					// 没有订单
					return this.qnyurl('orderno.png', 'rx')
				} else if (this['GetType'] == 'store') {
					// 没有门店
					return this.qnyurl('default.png', 'rx')
				}
			},
			
			position(){
				if(typeof this['offset'] == 'string' && this['offset'] == 'content'){
					return {top:'50%',left:'50%',transform:'translate(-50%,-50%)'}
				}
				return {top:this['offset'][0],left:this['offset'][1]}
			}
		},
	}
</script>

<style lang="scss">
	.b-shop-load {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		background-color: #ffffff;
		z-index: 10000;
		.content{
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			position: absolute;
		}
		.Prompt-Text {
			margin-top: 34rpx;
			color: #999999;
			font-size: 28rpx;
		}
	}
</style>
