<template>
	<view class="add-page">
		<!-- 分类 Tab -->
		<scroll-view scroll-x class="category-tabs" :show-scrollbar="false">
			<view
				v-for="cat in categories"
				:key="cat.id"
				class="category-tab"
				:class="{ active: activeCategory === cat.id }"
				@click="activeCategory = cat.id"
			>{{ cat.name }}</view>
		</scroll-view>

		<!-- 可选服务列表 -->
		<view class="service-list" v-if="filteredList.length">
			<view
				class="service-item"
				v-for="item in filteredList"
				:key="item.id"
				@click="toggleSelect(item.id)"
			>
				<view class="checkbox" :class="{ checked: selectedIds.includes(item.id) }">
					<text v-if="selectedIds.includes(item.id)">✓</text>
				</view>
				<view class="cover"></view>
				<view class="info">
					<text class="title">{{ item.title }}</text>
					<text class="price">¥{{ item.price }}/{{ item.unit || '次' }}</text>
				</view>
			</view>
		</view>
		<view class="empty" v-else>暂无可开通服务</view>

		<!-- 底部栏 -->
		<view class="footer-bar">
			<text class="selected-count">已选{{ selectedIds.length }}</text>
			<view class="apply-btn" @click="onApply">申请开通</view>
		</view>

		<!-- 申请开通弹窗 -->
		<view class="modal-mask" v-if="showApplyModal" @click="showApplyModal = false">
			<view class="modal-box" @click.stop>
				<view class="modal-title">申请开通</view>
				<view class="apply-tip">已申请开通{{ selectedIds.length }}项服务</view>
				<textarea
					class="apply-reason"
					v-model="applyReason"
					placeholder="请输入开通原因"
					maxlength="200"
				/>
				<view class="apply-btns">
					<view class="btn ghost flex1" @click="showApplyModal = false">取消</view>
					<view class="btn primary flex1" @click="submitApply">提交申请</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { SKILL_CATEGORIES, MOCK_AVAILABLE_SKILLS } from './mock.js'

export default {
	data() {
		return {
			categories: SKILL_CATEGORIES,
			serviceList: [...MOCK_AVAILABLE_SKILLS],
			activeCategory: '1',
			selectedIds: [],
			showApplyModal: false,
			applyReason: '',
		}
	},
	computed: {
		filteredList() {
			return this.serviceList.filter(item => item.categoryId === this.activeCategory)
		},
	},
	methods: {
		toggleSelect(id) {
			const idx = this.selectedIds.indexOf(id)
			if (idx > -1) {
				this.selectedIds.splice(idx, 1)
			} else {
				this.selectedIds.push(id)
			}
		},
		onApply() {
			if (this.selectedIds.length === 0) {
				uni.showToast({ title: '请至少选择1条数据', icon: 'none' })
				return
			}
			this.applyReason = ''
			this.showApplyModal = true
		},
		submitApply() {
			if (!this.applyReason.trim()) {
				uni.showToast({ title: '请输入开通原因', icon: 'none' })
				return
			}
			this.showApplyModal = false
			this.selectedIds = []
			uni.showToast({ title: '已提交，待审核', icon: 'none' })
			setTimeout(() => uni.navigateBack(), 1200)
		},
	},
}
</script>

<style lang="scss" scoped>
.add-page {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: 140rpx;
}

.category-tabs {
	white-space: nowrap;
	background: #fff;
	padding: 16rpx 24rpx;
	border-bottom: 1rpx solid #eee;
}

.category-tab {
	display: inline-block;
	padding: 16rpx 24rpx;
	font-size: 28rpx;
	color: #666;
	margin-right: 8rpx;
	border-bottom: 4rpx solid transparent;

	&.active {
		color: #333;
		font-weight: 600;
		border-bottom-color: #333;
	}
}

.service-list {
	padding: 24rpx;
}

.service-item {
	display: flex;
	align-items: center;
	background: #fff;
	border: 1rpx solid #eee;
	border-radius: 12rpx;
	padding: 24rpx;
	margin-bottom: 16rpx;
}

.checkbox {
	width: 40rpx;
	height: 40rpx;
	border: 2rpx solid #ccc;
	border-radius: 50%;
	margin-right: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 24rpx;
	color: #fff;

	&.checked {
		background: #333;
		border-color: #333;
	}
}

.cover {
	width: 100rpx;
	height: 100rpx;
	background: #eee;
	border-radius: 8rpx;
	flex-shrink: 0;
	margin-right: 20rpx;
}

.info {
	flex: 1;
	overflow: hidden;
}

.title {
	display: block;
	font-size: 28rpx;
	color: #333;
	margin-bottom: 8rpx;
}

.price {
	font-size: 26rpx;
	color: #e54d42;
}

.empty {
	text-align: center;
	padding: 120rpx 0;
	font-size: 28rpx;
	color: #999;
}

.footer-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 32rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	background: #fff;
	border-top: 1rpx solid #eee;
}

.selected-count {
	font-size: 28rpx;
	color: #333;
}

.apply-btn {
	padding: 20rpx 48rpx;
	background: #333;
	color: #fff;
	font-size: 28rpx;
	border-radius: 8rpx;
}

.modal-mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48rpx;
	box-sizing: border-box;
}

.modal-box {
	width: 100%;
	max-width: 600rpx;
	background: #fff;
	border-radius: 16rpx;
	padding-bottom: 32rpx;
}

.modal-title {
	font-size: 32rpx;
	font-weight: 600;
	text-align: center;
	padding: 32rpx 32rpx 16rpx;
}

.apply-tip {
	text-align: center;
	font-size: 26rpx;
	color: #666;
	padding-bottom: 16rpx;
}

.apply-reason {
	display: block;
	width: calc(100% - 64rpx);
	margin: 0 32rpx 24rpx;
	min-height: 200rpx;
	padding: 20rpx;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	font-size: 26rpx;
	box-sizing: border-box;
}

.apply-btns {
	display: flex;
	gap: 16rpx;
	padding: 0 32rpx;
}

.btn {
	padding: 20rpx;
	font-size: 28rpx;
	border-radius: 8rpx;
	text-align: center;

	&.ghost {
		border: 1rpx solid #ccc;
		color: #666;
	}

	&.primary {
		background: #333;
		color: #fff;
	}

	&.flex1 {
		flex: 1;
	}
}
</style>
