<template>
	<view class="app">
		<view class="myorder titles" @tap="expertOrder">
			<view class="title">
				<image mode="" :src="require('../images/updata.png')"></image>
				我的评价
			</view>
			<view class="righttitle">
				<image src="../../static/huijiantou.png" mode=""></image>
			</view>

		</view>

		<view class="" v-if="total >0">
			<view class="orderitem" v-for="(item,index) in evaluatedata">
				<view class="tiemitem">
				</view>
				<view class="details">
					<image src="../../static/headsculpture.png" mode="" v-if="item.orderType== 'FAMILY_DOCTOR' ">
					</image>
					<image :src="baseurl+item.pictureUrl" mode="" v-if="item.orderType== 'INTEGRAL_EXCHANGE' || item.orderType== 'DIRECT_BUY' || item.orderType== 'APPOINTMENT_ORDER'" ></image>
					<image :src="baseurl+item.personPictureUrl" mode="" v-if="item.orderType== 'HEALTH_CONSULTATION'" ></image>
					</image>
					<!-- <image :src="baseurl+item.pictureUrl" mode="" v-else></image> -->
					<view class="ppointment">
						<view class="doctorname">
							<span>{{item.orderName}}</span>
						</view>
						<view class="reservation">
							<span>{{item.createTime}}</span>
						</view>

					</view>
				</view>
				<view class="bottom">
					<span @tap="healthratenurse(item)">未评价</span>
				</view>
			</view>
		</view>
		<view class="noorder" v-else>
			<u-empty mode="order" icon-size='220' text="暂无数据"></u-empty>
		</view>
		<!-- 家医模块 评价 -->
		<u-popup v-model="evaluateshow" mode="bottom" length="45%" border-radius="30" :closeable='true'>
			<view class="evaluateserver">
				立即评价
			</view>
			<view class="star">
				<view class="evaluatstar">
					<span>评分</span>
					<u-rate size="50" active-color="#FFA115" inactive-color="#b2b2b2" gutter="20"
						v-model="list.compositeScore"></u-rate>
				</view>
			</view>
			<view class="star">
				<view class="evaluatstar">
					<span>评价</span>
					<u-input v-model="list.evaluateContent" type="textarea" placeholder="请输入" />
				</view>
			</view>
			<view class="submits">
				<span @tap="cancel()">取消</span>
				<span @tap="submit()">提交</span>
			</view>
		</u-popup>
		<u-popup v-model="evaluatenurse" mode="bottom" length="50%" border-radius="20" :closeable='true' class='masks'>
			<view class="title">
				综合评价
			</view>
			<view class="mask">
				<u-rate :count="5" v-model="rateval" :size='70' active-color='#F4EA2A'></u-rate>
			</view>
			<view class="rateitem">
				{{rateval==5?'非常满意':''}}
				{{rateval==4?'满意':''}}
				{{rateval==3?'一般':''}}
				{{rateval==2?'差':''}}
				{{rateval==1?'非常差':''}}
			</view>
			<view class="btn" @tap="submit()">
				确认
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getAppletOrderList,
		addAppointmentEvaluate,
		insertGoodsEvaluate,
	} from '@/api/pagesB/Serviceevaluation/Serviceevaluation.js'
	import {

		add
	} from '@/api/pagesC/servicerecord/servicerecord.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				baseurl:'',
				evaluateshow: false, //家医评价
				evaluatenurse: false, //护理站评价
				parentId: '',
				orderStatus: 'NOT_EVALUATED', //状态
				evaluatedata: {}, //列表
				total: 0,
				cardNo: '', //身份证号
				region: '', //地区
				pageNum: 1,
				pageSize: 20,
				userinfo: '',
				rateval: 0, //评价星棵树
				list: {
					compositeScore: '',
					evaluateContent: '',
					patientId: '',
					openId: '',
					orderNo: '',

					evaluateChannel: 'WE_CHAT_APPLET',
				},
				openId: '',
				orderType: '',
				orderSource:'',


			}
		},
		onShow() {
			this.userinfo = uni.getStorageSync('userinfo');
			this.cardNo = this.userinfo.cardNo;
			this.parentId = this.userinfo.id;
			this.region = uni.getStorageSync('region');
			this.openId = uni.getStorageSync('openid');
			// console.log(this.openId, '999')

			// this.cardNo = '371402199404167019';
			// this.cardNo = '372926199812187720';
			// this.parentId = '83';


			this.getlist();

		},
		onLoad(options) {
			// this.list.patientId = uni.getStorageSync('patientId');

			this.baseurl = baseurl;

		},
		onReachBottom() { //下滑加载

			if (this.evaluatedata.length >= this.total) {

			} else {
				this.pageNum++
				getAppletOrderList(this.parentId, this.orderStatus, this.cardNo, this.region, this.pageNum, this
					.pageSize).then(res => {
					if (res.rows) {
						res.rows.forEach(e => {
							this.evaluatedata.push(e)
							this.total = res.total
						})

					}


				})

			}
		},
		watch: { //监听
			rateval() {
				if (this.rateval == 5) {
					this.evaluateSatisfaction = 'VERYSATISFIED'
				} else if (this.rateval == 4) {
					this.evaluateSatisfaction = 'SATISFIED'
				} else if (this.rateval == 3) {
					this.evaluateSatisfaction = 'COMMONLY'
				} else if (this.rateval == 2) {
					this.evaluateSatisfaction = 'DISSATISFIED'
				} else if (this.rateval == 1) {
					this.evaluateSatisfaction = 'VERYDISSATISFIED'
				}
			},
		},
		methods: {
			//商城评价
			rate(item) {
				uni.navigateTo({
					url: `/pagesB/evaluate/evaluate?item=${JSON.stringify(item)}&delta=${1}`
				})
			},
			// 护理站评价
			ratenurse() {
				this.evaluatenurse = true;


			},
			// 未评价
			healthratenurse(item) {
				console.log(item, '58')
				if (item.orderSource == 'FAMILY_DOCTOR') {
					this.orderSource = 'FAMILY_DOCTOR'
				} else if (item.orderSource == 'SPRING_DOCTOR') {
					this.orderSource = 'SPRING_DOCTOR'
				}
				// 家医模块立即评价
				if (item.orderType == "FAMILY_DOCTOR") {
					this.evaluateshow = true;

				}
				// 健康咨询、护理服务满意度
				if (item.orderType == "HEALTH_CONSULTATION" || item.orderType == "APPOINTMENT_ORDER") {
					this.evaluatenurse = true;

				}
				// 商品积分兑换、直接购买
				if (item.orderType == "INTEGRAL_EXCHANGE" || item.orderType == "DIRECT_BUY") {
					uni.navigateTo({
						url: `/pagesB/evaluate/evaluate?item=${JSON.stringify(item)}&delta=${1}`
						// url: `/pagesB/goodsorderRate/goodsorderRate?item=${JSON.stringify(item)}&delta=${1}`
					})

				}
				this.orderType = item.orderType
				this.list.orderNo = item.orderNo


				// this.list.evaluateChanne = 'WE_CHAT_APPLET'

			},
			// 提交评价
			submit() {
				this.list.patientId = this.parentId
				this.list.openId = uni.getStorageSync('openid')
				console.log(this.list, '45')
				if (this.orderType == "HEALTH_CONSULTATION" || this.orderType == "INTEGRAL_EXCHANGE" || this.orderType ==
					"DIRECT_BUY" || this.orderType == "FAMILY_DOCTOR") {
						// this.list.evaluateSatisfaction=this.evaluateSatisfaction
						this.list.compositeScore=this.rateval
						this.list.orderSource=this.orderSource
					insertGoodsEvaluate(this.list).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								title: '评价成功',
								type: 'success',
								duration: '1500'
							})
							this.cancel();
							this.getlist();
						} else if (res.code == 500) {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
								duration: '1500'
							})
						}
					})
					// 满意度
				} else if (this.orderType == "APPOINTMENT_ORDER") {
					var obj = {
						"patientId": this.list.patientId,
						"openid": uni.getStorageSync('openid'),
						"orderNo": this.list.orderNo,
						"evaluateChannel": "WE_CHAT_APPLET",
						"evaluateSatisfaction": this.evaluateSatisfaction,
						"orderSource": this.orderSource,
						"compositeScore": this.rateval,
					}
					addAppointmentEvaluate(obj).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								title: '评价成功',
								type: 'success',
								duration: '1500'
							})
							this.cancel();
							// this.evaluatenurse =false;
							this.getlist();
						} else if (res.code == 500) {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error',
								duration: '1500'
							})
						}
					})

				}

			},
			// 取消
			cancel() {
				this.evaluateshow = false;
				this.evaluatenurse = false;

			},
			// 列表
			getlist() {
				getAppletOrderList(this.parentId, this.orderStatus, this.cardNo, this.region, this.pageNum, this
					.pageSize).then(res => {
					this.evaluatedata = res.rows
					this.total = res.total

				})

			},

			// 跳转我的评价
			expertOrder() {
				uni.navigateTo({
					url: '/pagesB/myevaluation/myevaluation'
				})


			},

		},

	}
