<template>
	<view class="container">
		<view class="card">
			<text class="section-title">供需类型</text>
			<view class="type-selector">
				<view :class="['type-button', form.type === 'supply' ? 'active' : '']" @click="form.type = 'supply'">
					<u-icon name="server-fill" :color="form.type === 'supply' ? '#C9A36D' : '#909399'"></u-icon>
					<text class="type-text">供应</text>
				</view>
				<view :class="['type-button', form.type === 'demand' ? 'active' : '']" @click="form.type = 'demand'">
					<u-icon name="order" :color="form.type === 'demand' ? '#C9A36D' : '#909399'"></u-icon>
					<text class="type-text">需求</text>
				</view>
			</view>
		</view>

		<view class="card">
			<text class="section-title">基本信息</text>
			<u-form :model="form" ref="uForm">
				<u-form-item label="标题" label-width="150" prop="title" :border-bottom="false">
					<u-input v-model="form.title" placeholder="请输入标题, 简明扼要" :maxlength="50" type="text"
						:custom-style="inputStyle('title')" @focus="activeInput = 'title'" @blur="activeInput = null" />
				</u-form-item>
				<u-form-item label="详细描述" label-width="150" prop="description" :border-bottom="false">
					<u-input v-model="form.description" type="textarea" placeholder="请详细描述您的供需内容..." :maxlength="500" height="200"
						:custom-style="inputStyle('description')" @focus="activeInput = 'description'" @blur="activeInput = null" />
				</u-form-item>
				<u-form-item label="行业标签" label-width="150" prop="tags" :border-bottom="false">
					<u-input v-model="tagInput" type="text" placeholder="输入后按回车键确认"
						:custom-style="inputStyle('tags')" @focus="activeInput = 'tags'" @blur="activeInput = null" @confirm="addTag" />
				</u-form-item>
				<view class="tag-container" v-if="form.tags.length > 0">
					<view v-for="(tag, index) in form.tags" :key="index" class="tag-item">
						<text>{{ tag }}</text>
						<u-icon name="close" size="20" @click="removeTag(index)"></u-icon>
					</view>
				</view>
				<view class="form-tip">建议添加相关行业标签, 方便其他校友找到你</view>
			</u-form>
		</view>
		
		<view class="card">
			<text class="section-title">联系方式 *</text>
			<view class="contact-selector">
				<view :class="['contact-button', form.contactType === 'wechat' ? 'active' : '']" @click="form.contactType = 'wechat'">
					<u-icon name="chat-fill" :color="form.contactType === 'wechat' ? '#C9A36D' : '#909399'"></u-icon>
					<text class="contact-text">微信</text>
				</view>
				<view :class="['contact-button', form.contactType === 'phone' ? 'active' : '']" @click="form.contactType = 'phone'">
					<u-icon name="phone-fill" :color="form.contactType === 'phone' ? '#C9A36D' : '#909399'"></u-icon>
					<text class="contact-text">电话</text>
				</view>
				<view :class="['contact-button', form.contactType === 'email' ? 'active' : '']" @click="form.contactType = 'email'">
					<u-icon name="email-fill" :color="form.contactType === 'email' ? '#C9A36D' : '#909399'"></u-icon>
					<text class="contact-text">邮箱</text>
				</view>
			</view>
			<u-input v-model="form.contactValue" :placeholder="contactPlaceholder"
				:custom-style="inputStyle('contact')" @focus="activeInput = 'contact'" @blur="activeInput = null" />
			<text class="privacy-notice">隐私保护: 您的联系方式仅对感兴趣的校友可见, 平台内置防骚扰机制, 保护您的隐私安全。</text>
		</view>

		<view class="footer-button">
			<u-button type="primary" shape="circle" @click="submit">{{ form.type === 'supply' ? '发布供应' : '发布需求' }}</u-button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeInput: null,
				tagInput: '',
				form: {
					type: 'supply', // supply or demand
					title: '',
					description: '',
					tags: [],
					contactType: 'wechat', // wechat, phone, email
					contactValue: '',
				},
			};
		},
		computed:{
			contactPlaceholder(){
				const placeholders = {
					wechat: '输入微信号',
					phone: '输入电话号码',
					email: '输入邮箱地址'
				}
				return placeholders[this.form.contactType]
			}
		},
		methods: {
			inputStyle(name) {
				const style = {
					backgroundColor: '#f7f8fa',
					borderRadius: '16rpx',
					padding: '18rpx 25rpx',
					border: '1px solid #f7f8fa',
					transition: 'border-color 0.2s ease',
				};
				if (this.activeInput === name) {
					style.borderColor = '#D4C3AB';
				}
				return style;
			},
			addTag() {
				if (this.tagInput && !this.form.tags.includes(this.tagInput)) {
					this.form.tags.push(this.tagInput);
					this.tagInput = '';
				}
			},
			removeTag(index) {
				this.form.tags.splice(index, 1);
			},
			submit() {
				// 提交逻辑
				console.log(this.form)
				uni.showToast({
					title: '发布成功',
					icon: 'success'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(to bottom, #e9f2fa, #f5f7fa);
		padding: 30rpx 20rpx 140rpx 20rpx;
		box-sizing: border-box;
	}

	.card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 30rpx;
	}

	.type-selector, .contact-selector {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}
	
	.type-button {
		width: 48%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f5f5f5;
		border-radius: 12rpx;
		padding: 20rpx 0;
		transition: all 0.3s;
		&.active {
			background-color: #fdf3e8;
			border: 1rpx solid #e8d1b5;
			.type-text {
				color: #C9A36D;
			}
		}
	}
	
	.contact-button {
		width: 31%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f5f5f5;
		border-radius: 12rpx;
		padding: 20rpx 0;
		transition: all 0.3s;
		&.active {
			background-color: #fdf3e8;
			border: 1rpx solid #e8d1b5;
			.contact-text {
				color: #C9A36D;
			}
		}
	}

	.type-text, .contact-text {
		font-size: 28rpx;
		margin-left: 10rpx;
		color: #606266;
	}
	
	.form-tip {
		font-size: 24rpx;
		color: #909399;
		margin-top: 10rpx;
		padding-left: 150rpx;
	}
	
	.tag-container {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		padding-left: 150rpx;
	}

	.tag-item {
		background-color: #f5f5f5;
		color: #606266;
		padding: 10rpx 20rpx;
		border-radius: 12rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		display: flex;
		align-items: center;

		text {
			margin-right: 10rpx;
		}
	}
	
	.privacy-notice {
		display: block;
		font-size: 24rpx;
		color: #909399;
		margin-top: 30rpx;
		line-height: 1.6;
	}

	.footer-button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 40rpx;
		background-color: #fff;
		box-sizing: border-box;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
	}

	// --- Custom Input Styles ---
	::v-deep .u-form-item .u-line {
		display: none;
	}

	::v-deep .u-input__body {
		background-color: #f7f8fa !important;
		border-radius: 16rpx !important;
		padding: 18rpx 25rpx !important;
		border: 1px solid #f7f8fa !important;
		transition: border-color 0.2s ease;
	}

	::v-deep .u-input--focus .u-input__body {
		border-color: #D4C3AB !important;
	}

</style>