<template>
	<view class="commit-box">
		<u-empty text="没有找到未评价的商品信息" font-size="36" mode="list" v-if="g.length == 0 && !loading"></u-empty>
		<view v-if="g.length > 0&& !loading" style="height: 100vh;width: 100vw;overflow: hidden;padding:0 0 10px 0;">
			<scroll-view :scroll-y="true" @scrolltolower="lower" :enable-back-to-top="true" :enable-flex="true" :scroll-top="scrollTop"
			 @scroll="scroll" style="height: 100%; padding-bottom: 0px;">
				<view class="good-list">
					<view class="good-item" v-for="(x, i) in g" :key="i">
						<image class="good-pic" :src="x.CoverImage" mode="aspectFill" />
						<view class="right-box">
							<view class="good-info">
								<view class="good-name">{{x.GoodsName}}</view>
								<view style="display: flex;align-items: center;font-size:12px;margin-top:5px;">
									<text style="margin-right:5px;" v-if="x.CarName">车辆：<text>{{x.CarName}}</text></text>
									<text v-if="x.CarColorName">
										<u-tag v-if="x.CarColorName" size="mini" :text="x.CarColorName" type="warning" />
									</text>
									<text style="margin-right:5px;" v-if="x.CarBrandName">品牌：<text>{{x.CarBrandName}}</text></text>
								</view>
								<view style="font-size:12px;display:flex;align-items: center;margin-top:5px;">
									导游：<u-avatar mode="circle" :size="50" :src="x.GuidePhoto"></u-avatar>
									<text>{{x.GuideName}}</text>
								</view>
							</view>
							<view class="op-box">
								<u-button size="mini" ripple plain shape="circle" :custom-style="{color:mc,borderColor:mc,width:60+'px'}"
								 @click="goCommit(x)">评价</u-button>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore v-if="showLoading" :status="status" :load-text="loadText" :font-size="24" :margin-top="20"
				 :margin-bottom="20" bg-color="#F5F5F5" />
			</scroll-view>
		</view>
		<coupon v-if="showCoupons" :coupon-message="couponMessage" :msgtype="msgType" @goLook="goLook" @closeBtn="closeBtn"></coupon>
	</view>
</template>

<script>
	import coupon from "@/components/coupons/coupons";
	export default {
		components: {
			coupon
		},
		data() {
			return {
				pageTitle: "评价中心",
				loading: false,
				g: [],
				showLoading: false,
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多评价商品了",
				},
				status: "loadmore",
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
				mc: "",
				secondary: "",
				msg: {
					pageIndex: 1,
					pageSize: 10,
					IsComment: 2,
					GoodsName: "",
					OrderNo: "",
					OrderClassify: 1
				},
				page_count: 0,
				isover: false,
				couponMessage: "", //弹出优惠券的内容
				showCoupons: false,
				msgType: 1, //类型
			};
		},
		onShow() {
			this.msg.pageIndex = 1;
			this.g = [];
			this.init();
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.pageTitle,
			});
			this.mc = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
		},
		methods: {
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop;
			},
			goCommit(x) {
				let msg = {
					GoodsId: x.GoodsId,
					OrderDetailId: x.OrderDetailId,
					GoodsName: x.GoodsName,
					CoverImage: x.CoverImage,
					OrderId: x.OrderId
				};
				uni.navigateTo({
					url: "/pages/guidecar/order-commit-detail?param=" +
						encodeURIComponent(JSON.stringify(msg)),
					fail: function(e) {
						console.log(e);
					},
				});
			},
			goTop(e) {
				this.scrollTop = this.old.scrollTop;
				this.$nextTick(function() {
					this.scrollTop = 0;
				});
			},
			init() {
				this.isover = false;
				this.loading = true;
				this.showLoading = this.msg.pageIndex != 1;
				this.request2({
						url: "/api/AppletOrder/GetAppletGoodsWaitCommentPageList",
						data: this.msg,
					},
					(res) => {
						this.loading = false;
						this.isloading = false;
						if (res.resultCode == 1) {
							this.g = this.g.concat(res.data.pageData);
							this.page_count = res.data.pageCount;
							if (this.page_count == 1) {
								this.isover = true;
								this.status = "nomore";
							} else {
								this.status = "loadmore";
							}
						}
						uni.hideNavigationBarLoading();
					}
				);
			},
			lower(e) {
				if (this.msg.pageIndex < this.page_count) {
					this.status = "loading";
					this.msg.pageIndex++;
					this.init();
				} else {
					this.isover = true;
					this.status = "nomore";
				}
			},
			getReceive(couponMessage, msgType) {
				setTimeout(() => {
					this.couponMessage = '获取' + couponMessage + '积分';
					this.msgType = msgType;
					this.showCoupons = true;
				}, 500)
			},
			goLook() {
				this.showCoupons = true;
				uni.navigateTo({
					url: "/pages/user-center/integral-detail/integral-detail",
				});
			},
			closeBtn() {
				this.showCoupons = false;
			},
		},
	};
</script>

<style>
	.commit-box {
		background: #faf8f9;
		height: 100vh;
		position: relative;
	}

	.commit-box .quick {
		right: 50rpx;
		bottom: 50rpx;
		position: absolute;
	}

	.commit-box .quick .item {
		background: #fff;
		border: 1px solid #aaa;
		height: 90rpx;
		width: 90rpx;
		color: #333;
		border-radius: 90rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.commit-box .good-list {}

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

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

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

	.commit-box .good-list .good-item .right-box .good-info {
		flex: 1;
		width: 100%;
		height: 1px;
	}

	.commit-box .good-list .good-item .right-box .op-box {
		text-align: right;
		height: 25px;
	}

	.commit-box .good-list .good-item .right-box .good-info .good-name {
		font-size: 28rpx;
		color: #333;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.commit-box .good-list .good-item .right-box .good-info .good-attr {
		text-align: left;
	}
</style>