<template>
	<view class="commit-detail">
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="good_List">
			<view class="good-item">
				<image class="good-pic" :src="dataList.CoverImage" mode="aspectFill" />
				<view class="right-box">
					<view class="good-info">{{dataList.GoodsName}}</view>
					<view class="op-box">服务时间：{{dataList.ServiceDate+' '+dataList.ServiceTime}}</view>
				</view>
			</view>
			<view class="good_Line"></view>
			<view style="padding:0 10px 20px 10px;">
				<view class="title-box">
					<text style="margin-right:10px;">商品评价</text>
					<u-rate :current="msg[0].CommentScore" active-color="#FA3534" inactive-color="#b2b2b2" active-icon="star"
					 inactive-icon="star-o" size="40" @change='change1'></u-rate>
				</view>
				<view class="editor-box">
					<view class="editor-icon">
						<u-icon name="edit" size="36"></u-icon>
					</view>
					<view class="editor">
						<textarea placeholder="写入评价" v-model="msg[0].Content" maxlength="200"></textarea>
						<u-upload :action="action" :file-list="fileList" @on-remove="onRemove1" max-count="9" :custom-btn="true"
						 @on-success="uploadSuccessHandler">
							<view slot="addBtn" class="slot-btn">
								<u-icon name="photograph" size="40" color="#888"></u-icon>
								<view class="mian-title">上传图片</view>
							</view>
						</u-upload>
					</view>
				</view>
			</view>
		</view>
		<view class="good_List" v-show="showpersonal==true">
			<view class="good-item" style="margin-bottom:0;">
				<u-avatar mode="circle" :src="dataList.ServicepersonalHead"></u-avatar>
				<view style="margin:13px 0 0 10px;">
					{{dataList.ServicepersonalName}}
				</view>
			</view>
			<view style="padding:0 10px 20px 10px;">
				<view class="title-box">
					<text style="margin-right:10px;">服务人员评价</text>
					<u-rate :current="msg[1].CommentScore" active-color="#FA3534" inactive-color="#b2b2b2" active-icon="star"
					 inactive-icon="star-o" size="40" @change='change2'></u-rate>
				</view>
				<view class="editor-box">
					<view class="editor-icon">
						<u-icon name="edit" size="36"></u-icon>
					</view>
					<view class="editor">
						<textarea placeholder="写入评价" v-model="msg[1].Content" maxlength="200"></textarea>
						<u-upload :action="action" :file-list="fileList2" style="display:none;" @on-remove="onRemove2" max-count="9"
						 :custom-btn="true" @on-success="uploadSuccessHandler2">
							<view slot="addBtn" class="slot-btn">
								<u-icon name="photograph" size="40" color="#888"></u-icon>
								<view class="mian-title">上传图片</view>
							</view>
						</u-upload>
					</view>
				</view>
			</view>
		</view>
		<view style="padding:10px 40px;">
			<u-button size="80" :ripple="true" @click="submitForm" shape="circle" :custom-style="{
						backgroundColor: mc,
						height: '80rpx',
						color: '#FFF',
						fontSize: '14px'
					}">
				<u-loading mode="circle" style="margin-right: 5px;" v-if="submitStatus"></u-loading>提交评价
			</u-button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle: "发表评价",
				mc: "",
				secondary: "",
				msg: [{
					OrderDetailId: 0, //订单详情
					GoodsId: 0, //商品id
					Content: '', //评价内容
					CommentImgList: [], //评价图片
					CommentScore: 5, //分数
					GuideId: 0, //导游（导游id（新增一条评论需新增2调数据，一个是对导游（车辆id=0）的一个是对车辆的（导游id=0）	
					CarId: 0, //车辆（车辆id）	
					ServicePersonalId:0,
					StoreId:0,
				}, {
					OrderDetailId: 0, //订单详情
					GoodsId: 0, //商品id
					Content: '', //评价内容
					CommentImgList: [], //评价图片
					CommentScore: 5, //分数
					GuideId: 0, //导游（导游id（新增一条评论需新增2调数据，一个是对导游（车辆id=0）的一个是对车辆的（导游id=0）	
					CarId: 0 ,//车辆（车辆id）		
					ServicePersonalId:0,
					StoreId:0,
				}],
				OrderId: 0,
				submitStatus: false,
				goodsName: "",
				goodsPic: "",
				action: this.host2 + "/api/File/UploadTencent",
				fileList: [], //商品上传图
				fileList2: [], //导游上传图
				dataList: {}, //商品详情数据
				showpersonal:true,//是否评论服务人员
			};
		},
		onLoad(option) {
			if (option.param) {
				let param = JSON.parse(decodeURIComponent(option.param));
				console.log(param)
				this.dataList = param
				this.msg[0].GoodsId = param.GoodsId;
				this.msg[1].GoodsId = param.GoodsId;
				this.msg[0].StoreId = param.StoresIds;
				this.msg[1].StoreId = param.StoresIds;
				this.msg[1].ServicePersonalId = param.ServicepersonalId;
				this.msg[0].OrderDetailId = param.OrderDetailId;
				this.msg[1].OrderDetailId = param.OrderDetailId;
				this.goodsName = param.GoodsName;
				this.goodsPic = param.CoverImage;
				this.OrderId = param.OrderId;
				if(param.ServicepersonalId==0){
					this.msg.splice(1,1);
					this.showpersonal=false
				}
				
				// this.getOrderDetail();
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			this.mc = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
			let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId ? uni.getStorageSync("mall_UserInfo").MallBaseId : 1;
			this.action = this.host2 + '/api/File/UploadTencent?MallBaseId=' + MallBaseId
		},
		methods: {
			uploadSuccessHandler(data, index, lists) {
				let r = JSON.parse(data);
				this.msg[0].CommentImgList.push(r.data);
			},
			uploadSuccessHandler2(data, index, lists) {
				let r = JSON.parse(data);
				this.msg[1].CommentImgList.push(r.data);
			},
			//删除1
			onRemove1(index) {
				this.msg[0].CommentImgList.splice(index, 1);
			},
			//删除2
			onRemove2(index) {
				this.msg[1].CommentImgList.splice(index, 1);
			},
			
			change1(val) {
				this.msg[0].CommentScore = val
			},
			change2(val) {
				this.msg[1].CommentScore = val
			},
			submitForm() {
				let pages = getCurrentPages(); // 当前页面
				let beforePage
				beforePage = pages[pages.length - 2]; // 前一个页面
				if (this.msg[0].CommentScore == 0) {
					this.$refs.uTips.show({
						title: "请您为门店打打分吧",
						type: "error",
						duration: "2300",
					});
					return;
				}
				if(this.showpersonal == true){
					if (this.msg[1].CommentScore == 0) {
						this.$refs.uTips.show({
							title: "请您为服务人员打打分吧",
							type: "error",
							duration: "2300",
						});
						return;
					}
				}
				
				this.submitStatus = true;
				this.request2({
						url: "/api/AppletStores/SetGuideCarCommentInfo",
						data: this.msg,
					},
					(res) => {
						if (res.resultCode == 1) {
							let that = this
							uni.showModal({
								content: "评价成功，感谢您的反馈",
								showCancel: false,
								confirmText: "确认",
								success: function(res2) {
									if (res2.confirm) {
										uni.navigateBack({
											delta: 1,
											success: function() {
												if (res.msgType == 2 && res.couponResultCode == 1) {
													beforePage.$vm.getReceive(res.couponMessage, res.msgType); // 执行前一个页面的方法
												}
											}
										});
									}
									that.submitStatus = false;
								},
							});

						} else {
							this.submitStatus = false;
							this.$refs.uTips.show({
								title: res.msg,
								type: "error",
								duration: "2300",
							});
						}
					}
				);
			},
		}
	};
