<template>
	<view class="wrap_box">
		<!-- <uParse v-if="datas" :content="datas"></uParse> -->
		<view class="tel_index_bg"></view>
		<view class="bz_box">
			<view class="pf_tip">
				<view v-html="tips"></view>
			</view>
			<view class="pj_box">
				<view class="pj_tit">
					请为{{options.title}}打分：
				</view>
				<view class="pj_star dis_flex aic">
					<view class="flex_1 dis_flex aic">
						<text class="icon icon-star" :class="active>index?'active':''" v-for="(item,index) in 10" @click="set_star(index,1)"></text>
					</view>
					<view class="star_text">
						<!-- {{active>7?'优秀':active>5?'良好':active>0?'一般':''}} -->
						{{active>7?'优秀':active>5?'良好':'一般'}}
					</view>
				</view>
				<view class="other_tit">
					其它评价及建议
				</view>
				<view class="other_box">
					<textarea maxlength="-1" v-model="content" placeholder="请输入其它评价及建议的内容"></textarea>
				</view>
			</view>
			
			<view class="sub_btn" @click="sub_fuc">
				匿名提交
			</view>
		</view>
		
		<!-- 阻止滑动 -->
		<!-- <view @touchmove.stop.prevent='test'></view> -->
	</view>
</template>

<script>
	import Vue from 'vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	var that 
	export default {
		data() {
			return {
				options:'',
				datas:[
					{id:1},
					{id:1},
					{id:1},
					{id:1},
					{id:1},
				],
				active:0,
				content:'',
				tips: ''
			}
		},
		computed: {
		...mapState(['hasLogin', 'forcedLogin', 'userName', 'userinfo','nowtime']),
		},
		onLoad(e) {
			that=this
			that.options=e||{}
			console.log(e)
			
			// that.onRetry()
			this.getContent()
		},
		onShow() {
			
		},
		methods: {
			getContent() {
				var jkurl='/content/word'
				that.$service.P_post(jkurl, {}).then(res => {
					console.log('content', res)
					this.tips = res.data.lecturer
				})
			},
			// ...mapMutations(['wxshouquan','login']),
			test(){},
			set_star(index,type){
				if(type==1){
					that.active=index-1+2
				}
			},
			sub_fuc(){
				var datas={
					type:1,
					id:that.options.id,
					star:that.active,
					content:that.content,
				}
				if(that.btnkg==1){
					return
				}
				that.btnkg=1
				var jkurl='/content/sub'
				
				that.$service.P_post(jkurl, datas).then(res => {
					that.btnkg = 0
					console.log(res)
					if (res.code == 1) {
						that.htmlReset = 0
						var datas = res.data
						console.log(typeof datas)
				
						if (typeof datas == 'string') {
							datas = JSON.parse(datas)
						}
						console.log(res)
						uni.showToast({
							icon:'none',
							title:res.msg
						})
						setTimeout(function(){
							uni.navigateBack()
						},1000)
					} else {
					
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '获取数据失败'
							})
						}
					}
				}).catch(e => {
					that.htmlReset = 1
					that.btnkg = 0
					// that.$refs.htmlLoading.htmlReset_fuc(1)
					console.log(e)
					uni.showToast({
						icon: 'none',
						title: '获取数据失败，请检查您的网络连接'
					})
				})
			},
			onRetry(){
				that.page=1
				return
				that.getdata()
			},
			getdata(){
				var datas={
					type: mytype,
					page:that.page,
					time:that.vio_time,
					limit:20
				}
				if(that.btnkg==1){
					return
				}
				that.btnkg=1
				var nowpage=that.page
				var jkurl='/result/see'
				
				that.$service.P_post(jkurl, datas).then(res => {
					that.btnkg = 0
					console.log(res)
					if (res.code == 1) {
						that.htmlReset = 0
						var datas = res.data
						console.log(typeof datas)
				
						if (typeof datas == 'string') {
							datas = JSON.parse(datas)
						}
						console.log(res)
						if(nowpage==1){
							that.datas = datas.data
						}else{
							if (datas.length == 0) {
								that.data_last = true
								return
							}
							that.data_last = false
							that.datas = that.datas.concat(datas.data)
						}
						
						that.page++
						
					} else {
					
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '获取数据失败'
							})
						}
					}
				}).catch(e => {
					that.htmlReset = 1
					that.btnkg = 0
					// that.$refs.htmlLoading.htmlReset_fuc(1)
					console.log(e)
					uni.showToast({
						icon: 'none',
						title: '获取数据失败，请检查您的网络连接'
					})
				})
			},
			
			getimg(img){
				return service.getimg(img)
			},
			jump(e) {
				var that = this
				if (that.btnkg == 1) {
					return
				} else {
					that.btnkg = 1
					setTimeout(function() {
						that.btnkg = 0
					}, 2000)
				}
				console.log(e.currentTarget.dataset.type)
				service.jump(e)
			},
			goback(){
			  uni.navigateBack()
			},
			func(){
				// that.$store.commit('setSystem',datas.system)
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrap_box{
	width: 100%;
	// padding: 30rpx;
	min-height: 100vh;
	// #ifdef H5
	min-height: calc(100vh - 44px);
	// #endif
	background: #F8F8F8;
}
.tel_index_bg{
	position: absolute;
	top: 0;
	z-index: 1;
	width: 100%;
	min-height: 220rpx;
	background: linear-gradient(0deg, #f8f8f8 0%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);
}
.bz_box{
	width: 100%;
	position: relative;
	z-index: 2;
	padding: 30rpx;
}
.pf_tip{
	width: 100%;
	padding: 24rpx 33rpx;
	background: #FFFCF3;
	border-radius: 10rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FF9A18;
	line-height: 38rpx;
	margin-bottom: 28rpx;
}
.pj_box{
	width: 100%;
	background: #FFFFFF;
	border-radius: 10rpx;
	padding: 32rpx;
	.pj_tit{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #545D71;
		margin-bottom: 20rpx;
	}
	.pj_star{
		padding-bottom: 35rpx;
		border-bottom: 1px solid #eee;
		margin-bottom: 34rpx;
		text{
			color: #EEEEEE;
			font-size: 40rpx;
			&+text{
				margin-left: 13rpx;
			}
			&.active{
				color: #FF9A18;
			}
		}
		.star_text{
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #A9B1C0;
		}
	}
	.other_tit{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #545D71;
	}
	.other_box{
		width: 100%;
		padding: 20rpx 0;
		textarea{
			width: 100%;
			height: 250rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #545D71;
		}
	}
}
.sub_btn{
	margin-top: 40rpx;
	width: 100%;
	height: 90rpx;
	background: #2D81FF;
	border-radius: 10rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>