</script>

<style lang="scss">
	.app {
		height: 100vh;
		background-color: #F7F5F5;
		padding: 30rpx 0 0 0;

		.noorder {
			margin-top: 20%;
		}

		.myorder {
			position: relative;
			background: #fff;
			height: 73rpx;
			width: 96%;
			left: 50%;
			transform: translateX(-50%);

			.orderStatus {
				text-align: center;
				margin: 60rpx auto 30rpx;
				width: 90%;
				display: flex;
				justify-content: space-around;
				padding-bottom: 30rpx;

				.item {
					width: 25%;

					.text {
						font-size: 26rpx;
						color: #333333;
						margin-top: 10rpx;
					}

					image {
						width: 70rpx;
						height: 60rpx;
					}
				}
			}

			.righttitle {
				font-size: 26rpx;
				color: #969494;
				position: absolute;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 30rpx;

				image {
					vertical-align: middle;
					padding-left: 20rpx;
					width: 13rpx;
					height: 23rpx;
					display: inline-block;
				}
			}

			.title {
				margin-left: 30rpx;
				font-size: 32rpx;
				color: #4B4B4B;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);

				image {
					/* vertical-align: middle; */
					/* padding-left: 20rpx; */
					width: 32rpx;
					height: 32rpx;
					/* display: inline-block; */
					/* margin-top: 11rpx; */
					margin-right: 20rpx;
					position: relative;
					top: 7rpx;

				}
			}
		}

		.orderitem {
			width: 96%;
			height: 383rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;
			margin: 20rpx auto;
			position: relative;
			margin-bottom: 20rpx;

			.tiemitem {
				width: 92%;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000000;
				position: absolute;
				// background: red;
				left: 35rpx;
				top: 30rpx;

				span:nth-child(2) {
					margin-left: 20rpx;
				}

				span:nth-child(3) {
					display: inline-block;
					position: absolute;
					right: 0;
					font-weight: 500;
					color: #26A888;
				}
			}

			.details {
				width: 96%;
				height: 200rpx;
				// background-color: #26A888;
				position: absolute;
				top: 97rpx;
				left: 50%;
				transform: translateX(-50%);

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 5rpx;
					position: absolute;
				}

				.ppointment {
					// background: red;
					position: absolute;
					width: 71%;
					height: 100%;
					right: 0;
					overflow: auto;

					.doctorname {
						font-family: Source Han Sans CN;
						font-weight: 600;
						color: #333333;
						margin-top: 53rpx;
						height: 74rpx;

						overflow: auto;

						span:nth-child(1) {
							font-size: 28rpx;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						span:nth-child(2) {
							display: inline-block;
							position: absolute;
							font-size: 28rpx;
							right: 0;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #333333;
						}
					}

					.reservation {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #959595;
						position: absolute;
						top: 61%;


					}
				}
			}

			.bottom {
				position: absolute;
				width: 96%;
				height: 20%;
				bottom: 4%;
				font-size: 28rpx;
				font-family: Source Han Sans CN;

				span:nth-child(1) {
					line-height: 30px;
					width: 169rpx;
					height: 61rpx;
					background: #26A888;
					border-radius: 5rpx;
					display: inline-block;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					text-align: center;
				}
			}


		}

		.evaluateserver {
			width: 100%;
			font-size: 38rpx;
			color: #000000;
			line-height: 120rpx;
			font-weight: 400;
			text-align: center;

			::v-deep .u-close {
				top: 8% !important;
			}
		}

		.star {
			position: relative;
			left: 11%;
			height: 80rpx;
			margin-bottom: 40rpx;

			.evaluatstar {
				::v-deep .u-rate {
					position: absolute !important;
					left: 14% !important;
					top: 50%;
					transform: translateY(-50%);
				}

				::v-deep .u-input__textarea {
					background: #F6F6F6;
					height: 200rpx !important;
				}

				::v-deep .u-input {
					width: 66% !important;
					height: 171rpx;
					position: absolute;
					left: 16%;
				}

				font-family: Source Han Sans CN;

				span:nth-child(1) {
					position: absolute;
					display: inline;
					font-size: 36rpx;
					color: #000000;
					font-weight: 400;
					letter-spacing: 0.2em;
					top: 50%;
					transform: translateY(-50%);
				}

				span:nth-child(2) {
					position: absolute;
					display: inline-block;
				}
			}
		}

		.submits {
			font-family: Source Han Sans CN;
			font-size: 31rpx;
			position: relative;
			display: flex;
			justify-content: space-around;
			top: 23%;
			text-align: center;

			span:nth-child(1) {
				display: inline-block;
				width: 290rpx;
				height: 62rpx;
				line-height: 62rpx;
				background: #FFFFFF;
				border: 1px solid #26A888;
				border-radius: 5rpx;
				font-weight: 500;
				color: #26A888;

			}

			span:nth-child(2) {
				width: 290rpx;
				height: 62rpx;
				line-height: 62rpx;
				background: #26A888;
				border-radius: 5rpx;
				font-weight: 500;
				color: #FFFFFF;
				display: inline-block;
			}
		}

		.evaluate {
			width: 100%;
			font-size: 38rpx;
			color: #000000;
			line-height: 120rpx;
			text-align: center;

			::v-deep .u-close {
				top: 8% !important;
			}
		}

		.starnurse {
			position: relative;
			top: 15%;
			left: 11%;

			span {
				display: block;
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-top: 5%;
				letter-spacing: 0.2em;
			}
		}

		.submitsnurse {
			position: relative;
			width: 496rpx;
			height: 61rpx;
			line-height: 61rpx;
			background: #26A888;
			border-radius: 5rpx;
			text-align: center;
			font-size: 31rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			top: 35%;
			left: 50%;
			transform: translateX(-50%);

		}

		.masks {
			image {
				position: absolute;
				top: 50rpx;
				left: 50%;
				transform: translateX(-50%);
				z-index: 999;
				width: 250rpx;
				border-radius: 25rpx;
				height: 250rpx;
			}

			.ratetitle {
				font-size: 34rpx;
				position: absolute;
				top: 320rpx;
				left: 50%;
				transform: translateX(-50%);
				z-index: 999;
			}

			.title {
				position: absolute;
				top: 40rpx;
				left: 50%;
				transform: translateX(-50%);
				font-size: 42rpx;
			}

			::v-deep .u-star-wrap {
				padding-right: 10rpx;
			}

			.mask {
				position: absolute;
				top: 200rpx;
				left: 70rpx;
			}

			.btn {
				width: 70%;
				height: 71rpx;
				background: #26A888;
				border-radius: 26rpx;
				position: absolute;
				top: 530rpx;
				left: 15%;
				text-align: center;
				line-height: 71rpx;
				color: #fff;
			}

			.rateitem {
				position: absolute;
				top: 350rpx;
				left: 80rpx;
				font-size: 42rpx;
			}
		}

	}
</style>
