<template>
	<view class="sd-page">
		<view class="sd-nav" :style="{ paddingTop: statusBar + 'px' }">
			<view class="sd-nav-row">
				<view class="sd-back" @tap="goBack">
					<text class="sd-back-icon">←</text>
				</view>
				<text class="sd-nav-title">{{ navTitle }}</text>
				<view class="sd-nav-placeholder" />
			</view>
		</view>

		<scroll-view
			scroll-y
			class="sd-scroll"
			:style="{ height: bodyHeight + 'px' }"
		>
			<view class="sd-body" :style="{ paddingBottom: safeBottom + 'px' }">
				<view v-if="loading" class="sd-state">
					<text class="sd-state-txt">{{ copy.loading }}</text>
				</view>

				<view v-else-if="!detail.id" class="sd-state">
					<text class="sd-state-txt">{{ copy.empty }}</text>
				</view>

				<view v-else class="sd-content">
					<swiper
						v-if="gallery.length"
						class="sd-swiper"
						indicator-dots
						autoplay
						circular
						interval="4000"
					>
						<swiper-item v-for="(img, idx) in gallery" :key="'img-' + idx">
							<image class="sd-swiper-img" :src="img" mode="aspectFill" />
						</swiper-item>
					</swiper>

					<view class="sd-card">
						<text class="sd-title">{{ detail.title }}</text>
						<view v-if="detail.address" class="sd-addr-row">
							<text class="sd-addr-label">{{ copy.address }}</text>
							<text class="sd-addr-text">{{ detail.address }}</text>
						</view>
						<text class="sd-views">{{ copy.views }} {{ detail.views }}</text>
					</view>

					<view v-if="richNodes" class="sd-rich-wrap">
						<rich-text class="sd-rich" :nodes="richNodes" />
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { pullScenicAreaDetail } from '@/features/scenic/scenic-gateway'
import { formatArticleRichContent } from '@/features/article/article-gateway'

export default {
	data() {
		return {
			statusBar: 0,
			bodyHeight: 600,
			safeBottom: 0,
			scenicId: '',
			navTitle: '',
			loading: true,
			detail: {},
			gallery: [],
			richNodes: ''
		}
	},
	computed: {
		copy() {
			const t = this.$t.bind(this)
			return {
				loading: t('home.loading'),
				loadFailed: t('home.loadFailed'),
				empty: t('scenic.empty'),
				address: t('scenic.address'),
				views: t('scenic.views'),
				detailTitle: t('scenic.detailTitle')
			}
		}
	},
	onLoad(query) {
		const sys = uni.getSystemInfoSync()
		this.statusBar = sys.statusBarHeight || 0
		this.safeBottom = sys.safeAreaInsets ? sys.safeAreaInsets.bottom : 0
		const navH = this.statusBar + uni.upx2px(88)
		this.bodyHeight = (sys.windowHeight || 667) - navH

		let title = (query && query.title) || ''
		try {
			title = decodeURIComponent(title)
		} catch (_) {}
		this.navTitle = title || this.copy.detailTitle
		this.scenicId = (query && query.id) != null ? String(query.id) : ''
		this.loadDetail()
	},
	methods: {
		goBack() {
			uni.navigateBack({
				fail: () => uni.switchTab({ url: '/pages/index/index' })
			})
		},
		oss(src, w, h) {
			return this.$appKit && this.$appKit.oss ? this.$appKit.oss(src, w, h) : src
		},
		applyRichContent(html) {
			const rich = formatArticleRichContent(html, this.oss.bind(this))
			this.richNodes = rich.html ? rich.html : rich.nodes
		},
		async loadDetail() {
			if (!this.scenicId) {
				this.loading = false
				return
			}
			this.loading = true
			try {
				const data = await pullScenicAreaDetail(this.scenicId)
				this.detail = data || {}
				this.gallery = Array.isArray(data.images) ? data.images : []
				if (data.title) this.navTitle = data.title
				this.applyRichContent(data.content)
			} catch (err) {
				this.$appKit && this.$appKit.msg((err && err.message) || this.copy.loadFailed)
			} finally {
				this.loading = false
			}
		}
	}
}
</script>

<style scoped>
.sd-page {
	min-height: 100vh;
	background-color: #f7f8fc;
}

.sd-nav {
	background-color: #ffffff;
	border-bottom: 1rpx solid #eef1f6;
}

.sd-nav-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 88rpx;
	padding: 0 24rpx;
	box-sizing: border-box;
}

.sd-back {
	width: 64rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sd-back-icon {
	font-size: 40rpx;
	color: #1a1d26;
	line-height: 1;
}

.sd-nav-title {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1d26;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0 16rpx;
}

.sd-nav-placeholder {
	width: 64rpx;
}

.sd-body {
	box-sizing: border-box;
}

.sd-state {
	padding: 120rpx 0;
	text-align: center;
}

.sd-state-txt {
	font-size: 28rpx;
	color: #8a8d9e;
}

.sd-swiper {
	width: 100%;
	height: 420rpx;
	background-color: #e6e8ef;
}

.sd-swiper-img {
	width: 100%;
	height: 100%;
}

.sd-card {
	margin: 24rpx;
	padding: 28rpx;
	background-color: #ffffff;
	border-radius: 18rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.sd-title {
	display: block;
	font-size: 36rpx;
	font-weight: 700;
	color: #1a1d26;
	line-height: 1.4;
}

.sd-addr-row {
	display: flex;
	flex-direction: row;
	margin-top: 20rpx;
}

.sd-addr-label {
	flex-shrink: 0;
	font-size: 24rpx;
	color: #8a8d9e;
	margin-right: 8rpx;
}

.sd-addr-text {
	flex: 1;
	font-size: 24rpx;
	color: #4a4d5e;
	line-height: 36rpx;
}

.sd-views {
	display: block;
	margin-top: 16rpx;
	font-size: 24rpx;
	color: #4a8cff;
}

.sd-rich-wrap {
	margin: 0 24rpx 24rpx;
	padding: 28rpx;
	background-color: #ffffff;
	border-radius: 18rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.sd-rich {
	display: block;
	width: 100%;
	font-size: 30rpx;
	color: #3d4150;
	line-height: 1.65;
	word-break: break-word;
}
</style>
