<template>
	<view class="content">
		<view class="container">
			<!-- #ifdef MP-WEIXIN -->
			<headers :titles="titles"><uni-icons @click="goback()" type="arrow-left" color="#000000"
					size="22px"></uni-icons></headers>
				<!-- #endif -->
			<u-loadmore :status="status" v-if="show == true" />
		</view>
		<view
			style="width: 100%; display: flex; align-items: center; justify-content: space-around; margin: 15px auto;  ">
			<view class="canniu" :class="{ 'act' : evaluateType ==0  }" @click="getEvaluateType(0)">训练评价</view>
			<view class="canniu" :class="{ 'act' : evaluateType ==1  }" @click="getEvaluateType(1)">拿证后评价</view>
		</view>
		<view class="feedback">
			<view class="feedback-title">请输入驾校问题描述或者建议</view>
			<u--textarea v-model="content" placeholder="请详细描述你遇到的问题或对我们的建议"></u--textarea>

		</view>
		<view class="feedback">
			<view class="feedback-title">请输入教练问题描述或者建议</view>
			<u--textarea v-model="jlContent" placeholder="请详细描述你遇到的问题或对我们的建议"></u--textarea>

		</view>

		<view
			style=" width: 100%; display: flex; align-items: center; justify-content: space-around; margin: 15px auto;">
			<view class="canniu" :class="{ 'act' : likes ==1  }" @click="getLike (1)">一般</view>
			<view class="canniu" :class="{ 'act' : likes ==2  }" @click="getLike (2)">满意</view>
			<view class="canniu" :class="{ 'act' : likes ==3  }" @click="getLike (3)">不满意</view>
		</view>


		<view class="bm-page-button">
			<button @click="applicationClick" class="bm-page-button-main">提交</button>
		</view>

	</view>
</template>

<script>
	import headers from '../../components/header/headers.vue'
	import tabbar from '../../components/tabbar/tabbar.vue'
	import request from '@/utils/request.js'
	export default {
		data() {
			return {
				titles: "意见反馈",
				msg: "1",
				List: [],

				show: false,
				status: 'loading',
				content: null,
				evaluateType: 0,
				likes: 1,
			}
		},
		onShow() {
			// this.actList = ["1", "1", "1", "1", "1", ]
			// this.status = "nomore" 底部刷新结束
		},
		onPullDownRefresh() {
			console.log("刷新");
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// this.show = true
			setTimeout(() => {
				console.log("加载执行");
			}, 2000)
		},
		// 发送好友
		onShareAppMessage(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		// 分享朋友圈
		onShareTimeline(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		components: {
			headers,
			tabbar
		},
		methods: {
			getEvaluateType(num) {

				this.evaluateType = num
			},
			getLike(num) {
				this.likes = num
			},
			goback() {
				uni.navigateBack()
			},
			async applicationClick() {
				console.log("问题是======>>>", this.content)
				if (this.content === null || this.content === '') {
					uni.showToast({
						title: '请输入意见反馈',
						icon: 'error',
						duration: 2000
					})
				} else {
					// /system/feedback/insertData/${countent}
					let item = await request({
						url: '/system/feedback',
						method: 'post',
						data: {
							content: this.content,
							jlContent: this.jlContent,
							evaluateType: this.evaluateType,
							likes: this.likes
						}
					})
					uni.showToast({
						title: '意见反馈成功',
						icon: 'success',
						duration: 2000
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 2000);

				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.feedback-title {
		font-weight: bold;
		margin-bottom: 15px;
	}

	.feedback {
		padding: 20rpx;

		.feedback-input {
			padding: 10rpx 0;
		}
	}

	.bm-page-button {
		margin-top: 190rpx;
		padding: 0 20rpx;

		.bm-page-button-main {
			border-radius: 50rpx;
			background-color: #4aa76f;
			color: #fff;
		}
	}

	.content {
		background: #fff;
		height: 100vh;
	}

	.container {
		width: 100%;
		background: #fff;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.canniu {
		border: 1px solid #e3e3e3;
		box-sizing: border-box;
		padding: 5px 10px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #cccccc;
	}

	.act {
		background: #4aa76f !important;
		color: #fff !important;
	}
</style>