<!--
 * @Author: ch
 * @Date: 2022-06-20 16:36:14
 * @LastEditors: ch
 * @LastEditTime: 2022-06-23 16:56:09
 * @Description: file content
-->
<template>
	<view>
		<view class="rate" v-if="type === COMMENT.TYPE.COMMENT">
			<text class="rate--title">满意度评分</text>
			<u-rate :count="5" v-model="rate" size="47rpx" activeColor="#FFA35B" inactiveColor="#DDD"></u-rate>
			<text class="rate--desc">满意</text>
		</view>
		<textarea class="textarea" placeholder="从多个维度评价，可以帮助更多想买的人哦~" 
			:maxlength="500" v-model="commentContent"></textarea>
		<u-upload  class="upload" 
			@afterRead="handleUpdateImg" @delete="handleDelImg" 
			:fileList="fileList" :maxCount="6" :previewFullImage="true">
		</u-upload>
		<view class="footer">
			<UiButton type="solid" :disable="isVerify" @click="handleSubmit">发表评价</UiButton>
		</view>
	</view>
</template>
<script>
import UiButton from '@/components/UiButton.vue';
import {ApiPostComment} from '@/common/api/comment';
import COMMENT from '@/common/dicts/comment';
import {uploadFileOss} from '@/common/utils';
export default {
	components: { UiButton },
	props:{
		type : {
			type : String | Number,
			default : COMMENT.TYPE.COMMENT
		},
		commentDetail : {
			type : Object,
			default : ()=> ({})
		}
	},
	data(){
		return {
			COMMENT,
			rate : 0,
			commentContent : '',
			fileList : []
		}
	},
	computed:{
		isVerify(){
			if(this.type === COMMENT.TYPE.COMMENT){
				return !this.rate;
			}else{
				return !this.commentContent;
			}
		},
		isEdit (){
			return (this.rate || this.commentContent || this.fileList.length > 0) ? true : false
		}
	},
	watch:{
		isEdit(){
			this.$emit('editChang',this.isEdit)
		}
	},
	methods:{
		async handleSubmit(){
			let data = {
				commentContent : this.commentContent,
				commentType : this.type,
				orderProductId : this.commentDetail.orderProductId,
				pictureUrl : this.fileList.map(i => i.url).join(',')
			}
			if(this.type === COMMENT.TYPE.COMMENT){
				data.productId = this.commentDetail.productId;
				data.commentScore = this.rate;
			}else if(this.type === COMMENT.TYPE.FOLLOW_COMMENT){
				data.originId = data.parentId = this.commentDetail.id;
			}
			const {error, result} = await ApiPostComment(data);
			if(error){
				uni.$u.toast(error.message);
				return false;
			}
			this.$emit('submit',result);
		},
		async handleUpdateImg(val){
			const {error, result} = await uploadFileOss(val.file, {
				configId : 'account-comment',
				serviceName : 'comment'
			})
			if(error){
				uni.$u.toast(error);
			}
			this.fileList.push({url : result});
		},
		handleDelImg(target){
			this.fileList.splice(target.index, 1)
		}
	}
	
}
</script>
<style lang="scss" scoped>
.rate{
	display: flex;
	margin: 50rpx 0;
	align-items: center;
	&--title{
		font-size: 28rpx;
		margin-right: 30rpx;
	}
	&--desc{
		font-size: 30rpx;
		color: #999;
		margin-left: 40rpx;
	}
}
.textarea{
	height: 200rpx;
	margin-bottom: 40rpx;
}
.footer{
	width: 100%;
	text-align: right;
	margin-top: 50rpx;
}
</style>