 <template>
	<view class="page">
		<u-navbar title=" " :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='46' id="navbar" :custom-back="btnfh">
		</u-navbar>
		<u-swiper class="bj" :height="582" bg-color="#fff"  :list="list"></u-swiper>
        <view class="box">
        	<view class="name">
        		{{obj.name}}
        	</view>
			<view class="xiao">
				营业时间：{{obj.startTime}}-{{obj.endTime}}
			</view>
			<view class="xiao">
				地址：{{obj.address}}
			</view>
			<!-- 操作区域：导航 / 打电话，紧凑文字按钮样式 -->
			<view class="liat">
				<view class="liat-btn" @click="btndh">
					<u-icon name="map" size="32" color="#1EC28B"></u-icon>
					<text>导航</text>
				</view>
				<view class="liat-btn" @click="btntel">
					<u-icon name="phone" size="32" color="#1EC28B"></u-icon>
					<text>打电话</text>
				</view>
			</view>
			<view class="haowu">
				{{tyep == 1 ? '精选美食' : '精选好物'}}
			</view>
			<view class="hwlist">
				<view class="hwitem" v-for="(item,index) in lists" :key="index" @click="btnhw(item)">
					<image v-if="type == 1" :src="item.imageUrl ? item.imageUrl.split(',')[0] : item.imageUrl" mode="aspectFill"></image>
					<image v-else :src="item.picture ? item.picture.split(',')[0] : item.picture" mode="aspectFill"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
			
			<!-- 店铺评价区域 -->
			<view class="store-comment-section">
				<view class="store-comment-header">
					<view class="left">
						<view class="title">评价（{{ total || (obj.commentNum || 0) }}）</view>
						<view class="score" v-if="obj.averageRating">
							<text class="score-num">{{ Number(obj.averageRating).toFixed(1) }}</text>
							<u-rate :count="5" active-color="#1EC28B" size="22" inactive-color="#b2b2b2" v-model="obj.averageRating" readonly></u-rate>
						</view>
					</view>
					<!-- <view class="right" @click="btndp">
						更多评价
						<u-icon name="arrow-right" size="26" color="#1EC28B"></u-icon>
					</view> -->
					<view class="store-comment-add" @click="btnaddpj">
						写评价
					</view>
				</view>
			
				<view class="store-comment-list" v-if="plarr.length > 0">
					<view class="store-comment-item" v-for="(item,index) in plarr" :key="index">
						<view class="item-top">
							<view class="user">
								<image class="avatar" :src="item.userAvatar" mode="aspectFill"></image>
								<view class="info">
									<view class="name">{{item.nickName}}</view>
									<u-rate :count="5" active-color="#E7322C" size="22" inactive-color="#b2b2b2" v-model="item.rating" readonly></u-rate>
								</view>
							</view>
							<view class="time">{{item.createTime}}</view>
						</view>
						<view class="item-content">
							{{item.content}}
						</view>
					</view>
				</view>
				<view class="store-comment-empty" v-else>
					暂无评价，快来写第一条吧～
				</view>
			</view>
			
        </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				id:'',
				list:[],
				obj:{},
				type:'',
				lists:[],
				fanhui:'',
				plarr:[],
				total:0
			}
		},
		onLoad(e) {
            this.id = e.id
			if(e.type){
				this.type = e.type
			}
			this.getdianpu()
			this.getpinlun()
			if(e && e.fanhui){
				this.fanhui = e.fanhui
			}
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '玩转福鼎',
				path: '/page_user/techan/techandp?id=' + this.id + (this.type ? '&type=' + this.type : '') + '&fanhui=1'
			}
		},
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '玩转福鼎',
				query: '',
				path: '/page_user/techan/techandp?id=' + this.id + (this.type ? '&type=' + this.type : '') + '&fanhui=1'
			}
		},
		methods: {
			btnfh(){
				if(this.fanhui == 1){
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}else{
					uni.navigateBack()
				}
			},
			// 点击拨打电话
			btntel(){
				uni.makePhoneCall({
					phoneNumber: this.obj.contactMobile,
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
					}
				})
			},
			// 点击进行导航
			btndh(){
				if (!this.obj.latitude || !this.obj.longitude) {
					uni.showToast({
						title: '坐标数据不完整',
						icon: 'none',
						duration:5000
					})
					return
				}
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.userLocation'] === false) {
							uni.showModal({
								title: '位置权限',
								content: '需要获取您的位置信息才能进行导航，请在设置中开启位置权限',
								confirmText: '去设置',
								success: (modalRes) => {
									if (modalRes.confirm) {
										uni.openSetting()
									}
								}
							})
							return
						}
						this.openMap()
					}
				})
			},
			// 打开地图
			openMap() {
				uni.openLocation({
					latitude: parseFloat(this.obj.latitude), // 确保是数字类型
					longitude: parseFloat(this.obj.longitude), // 确保是数字类型
					name: this.obj.name || '目的地', // 地点名称
					success: function(res) {
						console.log('打开地图成功', res)
					},
					fail: function(err) {
						console.error('打开地图失败', err)
						uni.showToast({
							title: '打开地图失败: ' + (err.errMsg || '未知错误'),
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			// 请求店铺详情
			getdianpu(){
				this.$u.get(`/app/store/detail/${this.id}`).then((res) => {
					if(res.code == 200){
						this.obj = res.data
						if(this.type == 1){
							this.lists = res.data.dishes
						}else{
							this.lists = res.data.specialties
						}
						let imgArray = res.data.picture.split(',')
						imgArray.forEach(item =>{
							this.list.push({
								image: item
							})
						})
					}
				})
			},
			// 查询店铺评价（类型 2，取一条展示）
			getpinlun(){
				this.$u.get(`/app/comment/list?bstId=${this.id}&bstTypes=2&pageNum=1&pageSize=1`).then((res) => {
					if(res.code === 200){
						this.plarr = res.rows || []
						this.total = res.total || 0
					}
				})
			},
			// 查看更多评价列表
			btndp(){
				uni.navigateTo({
					url:'/page_user/techan/techandp-dianpin?id=' + this.id
				})
			},
			// 写评价
			btnaddpj(){
				uni.navigateTo({
					url:'/page_fenbao/jiudian/addpj?btsid=' + this.id + '&type=2'
				})
			},
			// 点击精选好物跳转详情
			btnhw(item){
				uni.navigateTo({
					url:'/page_user/techan/techansp?id=' + item.id + '&type=' + this.type
				})
			}
		}
	}
</script>
<style lang="less">
	::v-deep .u-icon__icon,
	::v-deep .u-title{
		// padding-bottom: 22rpx !important;
	}
	.box{
		width: 750rpx;
		height: 59vh;
		background: #FFFFFF;
		border-radius:50rpx 50rpx 0 0;
		position: relative;
		top: -160rpx;
		overflow: hidden;
		padding-bottom: 30rpx;
		padding: 36rpx 48rpx;
		.hwlist{
			display: flex;
			gap: 30rpx;
			margin-top: 26rpx;
			overflow: scroll;
			width: 750rpx;
			padding-right: 80rpx;
			.hwitem{
				width: 200rpx;
				image{
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
				text{
					font-weight: 600;
					font-size: 30rpx;
					color: #3D3D3D;
					display: block;
					margin-top: 16rpx;
					text-align: center;
				}
			}
		}
		.haowu{
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			margin-top: 56rpx;
		}
		.liat{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-top: 24rpx;
			gap: 32rpx;
			.liat-btn{
				display: flex;
				align-items: center;
				padding: 12rpx 24rpx;
				border-radius: 40rpx;
				background-color: #F5F5F5;
				font-size: 26rpx;
				color: #1EC28B;
				text{
					margin-left: 8rpx;
				}
			}
		}
		.name{
			font-weight: 600;
			font-size: 48rpx;
			color: #3D3D3D;
			margin-bottom: 14rpx;
		}
		.xiao{
			font-size: 28rpx;
			color: #3D3D3D;
			margin-top: 16rpx;
		}
		/* 店铺评价区域 */
		.store-comment-section{
			margin-top: 20rpx;
		}
		.store-comment-header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				.title{
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;
					margin-bottom: 6rpx;
				}
				.score{
					display: flex;
					align-items: center;
					.score-num{
						font-weight: 600;
						font-size: 40rpx;
						color: #1EC28B;
						margin-right: 12rpx;
					}
				}
			}
			.right{
				font-size: 26rpx;
				color: #1EC28B;
				display: flex;
				align-items: center;
			}
		}
		.store-comment-list{
			margin-top: 20rpx;
		}
		.store-comment-item{
			background: #F8F8F8;
			border-radius: 16rpx;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
		}
		.item-top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.user{
				display: flex;
				align-items: center;
				.avatar{
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 12rpx;
				}
				.info{
					.name{
						font-size: 28rpx;
						color: #3D3D3D;
						margin-bottom: 4rpx;
					}
				}
			}
			.time{
				font-size: 24rpx;
				color: #999;
			}
		}
		.item-content{
			margin-top: 12rpx;
			font-size: 26rpx;
			color: #3D3D3D;
			line-height: 1.6;
		}
		.store-comment-empty{
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #999;
		}
		.store-comment-add{
			margin-top: 20rpx;
			align-self: flex-start;
			padding: 12rpx 32rpx;
			border-radius: 40rpx;
			background-color: #1EC28B;
			color: #FFFFFF;
			font-size: 26rpx;
			text-align: center;
			display: inline-block;
		}
	}
	.bj{
		width: 750rpx;
		height: 582rpx;
	}
	page {
		background: #fff;
		height: 100vh;
		overflow: hidden;
	}
</style>
