<!--
 * @Author: ch
 * @Date: 2022-06-20 14:55:54
 * @LastEditors: ch
 * @LastEditTime: 2022-06-23 17:13:29
 * @Description: file content
-->
<template>
	<view>
		<view class="box" v-for="(item, idx) in list" :key="item.productId">
			<!-- {{item.isEdit}} -->
			<BsCommentGoodsInfo :goods="item" />
			
			<BsCommentSubmit v-if="!item.id" :commentDetail="item" :type="COMMENT.TYPE.COMMENT" 
				@submit="submitComment($event,idx)" @editChang="editChange($event, idx)"/>
			<!-- 已评价过显示详情 -->
			<template v-else>
				<BsCommentInfo :commentDetail="item"/>
				<SubmitFollowComment :commentDetail="item" 
					@submit="submitFollowComment($event, idx)" 
					@editChange="editChange($event, idx)" />
				<BsCommentMerchant v-if="item.merchantComment" :merchantComment="item.merchantComment"/>
				<BsCommentThumbup :commentDetail="item"/>
			</template>
		</view>	
	</view>
</template>
<script>
import { ApiGetOrderCommentDetail } from "@/common/api/comment";
import UiWhiteBox from "@/components/UiWhiteBox.vue";
import UiButton from "@/components/UiButton.vue";
import BsCommentSubmit from "@/components/BsCommentSubmit.vue";
import BsCommentGoodsInfo from '@/components/BsCommentGoodsInfo.vue';
import BsCommentInfo from '@/components/BsCommentInfo.vue';
import BsCommentMerchant from '@/components/BsCommentMerchant.vue';
import BsCommentThumbup from '@/components/BsCommentThumbup.vue';
import SubmitFollowComment from './modules/SubmitFollowComment.vue';
import COMMENT from '@/common/dicts/comment';
export default {
	components: {
		UiWhiteBox,
		UiButton,
		BsCommentSubmit,
		BsCommentGoodsInfo,
		BsCommentInfo,
		BsCommentMerchant,
		BsCommentThumbup,
		SubmitFollowComment,
	},
	data() {
		return {
			COMMENT,
			list: [],
			orderId: this.$Route.query.orderId,
			showFollowComment: false,
		};
	},
	onShow() {
		this.getCommentDetail();
	},
	onBackPress(){
		alert(2222)
		const flag = this.list.find(i => i.isEdit == true);
		alert(1111)
		if(flag){
			uni.showModal({
				content : '您正在进行商品评价，退出后评价的内容将不保存',
				cancelTxt : '我再想想',
				cancelColor : '#999',
				confirmColor : '#3A83FB',
				success: async ({confirm}) => {
					if(confirm){
						
					}
				}
			})
		}
	},
	methods: {
		async getCommentDetail() {
			const { error, result } = await ApiGetOrderCommentDetail({
				orderId: this.orderId,
			});
			if (error) {
				uni.$u.toast(error.message);
				return false;
			}
			this.list = result;
		},
		submitComment(result, idx){
			this.$set(this.list, idx, {...this.list[idx],...result});
		},
		editChange(isEdit, idx){
			this.$set(this.list[idx], 'isEdit', isEdit);
		},
		submitFollowComment(result, idx){
			this.$set(this.list[idx],'followComment',{
				...this.list[idx].followComment,
				...result
			});
			
		},
		beforeRouteLeave(to, from, next){
			console.log(to,from,'beforeRouteLeavebeforeRouteLeave')
		}
	},
};
</script>
<style lang="scss">
page {
	background: $color-grey1;
}
</style>
<style lang="scss" scoped>
.box{
	background: $color-grey0;
	margin-bottom: 20rpx;
	padding:40rpx;
}
</style>

