<template>
	<view class="commit-detail">
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="good-item">
			<image class="good-pic" :src="goodsPic" mode="aspectFit" />
			<view class="right-box">
				<view class="good-info">{{goodsName}}</view>
				<view class="op-box">
					<u-rate :current="msg.CommentScore" active-color="#FA3534" inactive-color="#b2b2b2" active-icon="star"
					 inactive-icon="star-o" size="40" @change='change'></u-rate>
				</view>
			</view>
		</view>
		<view class="content-box">
			<view class="title-box">输入评价内容</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.Content" maxlength="200"></textarea>
					<u-upload :action="action" :file-list="fileList" 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 style="padding:10px 40px;background:#FFF">
			<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: {
					CommentGrade: 1,
					GoodsId: 0,
					Content: "",
					OrderDetailId: 0,
					CommentImgList: [],
					CommentScore: 5
				},
				submitStatus: false,
				goodsName: "",
				goodsPic: "",
				action: this.host2 + "/api/File/UploadTencent",
				fileList: [],
			};
		},
		onLoad(option) {
			if (option.param) {
				let param = JSON.parse(decodeURIComponent(option.param));
				this.msg.GoodsId = param.GoodsId;
				this.msg.OrderDetailId = param.OrderDetailId;
				this.goodsName = param.GoodsName;
				this.goodsPic = param.CoverImage;
			}
		},
		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.CommentImgList.push(r.data);
			},
			change(val) {
				this.msg.CommentScore = val
			},
			submitForm() {
				this.submitStatus = true;
				if (this.msg.CommentScore > 0) {
					this.request2({
							url: "/api/AppletOrder/SetGoodsCommentInfo",
							data: this.msg,
						},
						(res) => {
							if (res.resultCode == 1) {
								uni.showModal({
									content: "评价成功，感谢您的反馈",
									showCancel: false,
									confirmText: "确认",
									success: function(res) {
										if (res.confirm) {
											uni.navigateBack({
												delta: 1,
											});
										}
										this.submitStatus = false;
									},
								});
							} else {
								this.submitStatus = false;
								this.$refs.uTips.show({
									title: res.msg,
									type: "error",
									duration: "2300",
								});
							}
						}
					);
				} else {
					this.$refs.uTips.show({
						title: "请您为商品打打分吧",
						type: "error",
						duration: "2300",
					});
				}
			},
		},
	};
</script>

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

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

	.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: 120rpx;
	}

	.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 .content-box .title-box {
		padding-bottom: 15px;
		border-bottom: 1px solid #e3e3e3;
		font-size: 15px;
		font-weight: 500;
		margin-bottom: 15px;
		color: #000;
	}

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

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

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

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

	.commit-detail .content-box .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;
	}
</style>
