<template>
	<view class="page">
		<u-navbar title="景点详情" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='40' id="navbar">
		</u-navbar>
		<view class="" v-if="dongtaiflag == false">
			<!-- 顶部大图 -->
			<view class="hero">
				<image class="hero-img" :src="spotObj.picture || '/static/image/a1.png'" mode="aspectFill" style="width: 100%; height: 420rpx;"></image>
			<!-- 	<image class="sc" @click="btnscqx" v-if="spotObj.isCollected == true" src="https://api.ccttiot.com/smartmeter/img/static/uREVO9VLwercFEWbnurd" mode=""></image>
				<image class="sc" @click="btnscqd" v-else src="https://api.ccttiot.com/smartmeter/img/static/ukfmNwl4GOF4v090KRqy" mode=""></image> -->
			</view>
			
			<!-- 基本信息 -->
			<view class="base-info">
				<view class="title-row">
					<view class="left">
						<view class="name">{{spotObj.name || '--'}}</view>
						<view class="meta" v-if="spotObj.address">{{spotObj.address}}</view>
					</view>
					<view class="actions" v-if="spotObj.latitude && spotObj.longitude">
						<image @click="btndh" src="https://api.ccttiot.com/smartmeter/img/static/uFDC6JRPVkfL2PYrRlz0" style="width: 54rpx;height: 52rpx;" mode=""></image>
					</view>
				</view>
			</view>
			
			<!-- 小节：景点简介 -->
			<view class="section-block" v-if="spotObj.description">
				<view class="section-hd"><text class="dot"></text><text class="txt">景点简介</text></view>
				<view class="para">
					{{spotObj.description}}
				</view>
			</view>
			
			<!-- 小节：推荐理由 -->
			<view class="section-block" v-if="spotObj.reason">
				<view class="section-hd"><text class="dot"></text><text class="txt">推荐理由</text></view>
				<view class="para">
					{{spotObj.reason}}
				</view>
			</view>
			
			<!-- 小节：开放时间 -->
			<view class="section-block" v-if="spotObj.startTime || spotObj.endTime">
				<view class="section-hd"><text class="dot"></text><text class="txt">开放时间</text></view>
				<view class="para">
					每日{{spotObj.startTime || '--'}} - {{spotObj.endTime || '--'}}
				</view>
			</view>
			
			<!-- 小节：地址信息 -->
			<view class="section-block" v-if="spotObj.address">
				<view class="section-hd"><text class="dot"></text><text class="txt">地址信息</text></view>
				<view class="para">
					{{spotObj.address}}
				</view>
			</view>
		</view>
		<image v-else style="width: 100%;height: 100vh;position: fixed;top: 160rpx;left: 0;z-index: 999;" src="https://api.ccttiot.com/mgV9maxWGSQb6aa145cf863980513eecdf75080f75a0.png" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				id:'',
				spotObj:{},
				dongtaiflag:false
			}
		},
		onLoad(option) {
            this.id = option.id
			this.getxq()
		},
		methods: {
			// 点击进行收藏
			btnscqd(){
				let data = {
					bstType:2,
					bstId:this.id
				}
				this.$u.post(`/app/favorite/add`,data).then(res =>{
					if(res.code == 200){
						uni.showToast({
							title: '收藏成功',
							icon: 'success',
							duration:3000
						})
						this.spotObj.isCollected = true
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration:3000
						})
					}
				})
			},
			// 点击进行取消收藏
			btnscqx(){
				this.$u.delete(`/app/favorite/cancel/${this.id}?bstType=2`).then(res =>{
					if(res.code == 200){
						uni.showToast({
							title: '取消收藏成功',
							icon: 'success',
							duration:3000
						})
						this.spotObj.isCollected = false
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration:3000
						})
					}
				})
			},
			// 点击进行导航
			btndh(){
				// 检查坐标数据是否存在
				if (!this.spotObj.latitude || !this.spotObj.longitude) {
					uni.showToast({
						title: '坐标数据不完整',
						icon: 'none',
						duration:3000
					})
					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.spotObj.latitude), // 确保是数字类型
					longitude: parseFloat(this.spotObj.longitude), // 确保是数字类型
					name: this.spotObj.name || '目的地', // 地点名称
					success: function(res) {
						console.log('打开地图成功', res);
					},
					fail: function(err) {
						console.error('打开地图失败', err);
						uni.showToast({
							title: '打开地图失败: ' + (err.errMsg || '未知错误'),
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			// 请求景点详情
			getxq(){
				this.$u.get(`/app/scenicSpot/${this.id}`).then((res) => {
					if(res.code == 200){
						this.spotObj = res.data
						this.dongtaiflag = false
					}else if(res.msg == '景点不存在' || res.code != 200){
						this.dongtaiflag = true
					}
				}).catch(err => {
					console.error('请求景点详情失败', err)
					this.dongtaiflag = true
				})
			},
		}
	}
</script>

<style lang="scss">
	page { background: #fff; }
	.page { background: #fff; min-height: 100vh; }
	/* 顶部大图 */
	.hero { width: 100%; height: 420rpx; overflow: hidden;
	 position: relative;
	 .sc{
	 	width: 60rpx;
	 	height: 60rpx;
	 	position: absolute;
	 	top: 30rpx;
	 	right: 30rpx;
	 }}
	.hero-img { width: 100%; height: 100%; }
	/* 基本信息 */
	.base-info {
		padding: 30rpx;
		.title-row {
			display: flex; align-items: center; justify-content: space-between;
			.left {
				.name { font-size: 52rpx; font-weight: 700; color: #262B37; }
				.meta { margin-top: 8rpx; font-size: 28rpx; color: #3D3D3D; }
			}
			.actions { display: flex; gap: 30rpx;align-items: flex-end; }
		}
	}
	/* 区块标题 */
	.section-block { padding: 10rpx 20rpx 20rpx; }
	.section-hd { display: flex; align-items: center; gap: 12rpx; margin: 18rpx 2rpx; }
	.section-hd .dot { width: 8rpx; height: 28rpx; background: #111827; border-radius: 4rpx; }
	.section-hd .txt { font-size: 36rpx; font-weight: 800; color: #111827; }
	.para { 
		font-size: 28rpx; 
		color: #4b5563; 
		line-height: 1.8; 
		margin-top: 12rpx;
		padding: 20rpx;
		background: #f8f9fb;
		border-radius: 12rpx;
	}
</style>

