<template>
	<view class="page">
		<u-navbar :title="titname" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='46' id="navbar">
		</u-navbar>
        
        <!-- 头部大图 -->
        <view class="hero-image">
            <image :src="xqobj.imageUrl" mode="aspectFill" class="hero-img"></image>
            <view class="hero-mask"></view>
        </view>

        <!-- 美食名称与标签 -->
        <view class="detail-header" v-if="(xqobj.name || titname) || getTypeNamesList(xqobj.typeNames).length">
            <view class="detail-name" v-if="xqobj.name || titname">{{ xqobj.name || titname }}</view>
            <view class="detail-tags" v-if="getTypeNamesList(xqobj.typeNames).length">
                <text class="detail-tag" v-for="(tag, tagIndex) in getTypeNamesList(xqobj.typeNames)" :key="tagIndex">{{ tag }}</text>
            </view>
        </view>

        <!-- 切换标签 -->
        <view class="tab-container">
            <view class="tab-item" :class="{ active: activeTab === 'intro' }" @click="switchTab('intro')">
                <text class="tab-text">简介</text>
                <view class="tab-line" v-if="activeTab === 'intro'"></view>
            </view>
            <view class="tab-item" :class="{ active: activeTab === 'merchants' }" @click="switchTab('merchants')">
                <text class="tab-text">推荐商家</text>
                <view class="tab-line" v-if="activeTab === 'merchants'"></view>
            </view>
        </view>

        <!-- 内容区域 -->
        <view class="content-container">
            <!-- 简介内容 -->
            <view class="intro-content" v-if="activeTab === 'intro'">
                <view class="intro-card">
                    <view class="intro-text" v-if="xqobj.description">
                        <u-parse :html="xqobj.description"></u-parse>
                    </view>
                    <view class="intro-empty" v-else>
                        <text class="empty-text">暂无简介</text>
                    </view>
                </view>
            </view>

            <!-- 推荐商家内容 -->
            <view class="merchants-content" v-if="activeTab === 'merchants'">
                <view class="merchant-list">
                    <view class="merchant-item" v-for="(merchant, index) in merchantList" :key="index">
                        <view class="merchant-main">
                            <view class="merchant-left">
                                <image :src="getFirstImage(merchant.picture)" mode="aspectFill" class="merchant-image" v-if="getFirstImage(merchant.picture)"></image>
                                <view class="merchant-image-placeholder" v-else></view>
                            </view>
                            <view class="merchant-right">
                                <view class="merchant-title">{{ merchant.name }}</view>
                                <view class="merchant-rating">
                                    <text class="rating-score">{{ merchant.averageRating ? merchant.averageRating.toFixed(1) : '-' }}</text>
                                    <!-- <text class="rating-star">★</text>
                                    <text class="rating-count">{{ merchant.commentCount || 0 }}条评价</text> -->
                                    <text class="price">¥{{ merchant.capita || '-' }}/人</text>
                                </view>
                                <view class="merchant-tags" v-if="merchant.types && merchant.types.length">
                                    <text class="tag" v-for="(val, idx) in merchant.types" :key="idx">{{ val.name }}</text>
                                </view>
                                <view class="merchant-time" v-if="merchant.startTime && merchant.endTime">
                                    <text class="time-text">营业时间：{{ merchant.startTime }} - {{ merchant.endTime }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="merchant-location">
                            <image class="location-icon" src="https://api.ccttiot.com/smartmeter/img/static/uqj2ln1YzY0Foise7dx1" mode="aspectFit"></image>
                            <text class="location-text">{{ merchant.address || '暂无地址' }}</text>
                            <view class="go-button" @click="goToMerchant(merchant)">
                                <text class="go-text">查看</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="list-end">暂无更多推荐</view>
            </view>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
                activeTab: 'intro', // 当前激活的标签
                merchantList: [],
				id:'',
				xqobj:{},
				pageNum:1,
				total:0,
				titname:''
			}
		},
		onLoad(option) {
            this.id = option.id
			this.titname = option.name
			this.getxq()
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '玩转福鼎',
				path: '/page_user/meishi/meishixq?id=' + this.id + '&titname=' + this.titname
			}
		},
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '玩转福鼎',
				query: '',
				path: '/page_user/meishi/meishixq?id=' + this.id + '&titname=' + this.titname
			}
		},
		methods: {
			// 解析 typeNames 为标签数组（支持字符串逗号分隔或数组）
			getTypeNamesList(typeNames) {
				if (!typeNames) return [];
				if (Array.isArray(typeNames)) return typeNames.filter(Boolean);
				if (typeof typeNames === 'string') {
					return typeNames.split(/[,，、]/).map(s => s.trim()).filter(Boolean);
				}
				return [];
			},
			// 获取第一张图片
			getFirstImage(picture) {
				if (!picture || typeof picture !== 'string') {
					return '';
				}
				// 按逗号分割，取第一张图片，并去除首尾空格
				const images = picture.split(',').map(img => img.trim()).filter(img => img);
				return images.length > 0 ? images[0] : '';
			},
			// 请求美食详情
			getxq(){
				this.$u.get(`/app/dish/${this.id}`).then((res) => {
					if(res.code == 200){
						this.xqobj = res.data
					}
				})
			},
			// 请求推荐商家列表
			getlist(){
				this.$u.get(`app/store/list?pageNum=1&pageSize=999&dishIds=${this.id}`).then((res) => {
					if(res.code == 200){
						this.merchantList = res.rows
					}
				})
			},
			// 切换标签
			switchTab(tab) {
				this.activeTab = tab;
				if(tab == 'intro'){
					this.getxq()
				}else{
					this.pageNum = 1
					this.getlist()
				}
			},
			
			// 前往商家
			goToMerchant(merchant) {
				uni.navigateTo({
					url:'/page_user/techan/techandp?id=' + merchant.id + '&type=1'
				})
			}
		}
	}