</script>

<style>
	.commit-detail {
		background: #faf8f9;
		position: relative;
	}

	.commit-detail .good-item {
		margin: 10px 0;
		background: #fff;
		padding: 10px;
		border-radius: 10px;
		display: flex;
	}

	.good_Line {
		width: 95%;
		margin: auto;
		height: 1px;
		border-top: 1px solid #e2e2e2;
		padding-bottom: 15px;
	}

	.commit-detail .good-item .good-pic {
		width: 120rpx;
		height: 120rpx;
		margin-right: 15px;
		border-radius: 5px;
	}

	.commit-detail .good-item .right-box {
		width: 1px;
		flex: 1;
		display: flex;
		flex-direction: column;
		height: 100rpx;
	}

	.commit-detail .good-item .right-box .good-info {
		flex: 1;
		width: 100%;
		height: 1px;
		font-size: 28rpx;
		color: #333;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
		margin-bottom: 5px;
	}

	.commit-detail .good-item .right-box .op-box {
		height: 25px;
		line-height: 25px;
		font-family: aa;
		font-size: 12px;
		color: #A3A3A3;
	}

	.commit-detail .content-box {
		background: #fff;
		padding: 15px;
		border-radius: 5px;
	}

	.commit-detail .good_List .title-box {
		padding-bottom: 15px;
		/* border-bottom: 1px solid #e3e3e3; */
		font-size: 15px;
		font-weight: 500;
		margin-bottom: 15px;
		color: #000;
		display: flex;
		align-items: center;
	}

	.commit-detail .good_List .editor-box {
		display: flex;
	}

	.commit-detail .good_List .editor-box .editor-icon {
		width: 18px;
		margin-right: 5px;
	}

	.commit-detail .good_List .editor-box .editor {
		width: 1px;
		flex: 1;
	}

	.commit-detail .good_List .editor-box .editor textarea {
		width: 100%;
		height: 100px;
		font-size: 14px;
		color: #000;
		border: none;
		outline: none;
		margin-bottom: 10px;
	}

	.commit-detail .good_List .editor-box .editor .slot-btn {
		width: 140rpx;
		height: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
	}

	.commit-detail .content-box .editor-box .editor .slot-btn .mian-title {
		font-size: 28rpx;
		color: #888;
		font-weight: 600;
		margin: 10rpx 0;
	}

	.commit-detail .content-box .editor-box .editor .slot-btn .sub-title {
		color: #999;
		font-size: 26rpx;
		font-family: "microsoft yahei" !important;
	}

	.commit-detail .u-list-item {
		width: 90px !important;
		height: 90px !important;
	}

	.commit-detail .good_List {
		background-color: #fff;
		margin-bottom: 10px;
	}
</style>
