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

		<scroll-view
			scroll-y
			class="abt-scroll"
			:style="{ height: scrollHeight + 'px' }"
		>
			<view class="abt-body" :style="{ paddingBottom: safeBottom + 'px' }">
				<view class="abt-hero">
					<view class="abt-logo-wrap">
						<image
							v-if="logoSrc"
							class="abt-logo"
							:src="logoSrc"
							mode="aspectFill"
						/>
						<text v-else class="abt-logo-fallback">{{ logoFallback }}</text>
					</view>
					<text class="abt-app-name">{{ displayName }}</text>
					<text class="abt-version">{{ versionLabel }}</text>
				</view>

				<view class="abt-card">
					<view
						class="abt-row"
						hover-class="abt-row--press"
						@tap="onFeedback"
					>
						<text class="abt-row-label">{{ copy.feedback }}</text>
						<text class="abt-chevron">›</text>
					</view>
					<view
						class="abt-row"
						hover-class="abt-row--press"
						@tap="onContact"
					>
						<text class="abt-row-label">{{ copy.contactUs }}</text>
						<text class="abt-chevron">›</text>
					</view>
					<view
						class="abt-row"
						hover-class="abt-row--press"
						@tap="onRateApp"
					>
						<text class="abt-row-label">{{ copy.rateApp }}</text>
						<text class="abt-chevron">›</text>
					</view>
					<view
						class="abt-row"
						:class="{ 'abt-row--last': !showTermsRow && !showRefundRow }"
						hover-class="abt-row--press"
						@tap="onCheckUpdate"
					>
						<text class="abt-row-label">{{ copy.versionUpdate }}</text>
						<text class="abt-chevron">›</text>
					</view>
					<view
						v-if="showTermsRow"
						class="abt-row"
						:class="{ 'abt-row--last': !showRefundRow }"
						hover-class="abt-row--press"
						@tap="openArticle(termsUseId, copy.termsOfUse)"
					>
						<text class="abt-row-label">{{ copy.termsOfUse }}</text>
						<text class="abt-chevron">›</text>
					</view>
					<view
						v-if="showRefundRow"
						class="abt-row abt-row--last"
						hover-class="abt-row--press"
						@tap="openArticle(refundPolicyId, copy.refundPolicy)"
					>
						<text class="abt-row-label">{{ copy.refundPolicy }}</text>
						<text class="abt-chevron">›</text>
					</view>
				</view>

				<view class="abt-footer">
					<view class="abt-legal">
						<text class="abt-legal-link" @tap="openArticle(userAgreementId, copy.userAgreement)">《{{ copy.userAgreement }}》</text>
						<text class="abt-legal-sep">{{ copy.and }}</text>
						<text class="abt-legal-link" @tap="openArticle(privacyId, copy.privacyPolicy)">《{{ copy.privacyPolicy }}》</text>
					</view>
					<text class="abt-copy-line">{{ displayName }} {{ copy.copyright }}</text>
					<text v-if="about.copyright" class="abt-copy-line">Copyright © {{ about.copyright }}</text>
				</view>
			</view>
		</scroll-view>
		<!-- #ifdef APP-PLUS -->
		<app-update-sheet />
		<!-- #endif -->
	</view>
</template>

<script>
import { mapState } from 'vuex'
// #ifdef APP-PLUS
import AppUpdateSheet from '@/components/app-update-sheet/app-update-sheet.vue'
// #endif
import {
	fetchAboutInfo,
	normalizeArticleConfigId,
	isArticleMenuDisabled
} from '@/features/account/about-gateway'
import { isExternalArticleUrl } from '@/features/article/article-gateway'

