<template>
	<view>
		<!-- 店铺详情 -->
		<up-popup :show="showShopInfo" :round="20" mode="bottom" @close="showShopInfo = false" height="500">
			<view class="shop-info-wrap">
				<view class="info-wrap flex-between">
					<view></view>
					<text class="shopName">{{ shopInfo.shopName }}</text>
					<view class="close" @click="showShopInfo = false">
						<up-icon name="close" color="#999999" size="16"></up-icon>
					</view>
				</view>
				<view class="info-wrap-title">商家信息</view>
				<view class="row" style="margin-bottom: 20rpx;">
					<view class="col">
						<text class="l">营业时间：</text>
						<text
							class="t">{{ (shopInfo.businessStartDay || '--') +'至'+ (shopInfo.businessEndDay || '--') +' '+ (shopInfo.businessTime || '')}}</text>
					</view>
					<view class="col">
						<text class="l">商家地址：</text>
						<text class="t">{{ shopInfo.address }}</text>
					</view>
					<view class="col" @click="makePhoneCall(shopInfo.phone)">
						<text class="l">商家电话：</text>
						<text class="t">{{ shopInfo.phone }}</text>
					</view>
				</view>
				<view class="info-wrap-title">商家公告</view>
				<view class="row">
					<view class="col">
						<text class="l">公告：</text>
						<text class="t">{{ shopInfo.detail }}</text>
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		defineExpose
	} from "vue";
	//店铺详情
	const showShopInfo = ref(false)
	const shopInfo = uni.cache.get('shopInfo')

	const childMethod = () => {
		showShopInfo.value = !showShopInfo.value
	};
	defineExpose({
		childMethod
	});
</script>

<style lang="scss" scoped>
	.shop-info-wrap {
		padding: 0 30rpx 50rpx;
		box-sizing: border-box;

		.info-wrap {
			padding: 30rpx 0;
			box-sizing: border-box;

			.shopName {
				align-self: center;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}

		.info-wrap-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}

		.row {
			.col {
				margin-bottom: 10rpx;
			}

			.l,
			.t {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
</style>