<!-- +----------------------------------------------------------------------
| 麦沃德科技赋能开发者，助力商协会发展
+----------------------------------------------------------------------
| Copyright (c) 2017～2024  www.wdsxh.cn    All rights reserved.
+----------------------------------------------------------------------
| 沃德商协会系统并不是自由软件，不加密，并不代表开源，未经许可不可自由转售和商用
+----------------------------------------------------------------------
| Author: MY WORLD Team <bd@maiwd.cn>   www.maiwd.cn
+----------------------------------------------------------------------
| 需求建议 开发者: 麦沃德科技-半夏
+---------------------------------------------------------------------- -->

<template>
	<view class="container" :style="{'--theme-color': themeColor}">
		<!-- 标题栏 -->
		<title-bar :showBack="true" title="需求建议"></title-bar>
		<!-- 内容区 -->
		<view class="container-main">
			<!-- 表单 -->
			<view class="main-form">
				<view class="form-item">
					<view class="item-title">标题</view>
					<view class="item-input">
						<input class="input" v-model="formData.title" type="text" placeholder="请输入需求建议标题" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="form-item">
					<view class="item-title">内容</view>
					<view class="item-input">
						<textarea class="textarea" v-model="formData.content" placeholder="请输入需求建议内容" placeholder-class="placeholder" />
					</view>
				</view>
				<view class="form-item">
					<view class="item-title">图片</view>
					<view class="item-upload">
						<view class="upload-image" @click="previewImage()" v-if="selectImage">
							<image class="image-select" :src="selectImage" mode="aspectFill"></image>
							<image class="image-delete" src="/static/delete.png" mode="aspectFit" @click.stop="deleteImage()"></image>
						</view>
						<view class="upload-image" @click="chooseImage()" v-else>
							<view class="image-background"></view>
							<view class="image-choose">
								<view class="icon">
									<image src="/static/camera.png" mode="aspectFit"></image>
								</view>
								<view class="text">上传图片</view>
							</view>
						</view>
					</view>
				</view>
				<view class="form-item flex align-items-center" style="margin-top: 40rpx;">
					<view class="item-radio" :class="{active: formData.is_anonymity == 1}" @click="changeAnonymity()">
						<image class="radio-icon" src="/static/tick.png" mode="aspectFill"></image>
					</view>
					<view class="item-label" @click="changeAnonymity()">是否匿名提交</view>
					<view class="item-tips flex-item flex align-items-center">
						<image class="tips-icon" src="/static/warning.png" mode="aspectFill" @click="isShowTips = !isShowTips"></image>
						<view class="tips-prompt flex flex-center" v-if="isShowTips">
							<view class="prompt-triangle"></view>
							<text class="prompt-text">不使用真实姓名进行提交</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 提交按钮 -->
			<view class="main-footer">
				<view class="footer-btn" @click="handleSubmit()">提交</view>
				<view class="safe-padding"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data() {
			return {
				// 表单内容
				formData: {
					title: '',
					content: '',
					image: '',
					is_anonymity: '',
				},
				// 已选择图片
				selectImage: "",
				// 是否显示匿名提示
				isShowTips: false,
			};
		},
		computed: {
			...mapState({
				themeColor: state => state.app.themeColor,
			})
		},
		methods: {
			// 选择图片
			chooseImage() {
				// #ifdef MP-WEIXIN
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					sizeType: ['compressed'],
					success: (res) => {
						this.selectImage = res.tempFiles[0].tempFilePath
					}
				})
				// #endif
				// #ifndef MP-WEIXIN
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					sizeType: ['compressed'],
					success: (res) => {
						this.selectImage = res.tempFilePaths[0]
					}
				});
				// #endif
			},
			// 删除图片 
			deleteImage() {
				this.selectImage = ""
			},
			// 预览图片
			previewImage() {
				uni.previewImage({
					urls: this.selectImage,
					current: 0,
				})
			},
			// 修改匿名状态
			changeAnonymity() {
				if (this.formData.is_anonymity == 1) {
					this.formData.is_anonymity = 2
				} else {
					this.formData.is_anonymity = 1
				}
			},
			// 提交反馈
			handleSubmit() {
				if (!this.formData.title) {
					uni.showToast({
						title: "请输入需求建议标题",
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.formData.content) {
					uni.showToast({
						title: "请输入需求建议内容",
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.selectImage) {
					uni.showLoading({
						title: "提交中",
						mask: true
					})
					this.$util.uploadFile(this.selectImage).then(result => {
						if (result.code == 1) {
							this.formData.image = result.data.fullurl
							this.submitEvent()
						} else {
							uni.hideLoading()
							uni.showToast({
								title: result?.msg || "上传失败",
								icon: 'none',
								duration: 2000
							})
						}
					}).catch(error => {
						uni.hideLoading()
						console.error('上传图片 ', error)
					})
				} else {
					uni.showLoading({
						title: "提交中",
						mask: true
					})
					this.submitEvent()
				}
			},
			// 提交事件 
			submitEvent() {
				this.$util.request("main.addDemand", this.formData).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						uni.redirectTo({
							url: "/pagesTools/suggest/success"
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				}).catch(error => {
					uni.hideLoading()
					console.error('提交反馈', error)
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		.container-main {
			padding-bottom: 112rpx;

			.main-form {
				padding: 32rpx 48rpx;

				.form-item {
					margin-top: 32rpx;

					&:first-child {
						margin-top: 0;
					}

					.item-title {
						color: #5A5B6E;
						font-size: 32rpx;
						font-weight: 600;
						line-height: 44rpx;
					}

					.item-input {
						margin-top: 32rpx;
						display: flex;
						align-items: center;
						border-radius: 16rpx;
						background: #ffffff;

						.input {
							color: #5A5B6E;
							font-size: 28rpx;
							height: 112rpx;
							line-height: 112rpx;
							flex: 1;
							padding: 0 32rpx;
						}

						.textarea {
							color: #5A5B6E;
							font-size: 28rpx;
							line-height: 40rpx;
							flex: 1;
							padding: 36rpx 32rpx;
							width: 100%;
							height: 240rpx;
						}

						.placeholder {
							color: #ACADB7;
						}
					}

					.item-upload {
						display: flex;
						flex-wrap: wrap;
						margin-top: 32rpx;
						column-gap: 3.5%;
						row-gap: 24rpx;

						.upload-image {
							position: relative;
							width: 31%;
							height: 0;
							padding-top: 31%;

							.image-select {
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								border-radius: 10rpx;
							}

							.image-video {
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								border-radius: 10rpx;
								background: var(--theme-color);
								padding: 56rpx;
							}

							.image-delete {
								position: absolute;
								top: -16rpx;
								right: -16rpx;
								width: 48rpx;
								height: 48rpx;
							}

							.image-choose {
								position: absolute;
								top: 20rpx;
								left: 20rpx;
								right: 20rpx;
								bottom: 20rpx;
								z-index: 6;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								background: #ffffff;
								border-radius: 10rpx;

								.icon {
									width: 80rpx;
									height: 80rpx;
									padding: 18rpx;
									background: var(--theme-color);
									border-radius: 50%;
								}

								.text {
									margin-top: 16rpx;
									color: var(--theme-color);
									font-size: 28rpx;
									line-height: 40rpx;
								}
							}

							.image-background {
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								z-index: 1;
								background: var(--theme-color);
								opacity: 0.08;
							}
						}
					}

					.item-radio {
						width: 32rpx;
						height: 32rpx;
						background: #D6DBDE;
						border-radius: 50%;

						.radio-icon {
							width: 100%;
							height: 100%;
							display: none;
						}

						&.active {
							background: var(--theme-color);

							.radio-icon {
								display: block;
							}
						}
					}

					.item-label {
						padding-left: 16rpx;
						color: #5A5B6E;
						font-size: 28rpx;
						line-height: 40rpx;
					}

					.item-tips {
						position: relative;
						margin-left: 16rpx;

						.tips-icon {
							width: 32rpx;
							height: 32rpx;
						}

						.tips-prompt {
							position: absolute;
							left: 56rpx;
							top: 50%;
							transform: translateY(-50%);
							display: flex;
							align-items: center;

							.prompt-triangle {
								width: 0;
								height: 0;
								margin-right: -2rpx;
								border-top: 12rpx solid transparent;
								border-bottom: 12rpx solid transparent;
								border-right: 16rpx solid #333;
							}

							.prompt-text {
								color: #FFF;
								font-size: 24rpx;
								line-height: 34rpx;
								padding: 12rpx 16rpx;
								background: #333;
								border-radius: 10rpx;
							}
						}
					}
				}
			}

			.main-footer {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 99;
				padding: 12rpx 32rpx;
				background: #ffffff;
				border-top: 1rpx solid #F6F7FB;

				.footer-btn {
					color: #ffffff;
					font-size: 32rpx;
					line-height: 44rpx;
					padding: 22rpx 24rpx;
					border-radius: 16rpx;
					background: var(--theme-color);
					text-align: center;
				}
			}
		}
	}
</style>