<template>
	<view class='container'>
		<view style="color: white;font-size: 32rpx;">举报描述</view>
		<view class="wapper mt-30 pad-20 br-20" style="background: rgba(255,255,255,0.04);">
			<view class="h-700">
				<textarea style="color: white; width: 100%;" placeholder-style="color:#878787" placeholder="请输入您的描述内容…"
					v-model="reason" maxlength="150"></textarea>
			</view>

			<view class="mt-30 ">
				<view class="control">
					<upload-image @upload="upload" v-model="imgurl" maxCount="3" width="100" height="100"
						type="fullurl"></upload-image>
				</view>
			</view>
		</view>

		<view @click="onSubmit" class="btn">
			<text>提交</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reason: '',
				submitShow: false,
				imgurl: "", // 初始值为空字符串
			};
		},
		methods: {
			onSubmit() {
				console.log(this.imgurl, "imgurl"); // 确认 imgurl 的值
				if (!this.reason) {
					return this.$u.toast('请输入内容');
				}
				if (!this.imgurl) {
					return this.$u.toast('请至少上传一张照片');
				}
				if (this.reason.length < 10) {
					return this.$u.toast('文字描述最低10个字');
				}
				const params = {
					content: this.reason,
					picture: this.imgurl
				}
				this.$api.getDiscoverReport(params).then(res => {
					if (res.code == 200) {
						this.$u.toast(res.msg || '修改成功')
						this.$wskj.goBack(1);
					}
				});
			},
			upload(e) {
				this.imgurl = e
			}
		},
	};
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		padding: 30rpx;
		background: #0F0F0F;
	}

	.control {
		margin: 20rpx;
	}

	.btn {
		width: 94%;
		height: 96rpx;
		text-align: center;
		line-height: 96rpx;
		position: absolute;
		bottom: 100rpx;
		left: 50%;
		margin-left: -47%;
		background-color: #FE42C2;
		color: white;
		font-size: 32rpx;
		border-radius: 50rpx;
	}
</style>