<template>
	<view class="po">
		<view class="po-head">
			<view>
				<view class="po-kicker">CAMPUS FARM</view>
				<view class="po-title">松鼠星际农场</view>
					<view class="po-sub">种券和防御塔保留，每天一点成长，轻量经营。</view>
				</view>
			<view class="po-tower-badge">
				<text>Lv{{state.towerLevel || 1}}</text>
				<text>防御塔</text>
			</view>
		</view>

		<view class="po-grid">
			<view class="po-card tree">
				<view class="po-focus-tag">推荐先种</view>
				<view class="po-tree">
					<view class="po-tree-crown"></view>
					<view class="po-tree-body"></view>
				</view>
				<view class="po-card-title">券树培育</view>
				<view class="po-card-desc highlight">投入星球券开始培育，成熟后返还本金和收益。</view>
				<view class="po-tool-tip">
					<text>🌱</text>
					<text>周期越长越适合闲置券，成熟后记得回来收获。</text>
				</view>
				<scroll-view scroll-x class="po-cycles">
					<view class="po-cycle" v-for="(c,i) in treeConfigs" :key="i" @tap="$emit('plant', c)">
						<text>{{c.cycleHours}}h</text>
						<text>收益 {{rateText(c.rate)}}</text>
						<text>{{investRange(c)}}</text>
					</view>
				</scroll-view>
				<view class="po-orders inline" v-if="treeOrders.length">
					<view class="po-land-title">成长中的券树</view>
					<view class="po-order" v-for="(o,i) in treeOrders" :key="i">
						<view>
							<view class="po-order-title">{{o.cycleHours}}h · 投入{{o.investTickets}}券</view>
							<view class="po-order-desc">预计收获 {{o.expectedTotal}} 券</view>
						</view>
						<view class="po-order-btn" @tap="$emit('harvest', o)">{{o.status === 2 ? '已收' : '收获'}}</view>
					</view>
				</view>
			</view>

			<view class="po-card tower">
				<view class="tower-copy">
					<view class="po-icon">TOWER</view>
					<view class="po-card-title">防御塔 Lv{{state.towerLevel || 1}}</view>
					<view class="po-card-desc highlight">拦截 {{state.towerInterceptRate || 0}}% · 反击 {{state.towerCounterRate || 0}}% · 伤害 {{state.towerDamage || 0}}</view>
					<view class="tower-next" v-if="nextTower">
						<text>下一级 Lv{{nextTower.level}}</text>
						<text>拦截 {{nextTower.interceptRate || 0}}% · 反击 {{nextTower.counterRate || 0}}% · 伤害 {{nextTower.damage || 0}}</text>
						<text>升级消耗 {{nextTower.upgradeCost || 0}} 张星球券</text>
					</view>
					<view class="tower-next max" v-else>
						<text>已达到当前最高等级</text>
					</view>
					<view class="po-tool-tip tower-tip">
						<text>🛡️</text>
						<text>被偷券时更容易挡住，还能反击消耗对方体力。</text>
					</view>
				</view>
				<view class="tower-action">
					<view class="tower-visual">🛡️</view>
					<view class="po-main-btn" @tap="$emit('upgradeTower')">升级防御</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: { type: Object, default: () => ({}) }
		},
		computed: {
			state() {
				return (this.data && this.data.state) || {}
			},
			treeConfigs() {
				return (this.data && this.data.treeConfigs) || []
			},
			treeOrders() {
				return (this.data && this.data.treeOrders) || []
			},
			nextTower() {
				return (this.data && this.data.nextTowerConfig) || null
			}
		},
		methods: {
			rateText(rate) {
				return Math.round((Number(rate || 0)) * 100) + '%'
			},
			investRange(config) {
				const min = config.minInvest || 1
				const max = config.maxInvest || 0
				return max > 0 ? `${min}-${max}券` : `最低${min}券`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.po { margin-top: 20rpx; }
	.po-head { display: none; }
	.po-kicker { color: #59CBB5; font-size: 20rpx; font-weight: 900; letter-spacing: 2rpx; }
	.po-title { margin-top: 6rpx; color: #12342F; font-size: 40rpx; font-weight: 900; }
	.po-sub { margin-top: 8rpx; color: #6B817D; font-size: 24rpx; }
	.po-tower-badge { width: 124rpx; height: 124rpx; border-radius: 44rpx; background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(225,250,255,0.82)); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 18rpx 42rpx rgba(79,183,255,0.16); }
	.po-tower-badge text:first-child { color: #22B889; font-size: 36rpx; font-weight: 900; }
	.po-tower-badge text:last-child { color: #6B817D; font-size: 20rpx; }
	.po-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18rpx; }
	.po-card { position: relative; min-height: 250rpx; padding: 24rpx; border-radius: 38rpx; background: linear-gradient(155deg, rgba(255,255,255,0.9), rgba(241,255,249,0.72)); border: 2rpx solid rgba(255,255,255,0.9); box-shadow: 0 20rpx 46rpx rgba(53,214,166,0.12); overflow: hidden; }
	.po-card.tree { grid-column: span 2; min-height: 280rpx; }
	.po-card.tower { grid-column: span 2; min-height: 220rpx; display: flex; align-items: center; justify-content: space-between; gap: 20rpx; background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(232,246,255,0.78)); }
	.po-focus-tag { position: absolute; right: 22rpx; top: 22rpx; z-index: 2; padding: 6rpx 16rpx; border-radius: 999rpx; background: linear-gradient(135deg, #FFB84D, #35D6A6); color: #FFFFFF; font-size: 20rpx; font-weight: 900; box-shadow: 0 10rpx 20rpx rgba(53,214,166,0.16); }
	.po-card-title { color: #12342F; font-size: 30rpx; font-weight: 900; }
	.po-card-desc { margin-top: 10rpx; color: #6B817D; font-size: 23rpx; line-height: 1.5; }
	.po-card-desc.highlight { color: #315B50; font-weight: 900; }
	.po-tool-tip { position: relative; z-index: 1; display: flex; gap: 12rpx; margin-top: 16rpx; padding: 16rpx 18rpx; border-radius: 24rpx; background: rgba(255,184,77,0.13); border: 2rpx solid rgba(255,184,77,0.22); color: #7A5420; font-size: 22rpx; line-height: 1.45; font-weight: 800; max-width: 430rpx; }
	.po-tool-tip text:first-child { flex-shrink: 0; }
	.po-tool-tip.tower-tip { background: rgba(79,183,255,0.13); border-color: rgba(79,183,255,0.22); color: #315A78; }
	.po-tree { position: absolute; right: 54rpx; top: 34rpx; width: 140rpx; height: 150rpx; animation: treeBreath 2.6s ease-in-out infinite; }
	.po-tree-crown { width: 130rpx; height: 110rpx; border-radius: 70rpx 70rpx 50rpx 50rpx; background: radial-gradient(circle at 35% 28%, #FFFFFF, #A8F7C1 42%, #35D6A6); box-shadow: 0 18rpx 38rpx rgba(53,214,166,0.24); }
	.po-tree-body { margin: -12rpx auto 0; width: 28rpx; height: 66rpx; border-radius: 20rpx; background: linear-gradient(180deg, #F5C68A, #D8894F); }
	@keyframes treeBreath { 0%,100%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(-10rpx) scale(1.04); } }
	.po-cycles { margin-top: 22rpx; white-space: nowrap; width: 420rpx; max-width: 420rpx; box-sizing: border-box; }
	.po-cycle { display: inline-flex; flex-direction: column; justify-content: center; width: 122rpx; height: 98rpx; margin-right: 10rpx; padding-left: 16rpx; border-radius: 26rpx; background: linear-gradient(145deg, #FFFFFF, #E9FFF4); color: #22B889; font-size: 21rpx; font-weight: 900; box-shadow: 0 12rpx 26rpx rgba(53,214,166,0.14); border: 2rpx solid rgba(53,214,166,0.18); }
	.po-cycle text:nth-child(2) { margin-top: 4rpx; }
	.po-cycle text:nth-child(3) { margin-top: 4rpx; color: #7E9691; font-size: 18rpx; font-weight: 800; }
	.po-icon { display: inline-flex; padding: 10rpx 16rpx; margin-bottom: 18rpx; border-radius: 999rpx; background: rgba(255,255,255,0.8); color: #22B889; font-size: 20rpx; font-weight: 900; }
	.po-progress { margin-top: 18rpx; height: 14rpx; border-radius: 999rpx; background: rgba(53,214,166,0.12); overflow: hidden; }
	.po-progress-in { height: 100%; border-radius: 999rpx; background: linear-gradient(90deg, #35D6A6, #4FB7FF); }
	.po-actions { display: flex; gap: 10rpx; margin-top: 18rpx; }
	.po-actions text, .po-main-btn { display: inline-flex; align-items: center; justify-content: center; height: 54rpx; padding: 0 18rpx; border-radius: 999rpx; background: linear-gradient(135deg, #DFFBF1, #E8F6FF); color: #22B889; font-size: 22rpx; font-weight: 800; }
	.po-main-btn { margin-top: 12rpx; background: linear-gradient(135deg, #35D6A6, #4FB7FF); color: #FFFFFF; box-shadow: 0 12rpx 24rpx rgba(53,214,166,0.18); }
	.tower-copy { flex: 1; min-width: 0; }
	.tower-action { width: 150rpx; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
	.tower-visual { width: 104rpx; height: 104rpx; line-height: 104rpx; text-align: center; border-radius: 36rpx; background: rgba(255,255,255,0.72); font-size: 48rpx; box-shadow: 0 14rpx 30rpx rgba(79,183,255,0.14); }
	.tower-next { margin-top: 14rpx; padding: 16rpx 18rpx; border-radius: 24rpx; background: rgba(255,255,255,0.68); color: #315A78; display: flex; flex-direction: column; gap: 5rpx; font-size: 21rpx; font-weight: 800; }
	.tower-next text:first-child { color: #12342F; font-size: 23rpx; font-weight: 900; }
	.tower-next text:last-child { color: #22B889; }
	.tower-next.max text:last-child { color: #315A78; }
	.po-orders { margin-top: 20rpx; padding: 24rpx; border-radius: 38rpx; background: rgba(255,255,255,0.62); border: 2rpx solid rgba(255,255,255,0.86); box-shadow: 0 18rpx 42rpx rgba(79,183,255,0.1); }
	.po-orders.inline { margin-top: 22rpx; padding: 20rpx; border-radius: 30rpx; background: rgba(255,255,255,0.58); box-shadow: none; }
	.po-land-title { color: #12342F; font-size: 30rpx; font-weight: 900; }
	.po-order { display: flex; align-items: center; justify-content: space-between; margin-top: 18rpx; padding: 18rpx; border-radius: 28rpx; background: rgba(255,255,255,0.78); }
	.po-order-title { color: #12342F; font-size: 26rpx; font-weight: 800; }
	.po-order-desc { margin-top: 6rpx; color: #6B817D; font-size: 22rpx; }
	.po-order-btn { padding: 14rpx 20rpx; border-radius: 999rpx; background: #22B889; color: #fff; font-size: 22rpx; font-weight: 800; }
</style>
