<template>
	<view class="skill-page">
		<!-- 顶栏：开通新服务 -->
		<view class="top-bar">
			<text class="top-link" @click="goAdd">开通新服务</text>
		</view>

		<!-- 分类 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="status-tabs">
			<view
				v-for="tab in statusTabs"
				:key="tab.key"
				class="status-tab"
				:class="{ active: activeStatus === tab.key }"
				@click="activeStatus = tab.key"
			>{{ tab.label }}</view>
		</view>

		<!-- 技能列表 -->
		<view class="skill-list" v-if="filteredList.length">
			<view class="skill-card" v-for="item in filteredList" :key="item.id">
				<view class="card-main">
					<view class="cover">
						<image v-if="item.cover" :src="item.cover" mode="aspectFill" />
					</view>
					<view class="info">
						<view class="title-row">
							<text class="title">{{ item.title }}</text>
							<text class="sold" v-if="item.status === 'opened' && item.soldCount">已售{{ item.soldCount }}</text>
						</view>
						<text class="price">{{ formatPrice(item) }}</text>
					</view>
				</view>

				<!-- 状态条 -->
				<view
					class="status-bar"
					v-if="statusBarText(item)"
					@click="onStatusBarClick(item)"
				>
					<text class="status-text">{{ statusBarText(item) }}</text>
					<text class="chevron" v-if="item.status === 'rejected'">&gt;</text>
				</view>

				<!-- 操作按钮 -->
				<view class="card-actions" v-if="item.status !== 'pending'">
					<template v-if="item.status === 'opened'">
						<view class="btn ghost" @click="onOffShelf(item)">申请下架</view>
						<view class="btn primary" v-if="item.canEdit" @click="goEdit(item)">编辑价格</view>
					</template>
					<template v-if="item.status === 'rejected'">
						<view class="btn ghost" @click="onDelete(item)">删除</view>
						<view class="btn primary" @click="openApplyModal([item])">重新申请</view>
					</template>
				</view>
			</view>
		</view>
		<view class="empty" v-else>暂无数据</view>

		<!-- 驳回详情弹窗 -->
		<view class="modal-mask" v-if="showRejectModal" @click="showRejectModal = false">
			<view class="modal-box" @click.stop>
				<view class="modal-title">申请开通服务驳回</view>
				<view class="modal-body">{{ rejectDetailText }}</view>
				<view class="modal-footer" @click="showRejectModal = false">关闭</view>
			</view>
		</view>

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

<script>
import {
	SKILL_CATEGORIES,
	MOCK_MY_SKILLS,
	STATUS_TABS,
	formatPrice,
} from './mock.js'

export default {
	data() {
		return {
			categories: SKILL_CATEGORIES,
			statusTabs: STATUS_TABS,
			skillList: [...MOCK_MY_SKILLS],
			activeCategory: '1',
			activeStatus: 'opened',
			showRejectModal: false,
			rejectDetailText: '',
			showApplyModal: false,
			applyItems: [],
			applyReason: '',
		}
	},
	computed: {
		filteredList() {
			return this.skillList.filter(item => {
				return item.categoryId === this.activeCategory && item.status === this.activeStatus
			})
		},
	},
	methods: {
		formatPrice,
		statusBarText(item) {
			if (item.status === 'opened' && item.applyDate) return item.applyDate
			if (item.status === 'pending') return '申请开通服务审核中'
			if (item.status === 'rejected') {
				const reason = item.rejectReason || ''
				return reason.length > 28 ? reason.slice(0, 28) + '...' : reason
			}
			return ''
		},
		onStatusBarClick(item) {
			if (item.status === 'rejected') {
				this.rejectDetailText = item.rejectReason
				this.showRejectModal = true
			}
		},
		goAdd() {
			uni.navigateTo({ url: '/workbench/skill/add' })
		},
		goEdit(item) {
			const str = uni.$u.queryParams({
				id: item.id,
				title: item.title,
				categoryName: this.categories.find(c => c.id === item.categoryId)?.name || '',
				billingType: item.billingType || '',
				platformPrice: item.platformPrice,
				priceRangeMin: item.priceRangeMin,
				priceRangeMax: item.priceRangeMax,
				myPrice: item.price,
			})
			uni.navigateTo({ url: `/workbench/skill/edit${str}` })
		},
		onOffShelf(item) {
			uni.showToast({ title: '申请下架待对接', icon: 'none' })
		},
		onDelete(item) {
			uni.showModal({
				title: '提示',
				content: '确定删除该服务？',
				success: res => {
					if (res.confirm) {
						this.skillList = this.skillList.filter(s => s.id !== item.id)
						uni.showToast({ title: '已删除', icon: 'none' })
					}
				},
			})
		},
		openApplyModal(items) {
			this.applyItems = items
			this.applyReason = ''
			this.showApplyModal = true
		},
		closeApplyModal() {
			this.showApplyModal = false
			this.applyItems = []
			this.applyReason = ''
		},
		submitApply() {
			if (!this.applyReason.trim()) {
				uni.showToast({ title: '请输入开通原因', icon: 'none' })
				return
			}
			this.applyItems.forEach(item => {
				const idx = this.skillList.findIndex(s => s.id === item.id)
				if (idx > -1) {
					this.skillList[idx].status = 'pending'
					this.skillList[idx].rejectReason = ''
				}
			})
			this.closeApplyModal()
			this.activeStatus = 'pending'
			uni.showToast({ title: '已提交，待审核', icon: 'none' })
		},
	},
}
</script>

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

