<template>
	<view class="content">
		<view class="detail">
			<view class="top">
				<image v-if="datas.midPic!=''" :src="getImg(datas.midPic)"></image>
				<image v-else :src="getImg1('wf-xcx-gongyong.jpg')"></image>
				<view class="cntern">
					<view class="name">{{datas.title}}</view>
				</view>
			</view>
			<view class="tianxie">
				<textarea :class="datas.assess.length==0?'active':'nactive'" :placeholder="placeholder" placeholder-style="font-size:26rpx" v-model="datas.assess" />
			</view>
			<view class="tag">
				<view :class="['tag-list',el.isclick?'active':'']" v-for="(el,ind) in tags" :style="{'margin-right':(ind+1)%4==0?'0':'40rpx'}" @click="setTag(ind)">
					{{el.name}}
				</view>
			</view>
		</view>
	<!-- 	<view class="xxlist">
			<view class="scitemname">评分:</view>
			<view class="scitemstarts">
				<image class="star-image" :src="datas.score>0? selectedSrc:normalSrc" @click="chooseicon(ind,1)"></image>
				<image class="star-image" :src="datas.score>1? selectedSrc:normalSrc" @click="chooseicon(ind,2)"></image>
				<image class="star-image" :src="datas.score>2? selectedSrc:normalSrc" @click="chooseicon(ind,3)"></image>
				<image class="star-image" :src="datas.score>3? selectedSrc:normalSrc" @click="chooseicon(ind,4)"></image>
				<image class="star-image" :src="datas.score>4? selectedSrc:normalSrc" @click="chooseicon(ind,5)"></image>
			</view>
		</view> -->
		<view class="tipj" @click="submit">提交评价</view>
	</view>
</template>

<script>
	var web = require('@/components/utils/request.js');
	 
	export default{
		data(){
			return{
				placeholder:'　'+" "+'评价一下吧',
				normalSrc: '../../static/star-null-big_hong.png',
				selectedSrc: '../../static/star-on-big_hong.png',
				datas:{},
				textInd:1,
				id:0,
				tags:[]
			}
		},
		onLoad(options) {
			this.id=options.id;
			var pages = getCurrentPages();
			var page = pages[pages.length - 1].route;
			// this.share.path='/'+page+'?id='+this.id;
			// this.shareline.query={id:this.id};
		},
		onReady() {
			this.getadd();
			// this.getTag();
		},
		methods:{
			setTag(ind){
				this.tags[ind].isclick=!this.tags[ind].isclick;
			},
			getTag(){
				var json=this.datas;
				var url='/comment/tag.jspx'
				var para = {
					id:this.id,
					type:2
				};
				var that=this;
				web.httpPost(this,url,para,function(res) {
					if(res.data.status==200){
						let json=res.data.data;
						let tmp=[];
						for(let i=0;i<json.length;i++){
							tmp.push({
								name:json[i],
								isclick:false
							})
						}
						that.tags=tmp;
					}
				})
			},
			submit(){
				var url='comment.jspx'
				var para = {
					contentId:this.id,
					score:5,
					content:this.datas.assess,
					flag:1
				};
				var that=this;
				web.httpPost(this,url,para,function(res) {
					if(res.data.status==200){
						uni.showToast({
							title: '评价成功'
						});
						setTimeout(function(){
							uni.navigateBack({
								delta:1
							})
						},1000)
					}else{
						uni.showToast({
							title: res.data.message
						});
					}
				})
			},
			//点击星级
			chooseicon(ind,score) {
				this.datas.score=score;
			},
			getadd(){
				var url = '/newsdetail.jspx';
				var para = {
					id: this.id
				};
				var that=this;
				web.httpPost(this,url,para,function(res) {
					if(res.data.status==200){
						var json=res.data;
						json.assess='';
						json.score=5;
						that.datas=json;
					}
				})
			},
			getImg(url){
				return 'https://cs.tour-ma.com/'+url
			},
			getImg1(url){
				return 'https://cs.tour-ma.com/r/cms/www/m/changshu/'+url
			}
		}
	}
</script>

<style lang="scss">
	@import url("@/components/css/iconfont.css");
	.tag{
		margin-top: 15rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		.active{
			font-size: 22rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			background: #227BFB;
		}
		&-list{
			padding: 5rpx 10rpx;
			margin-bottom: 40rpx;
			min-width: 108rpx;
			height: 35rpx;
			background: #E9F2FF;
			border: 1rpx solid #66A6FF;
			border-radius: 4rpx;
			font-size: 22rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #227BFB;
			text-align: center;
		}
	}
	.tipj{
		font-size: 33rpx;
		font-weight: 500;
		color: #FFFFFF;
		width: 438rpx;
		height: 78rpx;
		line-height: 78rpx;
		background: linear-gradient(90deg, #FF540B 0%, #FFA200 100%);
		border-radius: 39rpx;
		margin-top: 83rpx;
		text-align: center;
		letter-spacing: 10rpx;
	}
	.imglist{
		width: 650rpx;
		// height: 200rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;
		justify-content: space-between;
		.sctp2{
			width: 270rpx;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				border-radius: 14rpx;
				width: 270rpx;
				height: 200rpx;
			}
			margin-bottom: 20rpx;
		}
		.sctp{
			width: 270rpx;
			height: 200rpx;
			background-color: #FAFAFA;
			border: 1px solid #EAEAEA;
			border-radius: 14rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
			image{
				width: 49rpx;
				height: 47rpx;
			}
			.name{
				font-size: 25rpx;
				line-height: 25rpx;
				margin-top: 20rpx;
				color: #666666;
			}
		}
	}
	.tianxie{
		width: 650rpx;
		height: 200rpx;
		margin-top:62rpx;
		font-size: 26rpx;
		.active{
			width: 650rpx;
			height: 200rpx;
			// background: url(https://xcx.wfwhy.gov.cn/r/cms/www/weifang/ximg/bh-pj-icon-pj.png) no-repeat;
			background-position: left 3rpx;
			background-size: 26rpx;
		}
		.nactive{
			width: 650rpx;
			height: 200rpx;
		}
	}
	.xxlist{
		height: 40rpx;
		display: flex;
		align-items: center;
		margin-top: 45rpx;
		width: 650rpx;
		.scitemname{
			font-size: 33rpx;
			line-height: 33rpx;
			font-weight: 500;
			color: #222222;
			margin-right: 28rpx;
		}
		.scitemstarts{
			display: flex;
			align-items: center;
			.star-image{
				width: 38rpx;
				height: 37rpx;
				margin-right: 11rpx;
			}
		}
	}
	.top{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		image{
			width: 111rpx;
			height: 111rpx;
			background: #f1f1f1;
			border-radius: 10rpx;
			margin-right: 27rpx;
		}
		.cntern{
			flex: 1;
			.name{
				font-size: 28rpx;
				line-height: 28rpx;
				color: #666666;
				margin-top: 14rpx;
			}
		}
	}
	.detail{
		width: 650rpx;
		// min-height: 771rpx;
		background: #FFFFFF;
		border: 1rpx solid #f0f0f0;
		border-radius: 17rpx;
		padding: 28rpx 25rpx;
	}
	.content{
		padding-top: 3vh;
		height: 97vh;
		width: 750rpx;
		background: linear-gradient(0deg, #FFFFFF 0%, #F9F9F9 100%);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 80rpx;
	}
</style>
