<template>
	<view style="background-color: #F5F5F5; min-height: 100vh; height: 100%;">

		<view class="title_bg" :style="'padding-top:' + (common.statusBarH + 10)+ 'px; '">

			<image style="width: 40rpx; height: 40rpx;" src='../../static/common/icon_back.png' @click="onBack()">
			</image>

			<text style="color: white; font-size: 36rpx; font-weight: 700;">提建议</text>

			<text style="color: white; font-size: 32rpx;" v-on:click="commit()">提交</text>

		</view>

		<view :style="'height: ' + titleHeight + 'px'"></view>

		<view class="input-c">
			<textarea class="suggest-input" maxlength="-1" focus placeholder="请具体描述你的问题或建议(至少15字)"
				placeholder-style="color:#999999" v-model="suggest_content" />
		</view>

		<view style="margin-top: 48rpx; margin-left: 22rpx;">
			<text style="color: #999999; font-size: 28rpx;">我的建议</text>
		</view>

		<view v-for="(item, index) in suggestData" class="suggest-item">
			<view v-for="(content, index) in item.Data">
				<view v-if="!content.IsReply" class="suggest-content-text">
					<text>{{content.Content}}</text>
				</view>
				<view v-else class="suggest-repet-content-text">
					<text>{{content.Content}}</text>
					<text>{{"回复时间：" + content.InitTime}}</text>
				</view>

			</view>

		</view>

	</view>
</template>

<script>
	import common from '@/utils/common.js'
	import http from "@/utils/http";

	export default {
		data() {
			return {
				titleHeight: 80,
				common,
				suggestData: [],
				suggest_content: ""
			}
		},
		async onLoad() {
			let query_data = `query{
					 		getMySuggest(pageSize:30,pageIndex:1,typeId:-1,orderExp:"Id desc",time:"Month|3")
					 	}`;
			console.log(query_data)
			let result = await http.gql({
				query: query_data
			})

			//处理返回请求
			if (result && result.data && result.data.getMySuggest &&
				result.data.getMySuggest.Result &&
				!result.data.getMySuggest.error) {
				var array = result.data.getMySuggest.Result.Rows
				for (var i = 0; i < array.length; i++) {
					this.getMySuggestById(array[i].Id)
				}
			}
		},
		onReady() {
			var this_ = this
			uni.createSelectorQuery()
				.in(this)
				.select('.title_bg')
				.boundingClientRect((rect) => {
					if (rect) {
						this_.titleHeight = rect.height
					}
				})
				.exec();
		},
		onShow() {
			
		},
		methods: {
			onBack() {
				uni.navigateBack()
			},
			async getMySuggestById(id) {
				let query_data = `query{
						 		getSuggestById(id:${id})
						 	}`;
				console.log(query_data)
				let result = await http.gql({
					query: query_data
				})

				//处理返回请求
				if (result && result.data && result.data.getSuggestById &&
					result.data.getSuggestById.Result &&
					!result.data.getSuggestById.error) {

					var bean = JSON.parse(result.data.getSuggestById.Result)
					this.suggestData.push(bean)
				}

			},
			async commit() {
				console.log("commit")
				if (this.suggest_content.length < 5) {
					uni.showToast({
						icon: "none",
						title: "最短为 5 个字符",
					});
					return;
				}
				let query_data = `mutation{
					 		user_suggest_info(content:${JSON.stringify(this.suggest_content)})
					 	}`;
				console.log(query_data)
				let result = await http.gql({
					query: query_data
				})

				console.info(result);
				//处理返回请求
				if (result && result.data && result.data.user_suggest_info &&
					!result.data.user_suggest_info.error) {
					uni.showToast({
						icon: "none",
						title: "提交成功",
					});
					uni.navigateBack()
				} else {
					uni.showToast({
						icon: "none",
						title: "提交失败",
					});
				}

			}
		}
	}
</script>

<style>
	.title_bg {
		background: linear-gradient(90deg, #FF6F38 0%, #FFA04B 100%);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-bottom: 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.input-c {
		min-height: 300rpx;
		background-color: white;
		padding: 20rpx;
	}

	.suggest-input {
		color: #616161;
		font-size: 28rpx;
		width: 100%;
	}

	.suggest-item {
		padding: 15rpx;
		background-color: white;
		margin-top: 30rpx;
	}

	.suggest-content-text {
		font-size: 28rpx;
		color: #333333;
		margin-top: 30rpx;
		margin-left: 22rpx;
		margin-right: 22rpx;
		margin-bottom: 30rpx;
	}

	.suggest-repet-content-text {
		font-size: 24rpx;
		color: #999999;
		margin-top: 26rpx;
		margin-left: 22rpx;
		margin-right: 22rpx;
		margin-bottom: 26rpx;
		display: flex;
		flex-direction: column;
	}
</style>