<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.DetailList[0].CoverImagePath" mode="aspectFit" />
				<view class="right-box">
					<view class="good-info">{{dataList.DetailList[0].GoodsName}}</view>
					<view class="op-box">
						天数：{{dataList.DetailList[0].UseDay==0.5?'半天':dataList.DetailList[0].UseDay+'天'}}
						颜色：{{dataList.DetailList[0].CarColorName}}
						类型：{{dataList.DetailList[0].RideNum}}座
					</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">
			<view class="good-item" style="margin-bottom:0;">
				<u-avatar mode="circle" :src="dataList.DetailList[0].GuidePhoto"></u-avatar>
				<view style="margin:13px 0 0 10px;">
					{{dataList.DetailList[0].GuideName}}
				</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）			
				}, {
					OrderDetailId: 0, //订单详情
					GoodsId: 0, //商品id
					Content: '', //评价内容
					CommentImgList: [], //评价图片
					CommentScore: 5, //分数
					GuideId: 0, //导游（导游id（新增一条评论需新增2调数据，一个是对导游（车辆id=0）的一个是对车辆的（导游id=0）	
					CarId: 0 //车辆（车辆id）			
				}],
				OrderId: 0,
				submitStatus: false,
				goodsName: "",
				goodsPic: "",
				action: this.host2 + "/api/File/UploadTencent",
				fileList: [], //商品上传图
				fileList2: [], //导游上传图
				dataList: {}, //商品详情数据
			};
		},
		onLoad(option) {
			if (option.param) {
				let param = JSON.parse(decodeURIComponent(option.param));
				this.msg[0].GoodsId = param.GoodsId;
				this.msg[1].GoodsId = param.GoodsId;
				this.msg[0].OrderDetailId = param.OrderDetailId;
				this.msg[1].OrderDetailId = param.OrderDetailId;
				this.goodsName = param.GoodsName;
				this.goodsPic = param.CoverImage;
				this.OrderId = param.OrderId;
				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);
			},
			//获取订单详情
			getOrderDetail() {
				let msg = {
					OrderId: this.OrderId,
					NewUserId: 0
				}
				this.request2({
						url: "/api/AppletGCOrder/GetAppletGuidecarOrderOrderInfo",
						data: msg
					},
					(res) => {
						if (res.resultCode == 1) {
							this.dataList = res.data;
							this.msg[0].CarId = this.dataList.DetailList[0].CarId;
							this.msg[1].GuideId = this.dataList.DetailList[0].GuideId;
						}
					}
				);
			},
			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.msg[1].CommentScore == 0) {
					this.$refs.uTips.show({
						title: "请您为导游打打分吧",
						type: "error",
						duration: "2300",
					});
					return;
				}
				this.submitStatus = true;
				this.request2({
						url: "/api/AppletGCOrder/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;
	}

	.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>
