<template>
	<!-- 拼团商家详情页 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					商家详情
				</view>
			</view>
		</view>
		<view class="content" v-if="detailLoaded">
			<view class="box1 shop-card">
				<view class="left">
					<view style="display: flex;">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/3721d2aa18ac4700aa7ac4dfeb272b09.png" alt="" style="width: 48rpx;height: 48rpx;"/>
						<text class="shop-name">{{shopItem.shopName || '商家详情'}}</text>
					</view>
					<view class="shop-subtitle" v-if="shopItem.subtitle">{{shopItem.subtitle}}</view>
					<view class="shop-meta">
						<text>{{shopTypeText}}</text>
						<text>评分 {{shopScoreText}}</text>
						<text>销量 {{saleCountText}}</text>
					</view>
					<view class="shop-info-row">
						<uni-icons class="shop-info-icon" type="location" size="13"></uni-icons>
						<text class="shop-info-text">{{shopItem.shopAddress || '暂无地址'}}</text>
					</view>
					<view class="shop-info-row">
						<uni-icons class="shop-info-icon" type="loop" size="13"></uni-icons>
						<text class="shop-info-text">{{businessTimeText}}</text>
					</view>
					<view class="shop-info-row">
						<uni-icons class="shop-info-icon" type="paperplane" size="13"></uni-icons>
						<text class="shop-info-text">{{deliveryText}}</text>
					</view>
				</view>
				<view class="right">
					<img @tap="makeCall(shopItem.contactPhone)" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png" alt=""  style="width: 60rpx;height: 60rpx;position: absolute;top: 64rpx;right: 60rpx;"/>
				</view>
			</view>
			<view class="box1">
				<view style="display: flex;">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/86004fa6b60e477ea1622fc0bf4c99de.png" alt="" style="width: 48rpx;height: 48rpx;" />
					<text style="height: 48rpx;line-height: 48rpx;font-size: 28rpx;font-weight: 700;margin-left: 10rpx;">
						商家资质
					</text>
				</view>
				<view class="qualification-list" v-if="qualificationImages.length > 0">
					<view class="qualification-item" v-for="(item,index) in qualificationImages" :key="index" @tap="largeImg(item.url)">
						<image :src="item.url" mode="aspectFill"></image>
						<text>{{item.label}}</text>
					</view>
				</view>
				<view class="empty-text" v-else>
					暂无资质图片
				</view>
			</view>
			<view class="box1">
				<view style="display: flex;">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/00b1f011787c4549bbea650d95a4eb39.png" alt="" style="width: 48rpx;height: 48rpx;" />
					<text style="height: 48rpx;line-height: 48rpx;font-size: 28rpx;font-weight: 700;margin-left: 10rpx;">商家公告</text>
				</view>
				<view style="color: #777;line-height: 48rpx;margin-top: 20rpx;">
					公告：{{shopItem.remark || '暂无公告'}}
				</view>
			</view>
			<view class="box1">
				<view style="display: flex;">
					<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/3721d2aa18ac4700aa7ac4dfeb272b09.png" alt="" style="width: 48rpx;height: 48rpx;" />
					<text style="height: 48rpx;line-height: 48rpx;font-size: 28rpx;font-weight: 700;margin-left: 10rpx;">商家信息</text>
				</view>
				<view class="detail-list">
					<view class="detail-row" v-if="shopItem.shopLename">
						<text>法人</text>
						<text>{{shopItem.shopLename}}</text>
					</view>
					<view class="detail-row" v-if="shopItem.contactPhone">
						<text>联系电话</text>
						<text>{{shopItem.contactPhone}}</text>
					</view>
					<view class="detail-row" v-if="shopItem.shopAreaTitle">
						<text>所属区域</text>
						<text>{{shopItem.shopAreaTitle}}</text>
					</view>
					<view class="detail-row" v-if="shopItem.isbrandflag != null">
						<text>品牌店铺</text>
						<text>{{shopItem.isbrandflag == 1 ? '是' : '否'}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-else>
			<view class="box1 empty-text">商家信息加载中...</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
				isPintuan:true,
				shopItem:{},
				shopImages:[],
				qualificationImages:[],
				detailLoaded:false
			}
		},
		computed: {
			businessTimeText() {
				const takeaway = this.shopItem.shopTakeaway || {};
				if (!takeaway.businessHourBegin || !takeaway.businessHourEnd) return '营业时间暂无';
				return '周一到周日 ' + takeaway.businessHourBegin + '-' + takeaway.businessHourEnd;
			},
			shopTypeText() {
				const takeaway = this.shopItem.shopTakeaway || {};
				return this.shopItem.shopTypeTitle || takeaway.type || '美食';
			},
			shopScoreText() {
				return this.shopItem.shopScore || '5.0';
			},
			saleCountText() {
				return this.shopItem.saleCount != null ? this.shopItem.saleCount : 0;
			},
			deliveryText() {
				if (this.shopItem.supportShopDelivery == 1) {
					const fee = this.shopItem.orderBkge != null ? this.shopItem.orderBkge : 0;
					const duration = this.shopItem.shopDeliveryDuration ? this.shopItem.shopDeliveryDuration + '分钟' : '尽快送达';
					const location = this.shopItem.shopDeliveryLocation == 1 ? '送到宿舍' : this.shopItem.shopDeliveryLocation == 2 ? '送到楼下' : '支持自配送';
					return '商家自配送 ' + duration + '，' + location + '，配送费￥' + fee;
				}
				if (this.shopItem.supportTransferDelivery == 1) {
					const duration = this.shopItem.transferDeliveryDuration ? this.shopItem.transferDeliveryDuration + '分钟' : '尽快送达';
					return '中转配送 ' + duration + (this.shopItem.transferAddressName ? '，' + this.shopItem.transferAddressName : '');
				}
				if (this.shopItem.groupDeliveryTime) {
					return '预计配送 ' + this.shopItem.groupDeliveryTime + '分钟';
				}
				return '配送信息暂无';
			}
		},
		components: {
	
		},
		onLoad(option) {
			this.initShopItem(option)
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			initShopItem(option) {
				let id = option.id || '';
				if (!id && option.item) {
					const routeItem = this.parseRouteItem(option.item) || {};
					id = routeItem.id || (routeItem.shop && routeItem.shop.id) || '';
				}
				if (id) {
					this.getShopDetail(id);
				} else {
					this.detailLoaded = true;
				}
			},
			parseRouteItem(item) {
				if (item == null || item === '') return null;
				try {
					return JSON.parse(decodeURIComponent(item));
				} catch (e) {
					try {
						return JSON.parse(item);
					} catch (err) {
						return null;
					}
				}
			},
			normalizeDetailResult(result) {
				const shop = result.shop ? result.shop : result;
				const shopTakeaway = result.shopTakeaway || shop.shopTakeaway || {};
				const products = result.products || shop.products || [];
				return {
					...shop,
					shopTakeaway,
					products,
					groupDeliveryTime: shop.groupDeliveryTime || result.groupDeliveryTime
				};
			},
			setShopImages() {
				const imageText = this.shopItem.shopImages;
				if (!imageText) {
					this.shopImages = [];
					this.qualificationImages = [];
					return;
				}
				const labels = ['', '', '营业执照'];
				const images = [];
				String(imageText).split('@@').forEach((item, index) => {
					if (!item || item === 'undefined' || item === 'null') return;
					if (index < 2) return;
					if (index === 3) {
						this.parseExtraImages(item).forEach((url, extraIndex) => {
							images.push({
								label: extraIndex === 0 ? '补充证照' : '补充证照' + (extraIndex + 1),
								url
							});
						});
						return;
					}
					images.push({
						label: labels[index] || '资质图片' + (index + 1),
						url: item
					});
				});
				this.qualificationImages = images.filter(item => item.url);
				this.shopImages = this.qualificationImages.map(item => item.url);
			},
			parseExtraImages(value) {
				try {
					const parsed = JSON.parse(value);
					if (Array.isArray(parsed)) {
						return parsed.filter(item => item && item !== 'undefined' && item !== 'null');
					}
					return parsed ? [parsed] : [];
				} catch (e) {
					return value ? [value] : [];
				}
			},
			getShopDetail(id) {
				let area = uni.getStorageSync('area');
				let regionId = '';
				try {
					regionId = area ? JSON.parse(area).id : '';
				} catch (e) {}
				this.tui.request("/app/shop/getShopInfoById", "POST", {
					id: id,
					regionId: regionId
				}, false, true).then((res) => {
					if (res.code == 200 && res.result) {
						this.shopItem = this.normalizeDetailResult(res.result);
						uni.setStorageSync('groupShopDetail', this.shopItem);
						this.setShopImages();
					}
					this.detailLoaded = true;
					uni.hideLoading();
				}).catch(() => {
					this.detailLoaded = true;
				});
			},
			//查看大图
			largeImg(img) {
				if (!img) return;
				uni.previewImage({
					current: img,
					urls: this.shopImages
				})
			},
			//拨打电话
			makeCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			back() {
				uni.navigateBack()
			}
		}
	
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}
	
	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}
	
	.title{
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 54%;
	}
	
	.content{
		position: absolute;
		top: 200rpx;
		width: 95%;
		margin-left: 2.5%;
	}
	
	.title-sreach{
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}
	
	.back-btn{
		position: absolute;
		bottom: 0;
		left: 20rpx;
	}
	.title-name{
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}
	.box1{
		width: 95%;
		margin: 0 auto 20rpx;
		background: #fff;
		border-radius: 20rpx;
		    padding: 20rpx;
	}
	.shop-name{
		flex: 1;
		min-width: 0;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 28rpx;
		font-weight: 700;
		margin-left: 10rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.shop-subtitle{
		color: #08735d;
		line-height: 36rpx;
		margin-top: 12rpx;
	}
	.shop-meta{
		display: flex;
		flex-wrap: wrap;
		margin-top: 16rpx;
	}
	.shop-meta text{
		padding: 4rpx 14rpx;
		background: rgba(223, 255, 176, 1);
		color: #08735d;
		border-radius: 8rpx;
		line-height: 32rpx;
		margin-right: 12rpx;
		margin-bottom: 12rpx;
	}
	.shop-card{
		display: flex;
		align-items: flex-start;
	}
	.shop-info-row{
		display: flex;
		align-items: flex-start;
		color: #777;
		line-height: 40rpx;
		margin-top: 20rpx;
	}
	.shop-info-icon{
		flex-shrink: 0;
		line-height: 40rpx;
	}
	.shop-info-text{
		flex: 1;
		min-width: 0;
		padding-left: 10rpx;
		word-break: break-all;
	}
	.qualification-list{
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
	.qualification-item{
		width: 156rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.qualification-item image{
		display: block;
		width: 156rpx;
		height: 104rpx;
		border-radius: 8rpx;
		background: #f5f5f5;
	}
	.qualification-item text{
		display: block;
		color: #777;
		line-height: 36rpx;
		text-align: center;
		font-size: 22rpx;
	}
	.detail-list{
		margin-top: 16rpx;
	}
	.detail-row{
		display: flex;
		justify-content: space-between;
		color: #777;
		line-height: 44rpx;
	}
	.detail-row text:first-child{
		flex-shrink: 0;
		margin-right: 24rpx;
		color: #00231C;
	}
	.detail-row text:last-child{
		flex: 1;
		text-align: right;
		word-break: break-all;
	}
	.empty-text{
		color: #777;
		line-height: 48rpx;
	}
	.left{
		flex: 1;
		min-width: 0;
	}
	.right{
		flex-shrink: 0;
		width: 120rpx;
		height: 160rpx;
		position: relative;
	}
</style>