<template>
	<view class="page flex flex-col">
		<view class="flex-1">
			<view class="title">对这款酒感觉如何？</view>
			<view class="content-box flex justify-between">

				<textarea v-model="form.reviewContent" maxlength="100" placeholder="发布友好的评论..."
					class="textarea-box"></textarea>

				<view class="flex align-center justify-center img-box" @click="handleUpload">

					<image v-if="form.reviewImg" :src="form.reviewImg" style="width: 100%;height:100%"></image>

					<text v-else class="upload-text">上传图片</text>
				</view>
			</view>
			<view class="num-box">
				<view class="tab-box">
					<view class="defTab" :class="{'active':currentTab == 1}" @click="changeTab(1)">快速评分</view>
					<view class="defTab" :class="{'active':currentTab == 2}" @click="changeTab(2)">细节评分</view>
				</view>
				<view v-if="currentTab == 1" class="quick-box">
					<view class="num">{{compositeScore}}</view>
					<view class="rate">
						<uni-rate :touchable="false" :readonly="true" v-model="compositeScore" />
					</view>

					<view class="slider-box">
						<slider min="0" max="5" step="1" :value="compositeScore" @change="sliderAllChange"
							activeColor="#FEE034" backgroundColor="#f2f2f2" block-color="#FEE034" block-size="18" />
					</view>
					<view class="sub">滑动模块，给这款酒评分</view>
				</view>
				<view v-if="currentTab == 2">
					<view class="item-label flex justify-between align-center">
						<text>颜色</text>
						<text>{{form.colorRating}}</text>
					</view>
					<view class="slider-box">
						<slider min="0" max="5" step="1" :value="form.colorRating"
							@change="e => sliderChange(e,'colorRating')" activeColor="#FEE034" backgroundColor="#f2f2f2"
							block-color="#FEE034" block-size="18" />
					</view>

					<view class="item-label flex justify-between align-center">
						<text>香味</text>
						<text>{{form.aromaRating}}</text>
					</view>
					<view class="slider-box">
						<slider min="0" max="5" step="1" :value="form.aromaRating"
							@change="e => sliderChange(e,'aromaRating')" activeColor="#FEE034" backgroundColor="#f2f2f2"
							block-color="#FEE034" block-size="18" />
					</view>

					<view class="item-label flex justify-between align-center">
						<text>口味</text>
						<text>{{form.tasteRating}}</text>
					</view>
					<view class="slider-box">
						<slider min="0" max="5" step="1" :value="form.tasteRating"
							@change="e => sliderChange(e,'tasteRating')" activeColor="#FEE034" backgroundColor="#f2f2f2"
							block-color="#FEE034" block-size="18" />
					</view>
				</view>
			</view>
		</view>
		<view class="flex justify-center">
			<button class="cu-btn btn2" @click="anonymous">
				<image src="@/static/clipboard-tick.png" style="width: 48rpx;height: 48rpx;margin-right: 8rpx;"></image>
				匿名发布</button>
			<button class="cu-btn bg-zd btn" @click="submitForm">发布</button>
		</view>
	</view>
</template>

