<template>
	<view>
		<view>
			<view class="" v-show="!appraiseShow">
				<view class='module'>
					<view class="cu-bar bg-white solid-bottom margin-top">
						<view class='action'>
							<text class='cuIcon-titles text-orange'></text>项目名称
							 <text class="margin-left">{{form.tradeName}}</text>
						</view>
					</view>
				</view>
				<view class='module'>
					<view class="cu-bar bg-white solid-bottom margin-top">
						<view class='action'>
							<text class='cuIcon-titles text-orange'></text> 服务态度 
							<uni-rate  disabledColor='#ffca3e' :disabled='inputShow' :margin='10' class="margin-left"  v-model="form.csAttitudeStar" @change="onChange"/>
						</view>
					</view>
				</view>
				<view class='module'>
					<view class="cu-bar bg-white solid-bottom margin-top">
						<view class='action'>
							<text class='cuIcon-titles text-orange'></text> 服务技术
							<uni-rate  disabledColor='#ffca3e' :disabled='inputShow' :margin='10' class="margin-left"  v-model="form.csTechnicalStar" @change="onChange"/>
						
						</view>
					</view>
				</view>
				<view class='module'>
					<view class="cu-bar bg-white solid-bottom margin-top">
						<view class='action'>
							<text class='cuIcon-titles text-orange'></text> 其他评价
							<uni-rate disabledColor='#ffca3e' :disabled='inputShow' :margin='10' class="margin-left"  v-model="form.csOtherStar" @change="onChange"/>
							
						</view>
					</view>
				</view>
				<view class='module'>
					<view class="cu-bar bg-white solid-bottom margin-top">
						<view class='action'>
							<text class='cuIcon-titles text-orange'></text> 评价内容
						</view>
					</view>
					<view class='content'>
						<textarea :disabled='inputShow' v-model="form.csAppraise"  placeholder='请输入评价内容' maxlength="-1"></textarea>
					</view>
				</view>
				<button @click='submit' v-show="!inputShow" class="submit cu-btn bg-red round margin-tb-sm lg">提交评价</button>
			</view>

		</view>
		<view class="" v-show="appraiseShow">
			<view class="flex-sub text-center">
				<view class="solid-bottom text-xsl padding">
					<text class=" cuIcon-roundcheckfill text-green"></text>
				</view>
				<navigator animation-type="pop-out" animation-duration="300" open-type="navigateBack">
					<view class="padding">评价完成 , 返回上一页</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flag: false, //鼠标点击后变成true，鼠标进入进出事件就不会改变背景图
				form: {
					csOtherStar: null, //其他
					csTechnicalStar: null, //技术
					csAttitudeStar: null, //态度
					csAppraise: null,
				},
				appraiseShow: false,
				inputShow:false,
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			if(option.item!=undefined){
				var  item= JSON.parse(option.item) 
				if (item.csOtherStar!=null) {
					this.inputShow =true
				} 
				this.form =item
			}
		},
		methods: {
			onChange(e){
				console.log(e);
			},
			submit() {
				this.form.csTechnicalStar = this.form.csTechnicalStar
				this.form.csOtherStar = this.form.csOtherStar
				this.form.csAttitudeStar = this.form.csAttitudeStar
				console.log(this.form);
				delete this.form.docDate
				this.$api.appraise(this.form).then(res => {
						if (res.code == '000000') {
							this.appraiseShow = true
							setTimeout(function() {
						uni.navigateBack({
						    delta: 1,
						    animationType: 'pop-out',
						    animationDuration: 200
						});
							}, 5000);
						}else{
							uni.showModal({
								title: '提示',
								content: row.message,
								showCancel: false,
								success: function() {}
							})
						}
					}
				)

			},
		}
	}
</script>

<style>
	.content {
		background-color: white;
		padding-left: 35upx;
	}

	textarea {
		width: 100%;
		height: 300upx;
		background-color: white;
		padding: 35upx 35upx 35upx 0;
	}

	.submit {
		margin: 20upx 10%;
		width: 80%;
	}

	.stars-wrapper {
		background-color: #FFFFFF;
		padding: 20upx 30upx;
	}
</style>
