<template>
	<view class="wrap_box">
		<!-- <uParse v-if="datas" :content="datas"></uParse> -->
		<view class="kq_box">
			<view class="kq_bg dis_flex aic ju_c">
				<image class="kq_bgimg" src="/static/images/tbbj.png" mode="widthFix"></image>
				<view class="">
					<text>{{all_star}}</text>分
				</view>
			</view>
			<view class="pf_num">
				共{{total}}人评价
			</view>
			<view class="kq_list_box">
				<view class="kq_list">
					<u-empty v-if="datas.length==0"
									mode="data"
									text="暂无数据"
									icon="/static/images/tch/img_blank.png"
					>
					</u-empty>
					<view v-for="(item,index) in datas" class="kq_li">
						<view class="pj_tit">
							负责任程度
						</view>
						<view class="pj_star dis_flex aic" style="border-bottom: 0;">
							<view class="flex_1 dis_flex aic">
								<text class="icon icon-star" :class="item.star>index1?'active':''" v-for="(item1,index1) in 10"></text>
							</view>
							<view class="star_text">
								<!-- {{active>7?'优秀':active>5?'良好':active>0?'一般':''}} -->
								{{item.star>7?'优秀':item.star>5?'良好':'一般'}}
							</view>
						</view>
						<view class="pj_tit">
							专业能力(答疑、讲解、课堂组织能力)
						</view>
						<view class="pj_star dis_flex aic">
							<view class="flex_1 dis_flex aic">
								<text class="icon icon-star" :class="item.star_o>index1?'active':''" v-for="(item1,index1) in 10"></text>
							</view>
							<view class="star_text">
								<!-- {{active2>7?'优秀':active2>5?'良好':active2>0?'一般':''}} -->
								{{item.star_o>7?'优秀':item.star_o>5?'良好':'一般'}}
							</view>
						</view>
						<view class="other_box">
							<text class="other_tit">其他评价及建议：</text><text>{{item.content}}</text>
						</view>
          </view>
				</view>
			</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:[
					{
						fz:2,
						zy:3
					},
					{
						fz:8,
						zy:9
					},
					{
						fz:5,
						zy:6
					},
					{
						fz:7,
						zy:7
					},
				],
				allnum:'',
				page:1,
				all_star:0,
				total:0
			}
		},
		computed: {
		...mapState(['hasLogin', 'forcedLogin', 'userName', 'userinfo','nowtime']),
		},
		onLoad(e) {
			that=this
			that.options=e||{}
			console.log(e)
			
			// that.getdata()
		},
		onShow() {
			that.onRetry()
		},
		onReachBottom() {
			that.getdata()
		},
		methods: {
			// ...mapMutations(['wxshouquan','login']),
			test(){},
			onRetry(){
				that.page=1
				that.datas = []
				that.getdata()
			},
			getdata() {
			
				var jkurl="/content/list"
				var datas={
					page:that.page,
				}
				// if(that.data_last == true){
				// 	return
				// }
				if (that.btnkg == 1) {
					return
				} else {
					that.btnkg = 1
				}
				var page_now=that.page
				that.$service.P_post(jkurl, datas).then(res => {
					that.btnkg = 0
					console.log(res)
					if (res.code == 1) {
						var datas = res.data
						console.log(typeof datas)
				
						if (typeof datas == 'string') {
							datas = JSON.parse(datas)
						}
						that.all_star=datas.all_star||0
						that.total=datas.total||0
						if (page_now == 1) {
						
							that.datas = datas.data
						
						} else {
							if (datas.data.length == 0) {
								that.data_last = true
								return
							}
							that.data_last = false
							that.datas = that.datas.concat(datas.data)
						}
						// that.allnum=datas.allnum
						that.page++
				
					} else {
						if (res.msg) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '操作失败'
							})
						}
					}
				}).catch(e => {
					that.btnkg = 0
					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;
}
.kq_box{
	width: 100%;
	position: relative;
	.kq_bg{
		position: relative;
		width: 100%;
		height: 250rpx;
		font-size: 32rpx;
		color: #fff;
		.kq_bgimg{
			position: absolute;
			top: 0;
			z-index: 1;
			width: 100%;
			height: 250rpx;
			font-size: 32rpx;
			color: #fff;
			
			
		}
		view{
			position: relative;
			top: -40rpx;
			z-index: 2;
			text{
				font-size: 72rpx;
				font-weight: bold;
			}
		}
	}
}
.kq_list_box{
	width: 100%;
	padding: 30rpx;
	.kq_list{
		width: 100%;
		.kq_li{
			width: 100%;
			padding: 28rpx;
			min-height: 150rpx;
			background: #fff;
			border-radius: 10rpx;
			&+.kq_li{
				// border-top: 1px solid #f8f8f8;
				margin-top: 30rpx;
			}
			.pj_tit{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #A9B1C0;
				margin-bottom: 20rpx;
				&.pj_tit1{
					padding-bottom: 34rpx;
					border-bottom: 1px solid #eee;
				}
			}
			.pj_star{
				padding-bottom: 34rpx;
				border-bottom: 1px solid #eee;
				// margin-bottom: 14rpx;
				padding-right: 60rpx;
				text{
					color: #EEEEEE;
					font-size: 36rpx;
					&+text{
						margin-left: 13rpx;
					}
					&.active{
						color: #FF9A18;
					}
				}
				.star_text{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #A9B1C0;
				}
			}
			.other_box{
				margin-top: 30rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #545D71;
				.other_tit{
					color: #A9B1C0;
				}
			}
		}
	}
}
.pf_num{
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #333333;
	padding: 20rpx 30rpx 0;
	margin-top: -10rpx;
}
</style>