<script>
	import {
		addReview
	} from '@/api/bar.js'
	import {
		base_url
	} from '@/api/config.js'
	export default {
		data() {
			return {
				form: {
					beerId: '',
					reviewContent: '',
					reviewImg: '',
					aromaRating: 0, // 香味评分
					colorRating: 0, // 颜色评分
					tasteRating: 0, // 口味评分
				},
				compositeScore: 0,
				currentTab: 1,
			};
		},
		onLoad(options) {
			this.form.beerId = options.beerId
		},
		methods: {
			// 上传事件
			handleUpload() {
				// 读取 小程序已经授权的权限
				uni.getSetting({
					success:(res)=> {
						console.log(res)
						// 判断是否拥有此权限进行拉起授权  和 重新授权功能
						if (!res.authSetting['scope.camera']) {
							// 未授权此项权限 拉起授界面
							uni.authorize({
								scope: 'scope.camera',
								success:()=> {
									// 授权成功后 就可以执行 需要权限的  操作函数了
									this.startUpload()	
								},
								fail:(err)=> {
									// 这里必须经过一个confirm 不然也会出现问题（啥问题我也不知道）
									uni.showModal({
										title: '是否重新授权拍照、相册的功能',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success() {
														console.log('开启权限成功');
													},
													fail() {
														console.log('开启权限失败');
													}
												});
											} 
										}
									});
								}
							});
						} else {
							this.startUpload()	
						}
					}
				});
				
			},
			startUpload() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.uploadFile({
							url: base_url + '/bar/common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								type: 'image'
							},
							success: (uploadFileRes) => {
								this.form.reviewImg = JSON.parse(uploadFileRes.data).url
							}
						});
					}
				})
			},
			changeTab(index) {
				this.currentTab = index
			},
			sliderChange(e, key) {
				this.form[key] = +e.detail.value
			},
			sliderAllChange(e) {
				this.compositeScore = +e.detail.value
				this.form.aromaRating = +e.detail.value
				this.form.colorRating = +e.detail.value
				this.form.tasteRating = +e.detail.value
			},
			submitForm() {
				addReview(this.form).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '评论成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			},
			// 匿名发布
			anonymous() {
				this.form.anonymous = true
				addReview(this.form).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '评论成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ slider {
		margin: 0;
	}

	/deep/ .wx-slider-handle-wrapper {
		margin: 0;
		height: 36rpx !important;
	}

	.page {
		background-color: #f6f6f6;
		height: 100vh;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.title {
			font-family: Source Han Sans;
			font-size: 30rpx;
			font-weight: 500;
			line-height: 44rpx;
			color: #0B0E26;
			margin: 32rpx 30rpx;
		}

		.content-box {
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 50rpx 30rpx;
			gap: 20rpx;
			margin-bottom: 32rpx;

			.textarea-box {
				flex: 1;

			}

			.img-box {
				flex-shrink: 0;
				width: 200rpx;
				height: 200rpx;
				background: #D8D8D8;
				border-radius: 20rpx;
			}
		}

		.num-box {
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 20rpx 30rpx;

			.tab-box {
				border-radius: 30rpx;
				background: #F2F2F2;
				padding: 8rpx;
				margin: 0 32rpx 32rpx;
				display: flex;
				justify-content: space-between;

				.defTab {
					width: 50%;
					border-radius: 30rpx;
					background: #F2F2F2;
					display: flex;
					justify-content: center;
					align-items: center;
					font-family: Source Han Sans;
					font-size: 32rpx;
					font-weight: 500;
					color: #0B0E26;
					padding: 16rpx 48rpx;
				}

				.active {
					background-color: #71F4B4;
				}
			}

			.item-label {
				font-family: Source Han Sans;
				font-size: 30rpx;
				font-weight: 500;
				line-height: 44rpx;
				color: #0B0E26;
				padding: 0 34rpx;
				margin-bottom: 18rpx;
			}

			.slider-box {
				// background: #FEE034;
				background-color: #fff;
				border-radius: 20rpx;
				width: 100%;
				box-sizing: border-box;
				padding: 0 34rpx;
				margin-bottom: 34rpx;
			}

			.quick-box {
				text-align: center;
				padding: 32rpx;

				.num {
					font-family: Source Han Sans;
					font-size: 72rpx;
					font-weight: 500;
					line-height: 44rpx;
					color: #5F5F63;
					margin-bottom: 48rpx;
				}

				.rate {
					margin-bottom: 32rpx;
					display: flex;
					justify-content: center;
				}

				.slider-box {
					background-color: #FFF;
					border-radius: 20rpx;
					width: 100%;
					box-sizing: border-box;
				}

				.sub {
					font-family: Source Han Sans;
					font-size: 32rpx;
					font-weight: 500;
					color: #9E9E9E;
					margin-top: 32rpx;
				}
			}
		}

		.btn {
			// width: 654rpx;
			width: 344rpx;
			height: 88rpx;
			border-radius: 24rpx;
			// margin: 30rpx auto;
			font-size: 32rpx;
			font-weight: 500;
			color: #0B0E26;
			font-family: Roboto;
			font-weight: normal;
			text-align: center;
		}
		.btn2 {
			width: 240rpx;
			height: 80rpx;
			font-family: Roboto;
			font-size: 32rpx;
			text-align: center;
			border-radius: 24rpx;
			color: #0B0E26;
			background: #FFFFFF;
			margin-right: 66rpx;
		}
	}
</style>