<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="classifyBigBox">
				<view class="oneClassify flex" :class="{selectActive:selected[item.Id]==true}" v-for="(item,i) in LabelIdList"
				 @click="onSelectClassify(item.Id)">
					{{item.Name}}
				</view>
			</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,
					LabelIds:'',
				},
				submitStatus: false,
				goodsName: "",
				goodsPic: "",
				action: this.host2 + "/api/File/UploadTencent",
				fileList: [],
				LabelIdList: [],
				selected: [],
				selectedLabelId: [],
			};
		},
		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;
			}
			this.GetCommentLabel()
		},
		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: {
			onSelectClassify(id) {
				this.$set(this.selected, id, !this.selected[id]) //动态更新视图数据
				let index = this.selectedLabelId.findIndex(item => item == id)
				if (index == -1) {
					this.selectedLabelId.push(id)
				} else {
					this.selectedLabelId = this.selectedLabelId.filter(item => item !== id);
				}
			},
			uploadSuccessHandler(data, index, lists) {
				let r = JSON.parse(data);
				this.msg.CommentImgList.push(r.data);
			},
			change(val) {
				this.msg.CommentScore = val
			},
			GetCommentLabel() {
				this.request2({
						url: "/api/order/GetCommentLabelList",
						data: {},
					},
					(res) => {
						this.LabelIdList = res.data;
					}
				);
			},
			submitForm() {
				this.submitStatus = true;
				if(this.selectedLabelId){
					this.msg.LabelIds=this.selectedLabelId.join(',')
				}
				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 .classifyBigBox {
		margin: 27rpx 0;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 30rpx;
		font-size: 10px;

	}

	.commit-detail .oneClassify {
		display: flex;
		align-items: center;
		padding: 17rpx;
		justify-content: center;
		background: F7F7F7;
		border-radius: 13rpx;
		background: #F5F5F5;
		color: #696969;
		border: 2rpx solid #dedede;
	}

	.commit-detail .selectActive {
		background: #ff547b;
		color: #FFFFFF;
	}

	.commit-detail .tl-btn-120 {
		width: 180rpx;
		padding: 17rpx;
		background: F7F7F7;
		color: #999;
		border-radius: 13rpx;
		border: 2rpx solid #dedede;
		text-align: center;
	}

	.commit-detail .onConfirmFiltrate {
		width: 180rpx;
		padding: 17rpx;
		background: #2851F3;
		color: #FFFFFF;
		border-radius: 13rpx;
		text-align: center;
		margin-left: 20rpx;
	}

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