<template>
	<view class="whole">
		<view class="comment">
			
			<view class="starBox flex1">
				<text style="margin-right: 20rpx;">描述相符</text>
				<up-rate v-model="info.score" :active-color="Color" inactive-color="#ccc" @change="onScoreChange($event)" />
				<text style="font-weight: 600;">&nbsp;&nbsp;{{rateText[info.score]}}</text>
			</view>
			
			<!-- 文字评价 -->
			<view class="descBox">
				<view class="textarea">
					<up-textarea v-model="info.comment" count placeholder="填写评价，可以帮助更多想买的人哦~" style="font-size: 28rpx;" :height="70" :maxlength="500"></up-textarea>
				</view>
			</view>
			
			<view class="imgBox">
				<view class="imgList" v-for="(it, i) in info.imgs" :key="i">
					<image v-if="it.type === 1" :src="it.url" mode="aspectFill" class="img" @click="handlePreView(it)"></image>
					<image v-if="it.type === 2" :src="it.img_video" mode="aspectFill" class="img"></image>
					<text @click="deleteImage(i)" class="close iconfont icon-shanchu"></text>
					<view class="play flex" v-if="it.type === 2" @click="handlePreView(it)">
						<up-icon name="play-circle-fill" :size="30" color="#fff" />
					</view>
				</view>
				<view @click="toUpload()" class="plus flex">
					<text class="iconfont icon-paizhao"></text>
					<text>添加图视频</text>
				</view>
			</view>
			
			<view class="comment-btn flex" @click="submitBtn">提交评价</view>
			
			<video-dialog :url="videoUrl" :show="showVideo" @close="showVideo = false"></video-dialog>
			
			<!-- 隐私协议弹窗 -->
			<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
			
		</view>
	</view>
	
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { post } from '@/Api/request.js'
	import { showToast, judgePrivacy } from '@/components/common.js'
	import { Style } from '@/utils/list.js'
	import privacyPopup from '@/components/privacyPopup/index.vue'
	import videoDialog from '@/components/videoDialog/index.vue'
	
	export default {
		components: {
			privacyPopup, videoDialog
		},
		setup() {
			const data = reactive({
				urls: '/api/v1/upload',
				video: '/api/v1/upload/video',
				Color: uni.getStorageSync('theme_color'),
				showPrivacy: false,
				showVideo: false,
				videoUrl: '',
				info: {
					score: 0,
					comment: '',
					imgs: []
				},
				rateText: {
					'0': '',
					'1': '非常差',
					'2': '差',
					'3': '一般',
					'4': '满意',
					'5': '超赞'
				},
				id: 0
			})

			const onScoreChange = (val) => {
				data.info.score = val.value
			}
			
			async function toUpload() {
				if(await judgePrivacy()) {
					data.showPrivacy = true
					return false
				}
				wx.showActionSheet({
					itemList: ['上传图片', '上传视频'],
					success: function(res){
						if(res.tapIndex === 0) {
							uploadImg()
						} else if(res.tapIndex === 1) {
							uploadVideo()
						}
					}
				})
			}
			
			// 上传图片
			function uploadImg() {
				wx.chooseImage({
					success(res) {
						const tempFilePaths = res.tempFilePaths
						uni.showLoading({
							title: '正在上传...',
							mask: true
						})
						res.tempFilePaths.forEach((item) => {
							wx.uploadFile({
								url: data.urls,
								filePath: item,
								name: 'file',
								header: {
									Authorization: uni.getStorageSync('token') || '',
									accept: 'application/json',
									appid: uni.getStorageSync('appId')
								},
								success(req) {
									var img = JSON.parse(req.data).data
									data.info.imgs.push({
										type: 1,
										url: img.link
									})
									uni.hideLoading()
								},
								fail() {
									uni.hideLoading()
								}
							})
						})
					},
					fail() {
					}
				})
			}
			
			const uploadVideo = () => {
				wx.chooseVideo({
					sourceType: ['album', 'camera'],
					maxDuration: 60,
					camera: ['front', 'back'],
					compressed: true,
					success(res) {
						let tempFilePath = res.tempFilePath
						console.log(tempFilePath)
						let duration = res.duration
						let size = parseFloat(res.size / 1024 / 1024)

						if (parseFloat(size) > 10) {
							wx.showToast({
								title: '上传的视频大小超限，请重新上传',
								icon: 'none'
							})
						} else {
							uploadFile(tempFilePath)
						}
					}
				})
			}
			
			const uploadFile = (tempFilePath) => {
				uni.showLoading({
					title: '正在上传...',
					mask: true
				})
				wx.uploadFile({
					url: data.video,
					filePath: tempFilePath,
					name: 'file',
					header: {
						Authorization: uni.getStorageSync('token') || '',
						accept: 'application/json',
						appid: uni.getStorageSync('appId')
					},
					success(res) {
						var video = JSON.parse(res.data).data
						data.info.imgs.push({
							type: 2,
							url: video.link,
							img_video: video.link + '?x-oss-process=video/snapshot,t_1000,m_fast'
						})
						uni.hideLoading()
					},
					fail: function(err) {
						uni.hideLoading()
						uni.showToast({
							title: '视频上传失败',
							icon: 'none'
						}, 2000)
					}
				})
			}
			
			const deleteImage = (index) => {
				data.info.imgs.splice(index, 1)
			}
			
			const handlePreView = (item) => {
				if (item.type === 1) {
					uni.previewImage({
						current: item.url,
						urls: [item.url]
					})
				} else {
					data.showVideo = true
					data.videoUrl = item.url
				}
			}

			const submitBtn = () => {
				if(!data.info.score) {
					showToast('请点亮小星星喔')
					return
				}
				let params = {
					comment: data.info.comment,
					stars: data.info.score,
					material: data.info.imgs
				}
				post('/api/v1/orderComment/add/' + data.id, params).then((res) => {
					wx.showToast({
						title: '评价成功',
						icon: 'success',
						duration: 1000,
						mask: true,
						success() {
							setTimeout(() => {
								uni.navigateBack({ delta: 1 })
							}, 1000)
						}
					})
				})
			}
			return {
				...toRefs(data),
				uploadImg,
				uploadVideo,
				deleteImage,
				submitBtn,
				onScoreChange,
				handlePreView,
				toUpload
			}
		},
		onLoad(options) {
			this.id = options.id || 0
		}
	}