</script>

<style lang="scss">
	::v-deep .u-title { padding-bottom: 22rpx; }
	::v-deep .u-iconfont { padding-bottom: 22rpx; }
	::v-deep .intro-text p { margin-bottom: 24rpx; font-size: 28rpx; line-height: 1.85; color: #444; text-align: justify; }
	::v-deep .intro-text img { max-width: 100%; border-radius: 12rpx; margin: 16rpx 0; display: block; }

	page {
		background: #f5f5f7;
	}

	.page {
		background: #f5f5f7;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}

	// 头部大图
	.hero-image {
		width: 100%;
		height: 420rpx;
		position: relative;
		overflow: hidden;
		.hero-img {
			width: 100%;
			height: 100%;
			display: block;
		}
		.hero-mask {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 120rpx;
			background: linear-gradient(to top, rgba(0,0,0,0.15), transparent);
			pointer-events: none;
		}
	}

	// 美食名称与标签区
	.detail-header {
		margin: -24rpx 24rpx 0;
		padding: 28rpx 24rpx 24rpx;
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 2;
	}
	.detail-name {
		font-size: 40rpx;
		font-weight: 700;
		color: #1a1a1a;
		line-height: 1.35;
		margin-bottom: 20rpx;
		letter-spacing: 0.5rpx;
	}
	.detail-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
	}
	.detail-tag {
		font-size: 24rpx;
		color: #e85c2c;
		background: linear-gradient(135deg, #fff5f0 0%, #ffebe3 100%);
		border-radius: 28rpx;
		padding: 8rpx 18rpx;
		line-height: 1.4;
	}

	// 切换标签
	.tab-container {
		display: flex;
		background: #fff;
		margin: 0 24rpx;
		border-radius: 16rpx;
		padding: 8rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
		margin-top: 20rpx;
		.tab-item {
			flex: 1;
			text-align: center;
			padding: 22rpx 0;
			position: relative;
			border-radius: 12rpx;
			transition: all 0.2s;
			.tab-text {
				font-size: 30rpx;
				color: #888;
				font-weight: 500;
			}
			&.active {
				background: linear-gradient(135deg, #ff6b35 0%, #f15a24 100%);
				.tab-text { color: #fff; }
				.tab-line { display: none; }
			}
			.tab-line {
				position: absolute;
				bottom: 8rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 48rpx;
				height: 4rpx;
				background: #f15a24;
				border-radius: 2rpx;
			}
		}
	}

	// 内容容器
	.content-container {
		padding: 24rpx;
		margin-top: 20rpx;
	}

	// 简介
	.intro-content {
		.intro-card {
			background: #fff;
			border-radius: 20rpx;
			padding: 32rpx 28rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		}
		.intro-text {
			font-size: 28rpx;
			line-height: 1.85;
			color: #444;
		}
		.intro-empty {
			text-align: center;
			padding: 60rpx 0;
			.empty-text {
				font-size: 28rpx;
				color: #bbb;
			}
		}
	}

	// 推荐商家
	.merchants-content {
		.merchant-list {
			.merchant-item {
				background: #fff;
				border-radius: 20rpx;
				padding: 28rpx;
				margin-bottom: 24rpx;
				box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
			}
			.merchant-main {
				display: flex;
				align-items: flex-start;
				margin-bottom: 24rpx;
			}
			.merchant-left {
				flex-shrink: 0;
				margin-right: 24rpx;
				.merchant-image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 16rpx;
					display: block;
					background: #f0f0f0;
				}
				.merchant-image-placeholder {
					width: 200rpx;
					height: 200rpx;
					border-radius: 16rpx;
					background: linear-gradient(135deg, #f5f5f5 0%, #ebebeb 100%);
				}
			}
			.merchant-right {
				flex: 1;
				min-width: 0;
			}
			.merchant-title {
				font-size: 34rpx;
				font-weight: 600;
				color: #1a1a1a;
				margin-bottom: 14rpx;
				line-height: 1.35;
			}
			.merchant-rating {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-bottom: 12rpx;
				.rating-score {
					font-size: 32rpx;
					font-weight: 600;
					color: #f15a24;
					margin-right: 6rpx;
				}
				.rating-star {
					font-size: 24rpx;
					color: #f15a24;
					margin-right: 8rpx;
				}
				.rating-count {
					font-size: 24rpx;
					color: #999;
					margin-right: 16rpx;
				}
				.price {
					font-size: 24rpx;
					color: #999;
				}
			}
			.merchant-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 8rpx;
				margin-bottom: 10rpx;
				.tag {
					font-size: 22rpx;
					color: #e85c2c;
					background: #fff5f0;
					border-radius: 16rpx;
					padding: 4rpx 12rpx;
					line-height: 1.4;
				}
			}
			.merchant-time {
				.time-text {
					font-size: 24rpx;
					color: #999;
				}
			}
			.merchant-location {
				display: flex;
				align-items: center;
				padding-top: 20rpx;
				border-top: 1rpx solid #f0f0f0;
				.location-icon {
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
					flex-shrink: 0;
				}
				.location-text {
					flex: 1;
					font-size: 24rpx;
					color: #666;
					line-height: 1.5;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.go-button {
					flex-shrink: 0;
					background: linear-gradient(135deg, #ff6b35 0%, #f15a24 100%);
					padding: 14rpx 28rpx;
					border-radius: 32rpx;
					box-shadow: 0 4rpx 12rpx rgba(241, 90, 36, 0.35);
					.go-text {
						font-size: 26rpx;
						color: #fff;
						font-weight: 500;
					}
				}
			}
		}
		.list-end {
			text-align: center;
			font-size: 26rpx;
			color: #bbb;
			padding: 32rpx 0 20rpx;
		}
	}
</style>