<template>
	<view class="more" :style="{'--statusbar': statusBarHeight + 'px'}">
		<view class="nav" :style="{paddingTop: statusBarHeight + 'px'}">
			<view class="nav-back" @tap="goBack"><text>‹</text></view>
			<view class="nav-title">星球补给地图</view>
		</view>

		<scroll-view scroll-y class="page" :style="{paddingTop: (statusBarHeight + 58) + 'px'}">
			<view v-if="loading" class="loading-card">正在加载星球补给...</view>
			<block v-else>
				<view class="hero">
					<view>
						<view class="hero-kicker">PLANET SUPPLY</view>
						<view class="hero-title">轻量经营补给地图</view>
						<view class="hero-sub">松鼠星际农场、券树培育和防御塔成长，玩法更轻更直接。</view>
					</view>
					<view class="hero-ticket">
						<text>{{home.myTicketCount || 0}}</text>
						<text>星球券</text>
					</view>
				</view>

				<planet-news :list="home.newsList"></planet-news>

				<planet-operate
					:data="home.operate"
					@plant="onPlantTree"
					@harvest="onHarvestTree"
					@upgradeTower="onUpgradeTower">
				</planet-operate>

				<planet-tasks
					:tasks="home.tasks"
					@claim="onClaimTask">
				</planet-tasks>

				<view class="bottom-space"></view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	import planetTasks from '@/package1/components/planet/planet-tasks.vue'
	import planetNews from '@/package1/components/planet/planet-news.vue'
	import planetOperate from '@/package1/components/planet/planet-operate.vue'

	export default {
		components: {
			planetTasks,
			planetNews,
			planetOperate
		},
		data() {
			return {
				statusBarHeight: 20,
				loading: true,
				userId: '',
				regionId: '',
				nickname: '',
				avatar: '',
				college: '',
				home: {
					myTicketCount: 0,
					tasks: [],
					newsList: [],
					operate: {}
				}
			}
		},
		onLoad() {
			const sys = uni.getSystemInfoSync()
			this.statusBarHeight = sys.statusBarHeight || 20
			this.userId = uni.getStorageSync('id') || ''
			this.nickname = uni.getStorageSync('nickName') || uni.getStorageSync('nickname') || ''
			this.avatar = uni.getStorageSync('avatarUrl') || uni.getStorageSync('avatar') || ''
			try {
				const area = uni.getStorageSync('area')
				if (area) this.regionId = JSON.parse(area).id || ''
			} catch (e) {}
			this.loadHome()
		},
		methods: {
			loadHome(silent) {
				if (!this.userId) {
					this.tui.toast('请先登录')
					return
				}
				if (!this.regionId) {
					this.loading = false
					this.tui.toast('未获取到校区信息')
					return
				}
				if (!silent) this.loading = true
				this.tui.request('/app/planet/home', 'POST', {
					userId: this.userId,
					regionId: this.regionId,
					nickname: this.nickname,
					avatar: this.avatar,
					college: this.college
				}, false, false, true).then((res) => {
					this.loading = false
					if (res.code == 200 && res.result) {
						this.home = res.result
					} else if (res.message) {
						this.tui.toast(res.message)
					}
				}).catch(() => {
					this.loading = false
				})
			},
			onClaimTask(task) {
				this.tui.request('/app/planet/task/claim', 'POST', {
					userId: this.userId,
					regionId: this.regionId,
					taskCode: task.code
				}).then((res) => {
					this.tui.toast(res.message, 1500, res.code == 200)
					if (res.code == 200) this.loadHome(true)
				})
			},
			promptTickets(title, callback) {
				uni.showModal({
					title,
					editable: true,
					placeholderText: '输入星球券数量',
					success: (res) => {
						if (!res.confirm) return
						const tickets = parseInt(res.content || '0', 10)
						if (!tickets || tickets <= 0) {
							this.tui.toast('请输入正确数量')
							return
						}
						callback(tickets)
					}
				})
			},
			operateRequest(url, data, successText) {
				this.tui.request(url, 'POST', Object.assign({
					userId: this.userId,
					regionId: this.regionId
				}, data || {})).then((res) => {
					this.tui.toast(res.code == 200 ? successText : res.message, 1500, res.code == 200)
					if (res.code == 200) this.loadHome(true)
				})
			},
			onPlantTree(config) {
				this.promptTickets(`投入 ${config.cycleHours}h 券树`, (tickets) => {
					this.operateRequest('/app/planet/tree/plant', { configId: config.id, tickets }, '种植成功')
				})
			},
			onHarvestTree(order) {
				if (order.status === 2) {
					this.tui.toast('这棵券树已经收获')
					return
				}
				this.operateRequest('/app/planet/tree/harvest', { orderId: order.id }, '收获成功')
			},
			onUpgradeTower() {
				this.tui.modal('升级防御塔', '确认消耗星球券提升拦截能力？', true, (ok) => {
					if (ok) this.operateRequest('/app/planet/tower/upgrade', {}, '升级成功')
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1,
					fail() {
						uni.navigateTo({ url: '/package1/planet/index' })
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.more {
		min-height: 100vh;
		background: linear-gradient(155deg, #F3FFF4 0%, #EAF8FF 46%, #FFF8DE 100%);
		color: #12342F;
	}
	.nav { position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 20; display: flex; align-items: center; justify-content: center; box-sizing: content-box; background: linear-gradient(180deg, rgba(243,255,244,0.96), rgba(243,255,244,0)); }
	.nav-back { position: absolute; left: 20rpx; bottom: 0; height: 44px; width: 60rpx; display: flex; align-items: center; justify-content: center; }
	.nav-back text { color: #12342F; font-size: 48rpx; font-weight: 300; }
	.nav-title { color: #12342F; font-size: 34rpx; font-weight: 900; align-self: flex-end; padding-bottom: 6rpx; }
	.page { height: 100vh; box-sizing: border-box; padding-left: 22rpx; padding-right: 22rpx; }
	.loading-card { margin-top: 24rpx; height: 220rpx; border-radius: 38rpx; background: rgba(255,255,255,0.76); display: flex; align-items: center; justify-content: center; color: #6B817D; font-size: 26rpx; }
	.hero { margin-top: 24rpx; padding: 32rpx; border-radius: 42rpx; background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(239,255,249,0.74)); border: 2rpx solid rgba(255,255,255,0.92); box-shadow: 0 22rpx 54rpx rgba(53,214,166,0.12); display: flex; justify-content: space-between; gap: 20rpx; }
	.hero-kicker { color: #59CBB5; font-size: 20rpx; font-weight: 900; letter-spacing: 3rpx; }
	.hero-title { margin-top: 8rpx; color: #12342F; font-size: 38rpx; font-weight: 900; }
	.hero-sub { margin-top: 10rpx; color: #6B817D; font-size: 24rpx; line-height: 1.45; }
	.hero-ticket { width: 140rpx; height: 120rpx; border-radius: 34rpx; background: linear-gradient(145deg, #35D6A6, #4FB7FF); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
	.hero-ticket text:first-child { font-size: 36rpx; font-weight: 900; }
	.hero-ticket text:last-child { margin-top: 4rpx; font-size: 20rpx; }
	.bottom-space { height: 60rpx; }
</style>