export default {
	// #ifdef APP-PLUS
	components: { AppUpdateSheet },
	// #endif
	data() {
		return {
			statusBar: 0,
			scrollHeight: 600,
			safeBottom: 0,
			loading: false,
			about: {
				name: '',
				logo: '',
				copyright: ''
			},
			checkingUpdate: false
		}
	},
	computed: {
		...mapState({
			shell: (state) => state.shell
		}),
		appConfig() {
			return (this.shell && this.shell.appConfig) || {}
		},
		copy() {
			const t = this.$t.bind(this)
			return {
				title: t('user.panelAbout'),
				feedback: t('user.feedback'),
				contactUs: t('user.contactUs'),
				rateApp: t('user.rateApp'),
				versionUpdate: t('user.versionUpdate'),
				termsOfUse: t('user.termsOfUse'),
				refundPolicy: t('user.refundPolicy'),
				userAgreement: t('user.userAgreement'),
				privacyPolicy: t('user.privacyPolicy'),
				copyright: t('user.copyright'),
				and: t('about.and'),
				notInStore: t('user.notInStore'),
				versionLatest: t('user.versionLatest'),
				docMissing: t('passport.pledge-doc-missing'),
				updateLinkMissing: t('update.linkMissing'),
				network: t('user.realnameNetworkError')
			}
		},
		displayName() {
			return this.about.name || this.$t('passport.app-name')
		},
		logoSrc() {
			const raw =
				this.about.logo || this.appConfig.logo || this.appConfig.guide_logo || ''
			if (!raw) return ''
			return this.$appKit && this.$appKit.oss
				? this.$appKit.oss(raw, 200, 200)
				: raw
		},
		logoFallback() {
			const name = this.displayName
			return name ? String(name).slice(0, 1).toUpperCase() : '8'
		},
		versionLabel() {
			const ver = (this.shell && this.shell.version) || ''
			const code = (this.shell && this.shell.versionCode) || ''
			return code ? `V${ver}_${code}` : ver ? `V${ver}` : ''
		},
		termsUseId() {
			return normalizeArticleConfigId(this.appConfig.terms_use_id, 0)
		},
		refundPolicyId() {
			return normalizeArticleConfigId(this.appConfig.refund_policy_id, 0)
		},
		showTermsRow() {
			return !isArticleMenuDisabled(this.appConfig.terms_use_id)
		},
		showRefundRow() {
			return !isArticleMenuDisabled(this.appConfig.refund_policy_id)
		},
		userAgreementId() {
			return this.appConfig.user_agreement
		},
		privacyId() {
			return this.appConfig.privacy_protection
		}
	},
	onLoad() {
		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.scrollHeight = (sys.windowHeight || 667) - navH
		this.loadAbout()
		this.$store.dispatch('shell/fetchAppConfig').catch(() => {})
	},
	methods: {
		goBack() {
			if (getCurrentPages().length > 1) {
				uni.navigateBack({ delta: 1 })
			} else {
				uni.switchTab({
					url: '/pages/mine/index',
					fail: () => uni.reLaunch({ url: '/pages/mine/index' })
				})
			}
		},
		async loadAbout() {
			if (this.loading) return
			this.loading = true
			try {
				this.about = await fetchAboutInfo()
			} catch (_) {
				this.about = {
					name: this.$t('passport.app-name'),
					logo: '',
					copyright: ''
				}
			} finally {
				this.loading = false
			}
		},
		openArticle(id, title) {
			const raw = id != null ? String(id).trim() : ''
			if (!raw || raw === '0') {
				this.$appKit.msg(this.copy.docMissing)
				return
			}
			const encodedTitle = encodeURIComponent(title || '')
			if (isExternalArticleUrl(raw)) {
				uni.navigateTo({
					url: `/pages/article/details?url=${encodeURIComponent(raw)}&title=${encodedTitle}`
				})
				return
			}
			if (typeof this.$appKit.onDetails === 'function') {
				this.$appKit.onDetails(raw, encodedTitle)
				return
			}
			uni.navigateTo({
				url: `/pages/article/details?id=${raw}&title=${encodedTitle}`
			})
		},
		onFeedback() {
			uni.navigateTo({ url: '/pages/account/feedback' })
		},
		onContact() {
			uni.navigateTo({ url: '/pages/account/contact' })
		},
		onRateApp() {
			this.$appKit.msg(this.copy.notInStore)
		},
		async onCheckUpdate() {
			if (this.checkingUpdate) return
			this.checkingUpdate = true
			uni.showLoading({ mask: true })
			try {
				const r = await this.$store.dispatch('release/checkManual')
				if (!r || !r.hasUpdate) {
					this.$appKit.msg(
						this.copy.versionLatest.replace('{version}', this.versionLabel)
					)
					return
				}
				if (r.hasUpdate && !r.hasLink && !r.enforced) {
					this.$appKit.msg(this.copy.updateLinkMissing)
				}
			} catch (err) {
				this.$appKit.msg((err && err.message) || this.copy.network)
			} finally {
				this.checkingUpdate = false
				uni.hideLoading()
			}
		}
	}
}
</script>

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

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

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

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

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

.abt-nav-title {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1d26;
}

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

.abt-body {
	padding: 24rpx 28rpx 40rpx;
	box-sizing: border-box;
}

.abt-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48rpx 24rpx 40rpx;
}

.abt-logo-wrap {
	width: 160rpx;
	height: 160rpx;
	border-radius: 36rpx;
	background: linear-gradient(145deg, #eef4ff 0%, #e8f0fe 100%);
	box-shadow: 0 12rpx 36rpx rgba(74, 140, 255, 0.14);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-bottom: 24rpx;
}

.abt-logo {
	width: 100%;
	height: 100%;
}

.abt-logo-fallback {
	font-size: 64rpx;
	font-weight: 700;
	color: #4a8cff;
	line-height: 1;
}

.abt-app-name {
	font-size: 36rpx;
	font-weight: 700;
	color: #1a1d26;
	margin-bottom: 10rpx;
}

.abt-version {
	font-size: 26rpx;
	color: #8a8d9e;
}

.abt-card {
	background-color: #ffffff;
	border-radius: 24rpx;
	box-shadow: 0 6rpx 24rpx rgba(74, 140, 255, 0.06);
	overflow: hidden;
	margin-bottom: 40rpx;
}

.abt-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	min-height: 104rpx;
	padding: 0 28rpx;
	border-bottom: 1rpx solid #f0f2f7;
	box-sizing: border-box;
}

.abt-row--last {
	border-bottom-width: 0;
}

.abt-row--press {
	background-color: #f7f9fc;
}

.abt-row-label {
	font-size: 30rpx;
	color: #1a1d26;
}

.abt-chevron {
	font-size: 36rpx;
	color: #c5cad6;
	line-height: 1;
}

.abt-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8rpx 16rpx 0;
}

.abt-legal {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-bottom: 20rpx;
}

.abt-legal-link {
	font-size: 26rpx;
	color: #4a8cff;
	line-height: 1.5;
}

.abt-legal-sep {
	font-size: 26rpx;
	color: #8a8d9e;
	margin: 0 8rpx;
}

.abt-copy-line {
	font-size: 24rpx;
	color: #8a8d9e;
	line-height: 1.6;
	text-align: center;
}
</style>
