<template>
	<view class="nameplate-box">
		<view class="nameplate-top">
			<view class="top-img">
				<image class="shop-img" :src="shopVo?.image + '?x-oss-process=style/w_150'" mode="aspectFill" />
			</view>
			<view class="top-content">
				<view class="shop-name one-row">{{shopVo?.businessName || ''}}</view>
				<view class="rate-box">
					<uni-rate size="18" active-color="#FF8000" :value="shopVo?.average || 5" />
					<text class="rate-num">{{shopVo?.average || '5.0'}}分 </text>
				</view>
				<view class="notify-box">
					<view class="shop-notify" v-if="shopVo.description">
						<text class="notify-icon iconfont">&#xe603;</text>
						<text class="notify-text one-row">{{ shopVo.description }}</text>
					</view>
				</view>
			</view>
			<view class="top-switch" @click.stop="handleSwitchStores(shopVo.businessId)" v-if="isSwitchShop && isBindMore">
				<text class="iconfont">&#xe71b;</text>
				切换门店
			</view>

		</view>
		<view class="nameplate-button ">
			<view class="button-item" @click.stop="MakePhoneCall(shopVo?.customerServicePhone)">
				<text class="iconfont button-icon">&#xe610;</text>
				<text> 打电话</text>
			</view>
			<view class="button-item" @click.stop="MapNavigation(shopVo)">
				<text class="iconfont button-icon">&#xe642;</text>
				<text>导航去</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { MakePhoneCall, MapNavigation } from "@/util/tools.ts"
	defineProps({
		businessId: {
			type: Number,
			default: null
		},
		// 是否显示切换店铺按钮
		isSwitchShop: {
			type: Boolean,
			default: false
		},
		// 是否绑定多个店铺
		isBindMore: {
			type: Boolean,
			default: false
		},
		shopVo: {
			type: Object,
			default: () => { }
		},

		// contactPhone
	});
	const emit = defineEmits(["SwitchStore"]);
	const handleSwitchStores = (businessId) => {
		uni.navigateTo({
			url: "/pages/tabtar/SwitchStores?businessId=" + businessId,
			events: {
				SwitchStore: (data) => {
					// console.log(data);
					emit("SwitchStore", data.businessId);
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.nameplate-box {
		width: 100%;
		flex-shrink: 0;
		background-color: #fff;
		border-radius: 0rpx 0rpx 24rpx 24rpx;

		.nameplate-top {
			padding: 30rpx 0 30rpx 23rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.top-img {
				flex-shrink: 0;
				width: 146rpx;
				height: 146rpx;

				.shop-img {
					border-radius: 14rpx;
					width: 100%;
					height: 100%;
				}
			}

			.top-content {
				overflow: hidden;
				height: 146rpx;
				flex: 1;
				padding: 0 25rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.shop-name {
					font-size: 36rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #1a1a1a;
				}

				.rate-box {
					display: flex;
					align-items: center;

					.rate-num {
						padding-left: 20rpx;
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: center;
						color: #1a1a1a;
					}
				}

				.notify-box {
					max-width: 100%;
					height: 43rpx;

					.shop-notify {
						// width: 306rpx;
						max-width: 100%;
						box-sizing: border-box;
						height: 43rpx;
						background: #fff8f2;
						border: 1rpx solid #ffe8d4;
						border-radius: 10rpx;
						padding: 0 11rpx;
						display: inline-flex;
						align-items: center;

						.notify-icon {
							color: #DA9E73;
							font-size: 26rpx;
							margin-right: 5rpx;
						}

						.notify-text {
							font-size: 24rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							text-align: center;
							color: #666666;
							line-height: 1;
						}
					}
				}

			}

			.top-switch {
				flex-shrink: 0;
				background: #f27f56;
				border-radius: 35rpx 0 0 35rpx;
				padding: 15rpx 15rpx 15rpx 28rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				text-align: left;
				color: #ffffff;
				line-height: 1;
				display: flex;
				align-items: center;

				.iconfont {
					margin-right: 5rpx;
				}
			}
		}

		.nameplate-button {
			width: 100%;
			height: 98rpx;
			border-top: 1px solid #f0f0f0;
			display: flex;
			align-items: stretch;

			.button-item {
				width: 50%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #EB5153;

				.button-icon {
					font-size: 32rpx;
					margin-right: 5rpx;
				}

				text {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					text-align: center;
				}

				&:last-child {
					color: #51A8EB;
				}
			}

		}
	}
</style>