<template>
	<view class="b-restaurant-state">
		<!-- 肯德基 -->
		<template v-if="BrandInfor['brand_id'] == 1">
			<view class="b-restaurant-state-KDJ" :style="{
				'backgroundColor':type == 1?activation:inactivated,
				'color':type == 1?activationcolor:inactivatedcolor,
			}">
				{{ type | state}}
			</view>
		</template>
		<!-- 瑞幸 -->
		<template v-if="BrandInfor['brand_id'] == 13">
			<view class="b-restaurant-state-RX">
				<view class="b-restaurant-state-RX-Name">
					瑞幸咖啡
				</view>
				<view class="b-restaurant-state-RX-Tiem">
					{{item['open_time']}}-{{item['close_time']}}
					<!-- 07:30-20:00 -->
					<!-- 今日休息中 -->
				</view>
				<view class="b-restaurant-state-RX-status" v-if="!item['is_open']">
					未营业
				</view>
			</view>

		</template>
	</view>
</template>

<script>
	/**
	 * @店铺状态组件
	 * */
	import {
		mapGetters,
	} from 'vuex';
	export default {
		name: "b-restaurant-state",
		props: {
			item: {
				type: Object,
				default: () => {}
			},
			// 状态
			type: {
				type: [Number,String],
				default: 1
			},
			// 营业中背景色
			activation: {
				type: String,
				default: '#C63836'
			},
			// 营业中文字颜色
			activationcolor: {
				type: String,
				default: '#ffffff'
			},
			// 未营业背景色
			inactivated: {
				type: String,
				default: '#F6F6F6'
			},
			// 未营业文字颜色
			inactivatedcolor: {
				type: String,
				default: '#999999'
			}
		},
		computed: {
			...mapGetters({
				// 获取品牌Id
				BrandInfor: 'shopping/BrandInfor',
			}),
		},
		data() {
			return {

			};
		},

		filters: {
			state(v) {
				switch (v) {
					case 1:
						return '点餐';
					case 0:
						return '未营业';
				}
			}
		}
	}
</script>

<style lang="scss">
	// 肯德基样式
	.b-restaurant-state-KDJ {
		width: 96rpx;
		height: 32rpx;
		font-size: $FONTSIZE24;
		text-align: center;
		line-height: 32rpx;
	}

	// 瑞幸咖啡
	.b-restaurant-state-RX {
		width: auto;
		height: 38rpx;
		border-radius: 5rpx;
		display: flex;

		&-Name {
			width: 111rpx;
			color: #ffffff;
			font-size: $FONTSIZE24;
			background: linear-gradient(-77deg, $THEMECOLOR6, #83ACFF);
			line-height: 38rpx;
			text-align: center;
		}

		&-Tiem {
			border: 1rpx solid $THEMECOLOR6;
			color: #83ACFF;
			line-height: 32rpx;
			font-size: $FONTSIZE24;
			padding: 0 20rpx;
		}

		&-status {
			width: 91rpx;
			height: 38rpx;
			background: #FFFFFF;
			border: 1rpx solid #CCCCCC;
			border-radius: 5rpx;
			color: #CCCCCC;
			font-size: $FONTSIZE24;
			margin-left: 10rpx;
			text-align: center;
		}
	}
</style>
