<template>
	<view class="add-page">
		<!-- 陪玩：子分类 Tab -->
		<view class="sub-tabs-wrap" v-if="isPlaymate">
			<u-tabs :list="playmateTabList" :current="activeSubTabIndex" :scrollable="true" lineWidth="30"
				lineColor="#20CAC2" :activeStyle="{
					color: '#333',
					fontWeight: 'bold',
				}" :inactiveStyle="{
					color: '#999',
				}" itemStyle="padding: 0 28rpx; height: 88rpx; font-size: 28rpx;" @change="onSubTabChange"></u-tabs>
		</view>
		<!-- 可选服务列表 -->
		<view class="service-list" v-if="serviceList.length">
			<view class="service-item" v-for="item in serviceList" :key="item.id" @click="toggleSelect(item.id)">
				<view class="cover">
					<image v-if="item.cover" :src="item.cover" mode="aspectFill" />
				</view>
				<view class="info">
					<text class="title">{{ item.title }}</text>
					<text class="price">{{ formatAvailablePrice(item) }}</text>
				</view>
				<view class="select-icon">
					<image v-if="selectedIds.includes(item.id)" class="checked-icon"
						src="@/static/workbench/checkCircle.png" mode="aspectFit" />
					<view v-else class="unchecked-icon"></view>
				</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="box">
					<view class="modal-title">申请开通</view>
					<view class="apply-tip">已申请开通{{ selectedIds.length }}项服务</view>
					<textarea class="apply-reason" v-model="applyReason" placeholder="请输入开通原因" maxlength="200"
						placeholder-style="font-weight: 400;font-size: 26rpx;color: #C9CDD4;" />
				</view>

				<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 {
	MAIN_TYPES,
	PLAYMATE_TABS,
	MOCK_AVAILABLE_SKILLS,
	formatAvailablePrice,
} from './mock.js'
import { getNotApplyList,applyForService } from '@/api/workbench'
export default {
	data() {
		return {
			mainType: MAIN_TYPES.MASSAGE,
			playmateTabs: PLAYMATE_TABS,
			serviceList: [...MOCK_AVAILABLE_SKILLS],
			activeSubTab: PLAYMATE_TABS[0].id,
			selectedIds: [],
			showApplyModal: false,
			applyReason: '',
		}
	},
	computed: {
		isPlaymate() {
			return this.mainType === MAIN_TYPES.PLAYMATE
		},
		isMassage() {
			return this.mainType === MAIN_TYPES.MASSAGE
		},
		playmateTabList() {
			return this.playmateTabs.map(item => ({
				name: item.name
			}))
		},
		activeSubTabIndex() {
			return this.playmateTabs.findIndex(item => item.id === this.activeSubTab)
		},
		filteredList() {
			if (this.isMassage) {
				return this.serviceList.filter(item => item.mainType === MAIN_TYPES.MASSAGE)
			}
			return this.serviceList.filter(
				item => item.mainType === MAIN_TYPES.PLAYMATE && item.categoryId === this.activeSubTab
			)
		},
	},
	onLoad(query) {
		this.getNotApplyListFun()
		const type = query.type || query.mainType || MAIN_TYPES.MASSAGE
		this.mainType = type === MAIN_TYPES.PLAYMATE ? MAIN_TYPES.PLAYMATE : MAIN_TYPES.MASSAGE
		if (query.tab && this.isPlaymate) {
			const matched = this.playmateTabs.find(item => item.id === query.tab)
			if (matched) this.activeSubTab = matched.id
		}
	},
	methods: {
		getNotApplyListFun() {
			getNotApplyList({
				merchantId: uni.getStorageSync('merchantId'),
				serviceTag: uni.getStorageSync('serviceTag'),
			}).then(res => {
				if (res.data.code == 200) {
					this.serviceList = res.data.data || []
				}
			})
		},
		formatAvailablePrice,
		onSubTabChange(e) {
			const index = typeof e === 'object' ? e.index : e
			this.activeSubTab = this.playmateTabs[index]?.id || this.playmateTabs[0].id
		},
		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
		},
		closeApplyModal() {
			this.showApplyModal = false
			this.selectedIds = []
		},
		submitApply() {
			if (!this.applyReason.trim()) {
				uni.showToast({
					title: '请输入开通原因',
					icon: 'none'
				})
				return
			}
			let params = {
				merchantId: uni.getStorageSync('merchantId'),
				merchantPhone: uni.getStorageSync('phone'),
				applyReason: this.applyReason,
				projectIdList: this.selectedIds,
			}
			applyForService(params).then(res => {
				if (res.data.code == 200) {
					this.showApplyModal = false
					this.selectedIds = []
					uni.showToast({
						title: res.data.msg || '申请成功',
						icon: 'none'
					})
					setTimeout(() => uni.navigateBack(), 800)
				}else{
					uni.showToast({
						title: res.data.msg || '申请失败',
						icon: 'none'
					})
				}
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.add-page {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
	box-sizing: border-box;
}

.sub-tabs-wrap {
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
}

.service-list {
	padding: 24rpx;
}

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

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

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

.info {
	flex: 1;
	margin: 0 20rpx;
	overflow: hidden;
	min-width: 0;
}

.title {
	display: block;
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

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

.select-icon {
	flex-shrink: 0;
	width: 44rpx;
	height: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.checked-icon {
	width: 44rpx;
	height: 44rpx;
}

.unchecked-icon {
	width: 40rpx;
	height: 40rpx;
	border: 2rpx solid #d9d9d9;
	border-radius: 50%;
	box-sizing: border-box;
}

.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;
	z-index: 10;
}

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

.apply-btn {
	min-width: 240rpx;
	padding: 22rpx 48rpx;
	background: #333;
	color: #fff;
	font-size: 28rpx;
	border-radius: 44rpx;
	text-align: center;
	line-height: 1;
}

.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;

}

.box {
	padding: 32rpx 48rpx;
}

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

.apply-tip {
	margin-top: 32rpx;
	font-weight: 400;
	font-size: 30rpx;
	color: #1D2129;
	text-align: left;
}

.apply-reason {
	width: 100%;
	height: 124rpx;
	padding: 8rpx;
	display: block;
	background: #F7F8FA;
	border-radius: 6rpx 6rpx 6rpx 6rpx;
	box-sizing: border-box;
	margin-top: 8rpx;

	font-weight: 400;
	font-size: 26rpx;
	color: #4E5969;
}

.apply-btns {
	display: flex;
	border-top: 1rpx solid #E7E7E7;
}

.btn {
	padding: 20rpx;
	height: 90rpx;
	font-size: 28rpx;
	border-radius: 8rpx;
	text-align: center;
	font-weight: 400;
	font-size: 30rpx;
	color: #86909C;
	text-align: center;



	&.primary {
		border-left: 1rpx solid #E7E7E7;
		font-weight: 400;
		font-size: 30rpx;
		color: #1D2129;
	}

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