</script>

<style lang="scss" scoped>
	.comment{
		position: relative;
		padding: 30rpx;
		box-sizing: border-box;
		.descBox{
			margin: 40rpx 0;
			.textarea{
				border: 1rpx solid #E5E5E5;
				font-size: 28rpx;
				color: #333;
				width: 100%;
				box-sizing: border-box;
				overflow: auto;
			}
			.text{
				font-size: 24rpx;
				color: #676767;
				text{
					font-size: 28rpx;
					color: #333;
					margin-right: 10rpx;
				}
			}
		}
		&-btn {
			width: 88%;
			margin: 40rpx auto;
			background-color: v-bind('Color');
			color: #fff;
			height: 80rpx;
			font-size: 30rpx;
			border-radius: 80rpx;
			position: relative;
		}
	}
	.whole{
		width: 100%;
		font-size: 28rpx;
		color: #333;
		.flex{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.flex1{
			display: flex;
			align-items: center;
		}
		.starBox {
			margin-bottom: 40rpx;
			line-height: 50rpx;
		}
	}
	
	.imgBox{
		flex-wrap: wrap;
		font-size: 24rpx;
		display: flex;
		.imgList{
			width: 160rpx;
			height: 160rpx;
			margin: 0 20rpx 20rpx 0;
			position: relative;
			.img{
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
			.close{
				position: absolute;
				right: -17rpx;
				top: -17rpx;
				z-index: 8;
				font-size: 20px;
				background-color: #fff;
				border-radius: 50%;
			}
			.play{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.35);
				border-radius: 8rpx;
				z-index: 1;
			}
		}
		.plus{
			background-color: #fff;
			border-radius: 8rpx;
			flex-direction: column;
			width: 160rpx;
			height: 160rpx;
			box-sizing: border-box;
			margin: 0 20rpx 20rpx 0;
			font-size: 22rpx;
			color: #999;
			.iconfont{
				font-size: 24px;
			}
		}
	}
	::v-deep .van-field__control {
		height: 70px !important;
	}
</style>
