<template>
	<view class="container">
		<!-- 引入头部组件 -->
		<Header :title="'求助'"></Header>
		<view class="content">
			<view class="content_wapper">
				<!-- 添加标题 -->
				<view class="input-section" >
					<u-input placeholder="添加标题" v-model="title" border></u-input>
				</view>
				
				<!-- 输入求助内容 -->
				<view class="textarea-section">
					<u--textarea placeholder="请输入求助内容..." 
					v-model="content"
					border
					height="300"
					></u--textarea>
				</view>
				
				<!-- 图片上传 -->
				<view class="upload-section">
					<u-upload @afterRead="afterRead"
					          :fileList="fileList"
							   :maxCount="1" 
							   :showUploadList="false"
							    width="550"
							    height="450"
							    >
						<view class="upload-btn">
							<u-icon name="plus" size="40" color="#666"></u-icon>
						</view>
					</u-upload>
				</view>
				
				<!-- 发布按钮 -->
				<view class="publish-section">
					<u-button type="primary" text="立即发布" @click="publish"></u-button>
				</view>
			</view>
			
		</view>
		<Footer></Footer>
	</view>

</template>

<script>
	import Header from '@/components/header_common.vue';
	import Footer from '@/components/footer_common.vue';
	export default {
		components: {
			Header,Footer
		},
		data() {
			return {
				title: '',
				content: '',
				fileList: []
			};
		},
		methods: {
			handleBack() {
				uni.navigateBack({
					delta: 1 // 返回上一级页面
				});
			},
			afterRead(event) {
				// 读取完成后的回调函数
				const {
					file
				} = event;
				this.fileList.push(file);
			},
			publish() {
				// 发布逻辑
				console.log('发布:', this.title, this.content, this.fileList);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {

		width: 100%;
		height: 100vh;
		/* 占满整个视口高度 */
		opacity: 1;
		background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 250, 250, 0) 100%),
			linear-gradient(0deg, rgba(255, 241, 235, 1) 0%, rgba(192, 219, 250, 1) 100%);
		position: relative; 

		.content {
			width: 100%;
			position: absolute;
			margin-top: 300rpx;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			background-color: rgba(255, 255, 255, 0.65);
			padding-bottom: 60rpx;
			
			.content_wapper{
				width: 90%;
				margin: 0 auto;
			}
	
		}
		
		.input-section{
			border-bottom: 2rpx solid #C3DCFA;
			height: 90rpx;
			line-height: 90rpx;
		}

		.input-section,
		.textarea-section,
		.upload-section {
			margin-bottom: 30rpx;
		}

		.upload-btn {
			width: 220rpx;
			height: 220rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #f0f0f0;
			border-radius: 10rpx;
		}

		.publish-section {
			text-align: center;
			margin-top: 100rpx;
		}

	}
</style>