<template>
	<view class="b-load" :style="[Style]" v-show="display">
		<view class="b-load-content">
			<view class="b-load-content-Img">
				<image :src="LoadImg" mode="" :style="[ImgStyle]"></image>
			</view>
			<view class="b-load-content-text" :style="[TextStyle]">
				{{LoadText}}
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 点餐加载组件
	 * @property { Boolean } show		    组件显示
	 * @property { String } position		加载组件的定位对应css中的定位属性，值为absolute时组件父元素必须是relative
	 * @property { String } background		加载组件的背景色，16进的或者rgba都可以
	 * @property { String } img				组件加载中图片
	 * @property { String } type			加载组件类型
	 * @property { String } color			提示文字颜色
	 */

	// 加载中 load
	// 已打烊 close
	// 没订单 orders
	// 无门店 store
	import props from './prop.js';
	import mixin from '@/static/js/mixin/mixin.js'
	import restaurantmixins from '@/static/js/mixin/restaurantmixins.js'
	export default {
		mixins: [props, mixin, restaurantmixins],
		name: "b-load",
		data() {
			return {

			};
		},
		computed: {
			display() {
				console.log('组件状态');
				return this['show']
			},
			GetType() {
				return this['type']
			},
			Style() {
				let style = {};
				style['position'] = this['position'];
				style['background-color'] = this['background'];
				// 判断是否需要设置层级
				if (typeof this['zIndex'] == 'string' && !isNaN(+this['zIndex']) || typeof this['zIndex'] == 'number') {
					style['z-index'] = this['zIndex'];
				};

				// if(typeof this['zindex'] == 'string' && this['zindex'] == 'none'){

				// }
				return style;
			},
			ImgStyle() {
				return {
					width: `${this['width']}rpx`,
					height: `${this['height']}rpx`
				}
			},
			TextStyle() {
				return {
					color: this['color']
				};
			},
			LoadText() {
				if (this['text'] != '') {
					return this['text'];
				}
				// 加载中
				if (this['GetType'] == 'load') {
					return '加载中，请稍后'
				} else if (this['GetType'] == 'close') {
					// 闭店
					return '抱歉，该门店已打烊'

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

				} else if (this['GetType'] == 'store') {
					// 没有门店
					return '该地区暂无门店信息'
				}
			},
			LoadImg() {
				if (this['img'] != '') {
					return this['img'];
				}
				// 加载中
				if (this['GetType'] == 'load') {
					if (this['BrandInfor']['brand_id'] == 1) {
						return this.qnyurl('kdjload.png');
					} 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'] == 5) {
						return this.qnyurl('load.png?', 'mdl');
					}  else if (this['BrandInfor']['brand_id'] == 19) {
						return this.qnyurl('load.png?', 'dyp');
					}else if (this['BrandInfor']['brand_id'] == 2) {
						// return this.qnyurl('load.png', 'nx');
					}
				} else if (this['GetType'] == 'close') {
					// 闭店
					if (this['BrandInfor']['brand_id'] == 2) {
						return this.qnyurl('closureimg.png','nx');
					}
					return this.qnyurl('closureimg.png', 'rx');
				} else if (this['GetType'] == 'orders') {
					if (this['BrandInfor']['brand_id'] == 2) {
						return this.qnyurl('orderno.png','nx');
					}
					return this.qnyurl('orderno.png', 'rx');
					// 没有订单
					// if (this['BrandInfor']['brand_id'] == 13) {
					// 	return this.qnyurl('orderno.png', 'rx');
					// } else if (this['BrandInfor']['brand_id'] == 13) {
					// 	return this.qnyurl('orderno.png', 'rx');
					// } else if (this['BrandInfor']['brand_id'] == 13) {
					// 	return this.qnyurl('orderno.png', 'rx');
					// } else if (this['BrandInfor']['brand_id'] == 13) {
					// 	return this.qnyurl('orderno.png', 'rx');
					// }
				} else if (this['GetType'] == 'store') {
					// 没有门店	
					if (this['BrandInfor']['brand_id'] == 2) {
						return this.qnyurl('closureimg.png','nx');
					}
					return this.qnyurl('default.png', 'rx');
				}
			},
		}
	}
</script>

<style lang="scss">
	.b-load {
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;

		&-content {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;

			&-text {
				margin-top: 34rpx;
				font-size: 28rpx;
			}
		}
	}
</style>