.top-bar {
	display: flex;
	justify-content: flex-end;
	padding: 16rpx 32rpx 0;
	background: #fff;
}

.top-link {
	font-size: 28rpx;
	color: #333;
}

.category-tabs {
	white-space: nowrap;
	background: #fff;
	padding: 16rpx 24rpx 0;
	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;
	}
}

.status-tabs {
	display: flex;
	gap: 16rpx;
	padding: 24rpx 32rpx;
	background: #fff;
	margin-bottom: 16rpx;
}

.status-tab {
	padding: 12rpx 28rpx;
	font-size: 26rpx;
	color: #666;
	border: 1rpx solid #ddd;
	border-radius: 32rpx;
	background: #fff;

	&.active {
		color: #333;
		background: #f0f0f0;
		border-color: #ccc;
	}
}

.skill-list {
	padding: 0 24rpx;
}

.skill-card {
	background: #fff;
	border: 1rpx solid #eee;
	border-radius: 12rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
}

.card-main {
	display: flex;
}

.cover {
	width: 120rpx;
	height: 120rpx;
	background: #eee;
	border-radius: 8rpx;
	flex-shrink: 0;
	overflow: hidden;

	image {
		width: 100%;
		height: 100%;
	}
}

.info {
	flex: 1;
	margin-left: 20rpx;
	overflow: hidden;
}

.title-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.title {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	flex: 1;
	line-height: 1.4;
}

.sold {
	font-size: 22rpx;
	color: #999;
	flex-shrink: 0;
	margin-left: 12rpx;
}

.price {
	display: block;
	font-size: 28rpx;
	color: #e54d42;
	margin-top: 12rpx;
}

.status-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20rpx;
	padding: 16rpx 20rpx;
	background: #f5f5f5;
	border-radius: 8rpx;
}

.status-text {
	flex: 1;
	font-size: 24rpx;
	color: #666;
	line-height: 1.5;
}

.chevron {
	color: #999;
	font-size: 24rpx;
	margin-left: 8rpx;
}

.card-actions {
	display: flex;
	justify-content: flex-end;
	gap: 16rpx;
	margin-top: 20rpx;
}

.btn {
	padding: 12rpx 32rpx;
	font-size: 26rpx;
	border-radius: 8rpx;
	text-align: center;

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

	&.primary {
		background: #333;
		color: #fff;
		border: 1rpx solid #333;
	}

	&.flex1 {
		flex: 1;
	}
}

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

.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;
	overflow: hidden;
}

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

.modal-body {
	padding: 16rpx 32rpx 32rpx;
	font-size: 26rpx;
	color: #666;
	line-height: 1.7;
	max-height: 400rpx;
	overflow-y: auto;
}

.modal-footer {
	text-align: center;
	padding: 24rpx;
	font-size: 30rpx;
	color: #0879ff;
	border-top: 1rpx solid #eee;
}

.apply-box {
	padding-bottom: 0;
}

.apply-tip {
	text-align: center;
	font-size: 26rpx;
	color: #666;
	padding: 0 32rpx 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 32rpx;
}
</style>
