<template>
	<view class="edit-page">
		<!-- 项目摘要 -->
		<view class="summary">
			<view class="cover">
				<image v-if="detail.cover" :src="detail.cover" mode="aspectFill" />
			</view>
			<view class="summary-info">
				<text class="title">{{ detail.title }}</text>
				<text class="billing">{{ detail.billingType }}</text>
			</view>
		</view>
		<!-- 表单区域 -->
		<view class="form-section">
			<view class="form-row">
				<text class="label">服务分类</text>
				<text class="value">{{ detail.categoryName }}</text>
				<!-- <image class="chevron" src="@/static/workbench/right.png" mode=""></image> -->
			</view>
			<view class="form-row">
				<text class="label">价格</text>
				<text class="value">{{ platformPriceText }}</text>
				<!-- <image class="chevron" src="@/static/workbench/right.png" mode=""></image> -->
			</view>
			<view class="form-row">
				<text class="label">价格区间</text>
				<text class="value">{{ priceRangeText }}</text>
			</view>
			<view class="price-block">
				<view class="form-row no-border">
					<text class="label">我的售价</text>
					<input class="price-input" v-model="myPrice" type="digit" placeholder="请输入"
						placeholder-class="placeholder" />
				</view>
				<text class="price-tip">
					设置您的服务价格，请参照价格区间的最高价和最低价，不允许高于最高价或者低于最低价
				</text>
			</view>
		</view>
		<view class="footer-bar">
			<view class="submit-btn" @click="onSubmit">提交</view>
		</view>
	</view>
</template>
<script>
import { updateMaProject } from '@/api/workbench.js'
export default {
	data() {
		return {
			detail: {
				id: '',
				title: '',
				cover: '',
				categoryName: '',
				billingType: '',
				platformPrice: '',
				priceRangeMin: '',
				priceRangeMax: '',
			},
			myPrice: '',
		}
	},
	computed: {
		platformPriceText() {
			const price = Number(this.detail.platformPrice)
			if (isNaN(price)) return '-'
			return `¥ ${price.toFixed(2)}`
		},
		priceRangeText() {
			const {
				priceRangeMin,
				priceRangeMax
			} = this.detail
			if (priceRangeMin != null && priceRangeMax != null) {
				const max = Number(priceRangeMax).toFixed(2)
				const min = Number(priceRangeMin).toFixed(2)
				return `¥ ${max} 至 ${min}`
			}
			return '-'
		},
	},
	onLoad(query) {
		this.detail = {
			id: Number(query.id) || '',
			title: query.title || '中式推拿-培元疏通',
			cover: decodeURIComponent(query.cover) || '',
			categoryName: query.categoryName || '上门按摩',
			billingType: query.billingType || '按分钟计费',
			platformPrice: query.platformPrice || '368.00',
			priceRangeMin: Number(query.priceRangeMin) || 288,
			priceRangeMax: Number(query.priceRangeMax) || 368,
		}
		this.myPrice = query.myPrice || ''
	},
	methods: {
		validatePrice() {
			const val = Number(this.myPrice)
			if (isNaN(val)) return false
			return val >= this.detail.priceRangeMin && val <= this.detail.priceRangeMax
		},
		onSubmit() {
			if (!this.myPrice) {
				uni.showToast({
					title: '请输入售价',
					icon: 'none'
				})
				return
			}
			if (!this.validatePrice()) {
				uni.showToast({
					title: `价格需在${this.detail.priceRangeMin}-${this.detail.priceRangeMax}之间`,
					icon: 'none',
				})
				return
			}
			updateMaProject({
				projectId: this.detail.id || '',
				projectCurrentPrice: this.myPrice,
			}).then(res => {
				if (res.data.code == 200) {
					uni.showToast({ title: res.data.msg || '修改完成', icon: 'none' })
					setTimeout(() => uni.navigateBack(), 1000)
				} else {
					uni.showToast({ title: res.data.msg || '修改失败', icon: 'none' })
				}
			})
			
		},
	},
}
</script>
<style lang="scss" scoped>
.edit-page {
	min-height: 100vh;
	background: #f5f5f5;
	padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
	box-sizing: border-box;
}

.summary {
	display: flex;
	align-items: center;
	background: #fff;
	padding: 32rpx;
	margin-bottom: 16rpx;
}

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

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

.summary-info {
	flex: 1;
	margin-left: 24rpx;
	min-width: 0;
}

.title {
	display: block;
	font-size: 30rpx;
	color: #333;
	font-weight: 500;
	line-height: 1.5;
	margin-bottom: 8rpx;
}

.billing {
	font-size: 24rpx;
	color: #999;
}

.form-section {
	background: #fff;
}

.form-row {
	display: flex;
	align-items: center;
	padding: 28rpx 32rpx;
	border-bottom: 1rpx solid #f5f5f5;

	&.no-border {
		border-bottom: none;
		padding-bottom: 16rpx;
	}
}

.label {
	width: 160rpx;
	flex-shrink: 0;
	font-size: 30rpx;
	color: #333;
}

.value {
	flex: 1;
	text-align: right;
	font-size: 28rpx;
	color: #333;
}

.chevron {
	width: 25rpx;
	height: 25rpx;
}

.price-block {
	border-top: 1rpx solid #f5f5f5;
}

.price-input {
	flex: 1;
	text-align: right;
	font-size: 28rpx;
	color: #333;
	height: 44rpx;
	line-height: 44rpx;
}

.placeholder {
	color: #ccc;
	font-size: 28rpx;
}

.price-tip {
	display: block;
	padding: 0 32rpx 28rpx;
	font-size: 24rpx;
	color: #999;
	line-height: 1.6;
}

.footer-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20rpx 32rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
}

.submit-btn {
	margin: 0 auto;
	width: 654rpx;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	font-weight: 500;
	font-size: 32rpx;
	color: #FFFFFF;
	background: #333335;
	border-radius: 60rpx 60rpx 60rpx 60rpx;
}
</style>