<template>
	<view class="fe-bottom-sheet fe-bottom-sheet--cost" :class="{ 'fe-bottom-sheet--active': active }">
		<view class="fe-sheet-handle" />
		<view class="fe-sheet-header">
			<view class="fe-sheet-title">💰 成本对比</view>
			<view class="fe-swipe-indicator">
				<text class="fe-swipe-indicator__arrow">‹</text>
				<text>滑动</text>
				<text class="fe-swipe-indicator__arrow">›</text>
			</view>
		</view>
		<view class="fe-sheet-source">浦东仓库搬运 · 10人×2天</view>
		<view class="fe-sheet-body fe-sheet-body--cost">
			<swiper
				class="fe-cost-swiper"
				:style="{ height: swiperHeight + 'px' }"
				:current="currentIndex"
				@change="onSwiperChange"
			>
				<swiper-item
					v-for="(plan, planIndex) in plans"
					:key="plan.id"
					class="fe-cost-swiper__item"
					:style="{ height: swiperHeight + 'px' }"
				>
					<scroll-view
						scroll-y
						class="fe-cost-swiper__scroll"
						:style="{ height: swiperHeight + 'px' }"
						:show-scrollbar="false"
						:enhanced="false"
					>
						<view class="fe-cost-swiper__inner">
							<view
								class="fe-cost-card"
								:class="{ 'fe-cost-card--recommended': currentIndex === planIndex }"
							>
								<view v-if="plan.recommended && currentIndex === planIndex" class="fe-cost-card__tag">推荐</view>
								<view class="fe-cost-card__head">
									<view class="fe-cost-card__name">
										<text>{{ plan.icon }}</text>
										<text>{{ plan.title }}</text>
									</view>
									<view class="fe-cost-card__toggle" @tap.stop="toggleExpandByIndex(planIndex)">
										<view
											class="fe-cost-card__chevron"
											:class="{ 'fe-cost-card__chevron--up': isExpandedByIndex(planIndex) }"
										/>
									</view>
								</view>
								<view class="fe-cost-total">{{ plan.total }}</view>
								<view class="fe-info-row">
									<text class="fe-info-row__label">人均成本</text>
									<text class="fe-info-row__value">{{ plan.avgCost }}</text>
								</view>
								<view v-if="isExpandedByIndex(planIndex)" class="fe-cost-card__detail">
									<view
										v-for="(row, rowIdx) in plan.rows"
										:key="rowIdx"
										class="fe-info-row"
									>
										<text class="fe-info-row__label">{{ row.label }}</text>
										<text class="fe-info-row__value">{{ row.value }}</text>
									</view>
									<view v-if="plan.breakdown" class="fe-cost-card__breakdown">
										<view
											v-for="(row, bdIdx) in plan.breakdown"
											:key="bdIdx"
											class="fe-info-row"
										>
											<text class="fe-info-row__label">{{ row.label }}</text>
											<text class="fe-info-row__value">{{ row.value }}</text>
										</view>
									</view>
									<view v-if="plan.compliance" class="fe-compliance">
										<text
											v-for="(badge, cmIdx) in plan.compliance"
											:key="cmIdx"
											class="fe-compliance-badge"
										>✓ {{ badge }}</text>
									</view>
								</view>
							</view>

							<view class="fe-cost-card fe-cost-card--muted">
								<view class="fe-cost-card__name">
									<text>{{ traditional.icon }}</text>
									<text>{{ traditional.title }}</text>
								</view>
								<view class="fe-cost-total fe-cost-total--muted">{{ traditional.total }}</view>
								<view class="fe-info-row">
									<text class="fe-info-row__label">人均成本</text>
									<text class="fe-info-row__value">{{ traditional.avgCost }}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<view class="fe-dot-indicator">
				<view
					v-for="(plan, i) in plans"
					:key="plan.id"
					class="fe-dot-indicator__dot"
					:class="{ 'fe-dot-indicator__dot--active': currentIndex === i }"
				/>
			</view>
		</view>
		<view class="fe-sheet-footer">
			<view class="fe-btn fe-btn--secondary fe-btn--lg" @tap="toast('已导出对比报告')">对比传统</view>
			<view class="fe-btn fe-btn--primary fe-btn--lg" @tap="$emit('confirm')">确认此方案</view>
		</view>
	</view>
</template>

<script>
import { COST_PLANS, TRADITIONAL_COST_PLAN, showToast } from '@/common/chat-data.js'

export default {
	name: 'FeCostSheet',
	props: {
		active: { type: Boolean, default: false }
	},
	data() {
		return {
			plans: COST_PLANS,
			traditional: TRADITIONAL_COST_PLAN,
			currentIndex: 0,
			expandedPlans: {},
			swiperHeight: uni.upx2px(800)
		}
	},
	watch: {
		active(val) {
			if (val) {
				this.currentIndex = 0
				this.expandedPlans = {}
			}
		}
	},
	methods: {
		toast: showToast,
		onSwiperChange(e) {
			this.currentIndex = e.detail.current
		},
		isExpanded(id) {
			if (this.expandedPlans[id] === undefined) return true
			return !!this.expandedPlans[id]
		},
		isExpandedByIndex(index) {
			const plan = this.plans[index]
			return plan ? this.isExpanded(plan.id) : true
		},
		toggleExpandByIndex(index) {
			const plan = this.plans[index]
			if (!plan) return
			const id = plan.id
			this.$set(this.expandedPlans, id, !this.expandedPlans[id])
		}
	}
}
</script>

<style lang="scss" scoped>
.fe-bottom-sheet--cost {
	max-height: 92vh;
}

.fe-sheet-body--cost {
	flex: 1;
	width: 100%;
	min-height: 0;
	max-height: none;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.fe-cost-swiper {
	width: 100%;
	flex-shrink: 0;
}

.fe-cost-swiper__item {
	height: 100%;
}

.fe-cost-swiper__scroll {
	width: 100%;
	box-sizing: border-box;
}

.fe-cost-swiper__inner {
	padding: 16rpx 40rpx 24rpx;
	box-sizing: border-box;
}

.fe-cost-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16rpx;
	margin-bottom: 24rpx;
}

.fe-cost-card__name {
	display: flex;
	align-items: center;
	gap: 12rpx;
	font-size: 30rpx;
	font-weight: 700;
	flex: 1;
	min-width: 0;
}

.fe-cost-card__toggle {
	width: 56rpx;
	height: 56rpx;
	border-radius: 50%;
	background: rgba(124, 58, 237, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.fe-cost-card__chevron {
	width: 18rpx;
	height: 18rpx;
	border-right: 4rpx solid $fe-primary;
	border-bottom: 4rpx solid $fe-primary;
	transform: rotate(45deg);
	margin-top: -6rpx;
	transition: transform 0.2s ease;
}

.fe-cost-card__chevron--up {
	transform: rotate(-135deg);
	margin-top: 6rpx;
}

.fe-cost-card__breakdown {
	border-top: 1rpx solid #F1F5F9;
	margin-top: 16rpx;
	padding-top: 16rpx;
}

.fe-cost-card__detail {
	width: 100%;
}

.fe-cost-card--muted {
	opacity: 0.65;
	margin-bottom: 0;

	.fe-cost-card__name {
		margin-bottom: 24rpx;
	}
}

.fe-cost-total--muted {
	color: #64748B;
}
</style>
