<template>
	<view class="page">
		<!-- 导航栏 -->
		<u-navbar 
			title="评价导游" 
			:border-bottom="false" 
			:background="bgc" 
			back-icon-color="#262B37" 
			title-color='#262B37'
			title-size='36' 
			height='46' 
			id="navbar"
		>
		</u-navbar>
		<!-- 提示栏 -->
		<view class="tip-bar">
			<text>提交评价或建议，帮助导游做得更好~</text>
		</view>
		<!-- 评价主体 -->
		<view class="eval-container">
			<!-- 匿名提交 -->
			<view class="anonymous-wrap">
				<text>您对导游满意吗？</text>
				<u-checkbox 
					v-model="isAnonymous" 
					shape="circle" 
					size="24rpx" 
					label="匿名提交" 
					label-size="26rpx"
				>匿名提交</u-checkbox>
			</view>
			<!-- 商家信息 -->
			<view class="merchant-info">
				<image class="merchant-img" v-if="jdobj.photo" :src="jdobj.photo" mode="aspectFill"></image>
				<image class="merchant-img" v-else src="/static/merchant.png" mode="aspectFill"></image>
				<text class="merchant-name">{{jdobj.name == undefined ? '--' : jdobj.name}}</text>
			</view>
			  <!-- 评价主体 -->
			<view class="eval-container" style="padding: 0;margin: 0;margin-top: 20rpx;">
			    <!-- 修改后的评分项 -->
			    <view class="score-item" v-for="(item, index) in scoreList" :key="index">
			        <text class="score-label">{{ item.label }}</text>
			        <view class="stars-wrap">
			            <u-icon 
			                v-for="sIdx in 5" 
			                :key="sIdx"
			                name="star-fill" 
			                :color="sIdx <= item.score ? '#FFC107' : '#eee'" 
			                size="36rpx"
			                @click="setScore(index, sIdx)"
			                class="star"
			            ></u-icon>
			        </view>
			        <text class="score-text">{{ item.text }}</text>
			    </view>
			</view>
			<!-- 评价输入 -->
			<view class="eval-input">
				<u-icon name="chat" color="#999" size="32rpx"></u-icon>
				<textarea v-model="contxt" placeholder="说说怎么样，给大家参考" placeholder-style="color:#999"></textarea>
			</view>
			<!-- 上传附件 -->
			<view class="upload-wrap">
				<view class="upload-item">
					<view class="" style="position: relative;" v-for="(item,index) in imglist" :key="index">
						<image :src="item" style="width: 200rpx;height: 200rpx;border-radius: 10rpx;" mode="aspectFill"></image>
						<text @click="btndel(index)" style="font-size: 44rpx;display: block;width: 40rpx;height: 40rpx;color: #fff;background-color: red;position: absolute;right: -20rpx;top: -20rpx;line-height: 40rpx;border-radius: 50%;text-align: center;">×</text>
					</view>
					<image  @click="getimage" src="https://api.ccttiot.com/smartmeter/img/static/u3z28zohbXoJ5kWcR6X1" style="width: 200rpx;height: 200rpx;filter: grayscale(100%);" mode=""></image>
				</view>
			</view>
			<!-- 底部提交按钮 -->
			<button class="submit-btn" @click="btntj">提交</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				isAnonymous: false,
				// 评分数据
				scoreList: [
					{ label: '综合', score: 5, text: '非常满意' },
					// { label: '位置', score: 5, text: '非常满意' },
					// { label: '设施', score: 5, text: '非常满意' },
					// { label: '服务', score: 5, text: '非常满意' },
					// { label: '卫生', score: 5, text: '非常满意' }
				],
				id:'',
				jdobj:{},
				token:'',
				imglist:[],
				contxt:'',
				jlflag:true
			}
		},
		onLoad(e) {
			console.log(e);
            this.id = e.id
			this.getxq()
			this.getqiniuyun()
		},
		methods: {
			// 点击进行提交
			btntj(){
				if(this.contxt == ''){
					uni.showToast({
						title: '评价不能为空',
						icon: 'none',
						duration: 3000
					})
					return 
				}
				if(this.jlflag == false){
					return
				}
				this.jlflag = false
				const picture = this.imglist.join(',')
				let data = {
					bstType:5,
					bstId:this.id,
					content:this.contxt,
					mediaUrl:picture,
					rating:this.scoreList[0].score,
					anonymous:this.isAnonymous,
					
				}
				this.$u.post(`/app/comment/add`,data).then(res =>{
					if(res.code == 200){
						uni.showToast({
							title: '评价成功',
							icon: 'success',
							duration: 3000
						})
						setTimeout(()=>{
							uni.navigateBack()
							this.jlflag = true
						},1500)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 3000
						})
						this.jlflag = true
					}
				})
			},
			// 点击评分
			 setScore(index, score) {
			    this.scoreList[index].score = score;
			    const textMap = ['非常不满意', '不满意', '一般', '满意', '非常满意'];
			    this.scoreList[index].text = textMap[score];
				console.log( this.scoreList);
			},
			// 查询详情
			getxq(){
				this.$u.get(`/app/tourGuide/detail/${this.id}`).then(res =>{
					if(res.code == 200){
						this.jdobj = res.data
					}
				})
			},
			// 获取七牛云上传token
			getqiniuyun(){
				this.$u.get("/common/qiniuToken").then((res) => {
					if (res.code == 200) {
						this.token = res.data
					}
				})
			},
			// 点击删除图片
			btndel(index){
				this.imglist.splice(index, 1)
			},
			getimage(e){
				if(this.imglist.length >= 9){
					return uni.showToast({ title: '最多选择九张图片', icon: 'none',duration:3000 })
				}
				let _this = this
				// 使用 uni.chooseMedia 从手机相册选择图片和视频
				uni.chooseMedia({
					count: 9 - this.imglist.length, // 剩余可选择的数量
					mediaType: ['image'], // 允许选择图片和视频
					sourceType: ['album', 'camera'], // 允许从相册和相机选择
					camera: 'back', // 默认后置摄像头
					success(res) {
						const tempFiles = res.tempFiles
						tempFiles.forEach(file => {
							wx.uploadFile({
								url: 'https://up-z2.qiniup.com',
								name: 'file',
								filePath: file.tempFilePath, //文件路径
								formData: {
									token: _this.token, //后端返回的token
									key:file.tempFilePath //传的文件名称
								},
								success: function(res) {
									let str = JSON.parse(res.data)
									let fileUrl = 'https://api.ccttiot.com/' + str.key
									// 添加到媒体列表
									_this.imglist.push(fileUrl)
								}
							})
						})
					},
					fail(err) {
						console.log('选择照片失败:', err)
						uni.showToast({
							title: '选择失败',
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
		}
	}
</script>

<style lang="less">
	page {
		background: #f5f7fa;
	}

	/* 提示栏 */
	.tip-bar {
		background: #fffbe6;
		color: #fa8c16;
		font-size: 30rpx;
		padding: 16rpx 20rpx;
	}

	/* 评价主体容器 */
	.eval-container {
		background: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 24rpx;
		// box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
	}

	/* 匿名提交 */
	.anonymous-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 24rpx;
	}

	/* 商家信息 */
	.merchant-info {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		.merchant-img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 8rpx;
			background: #eee;
			margin-right: 16rpx;
		}
		.merchant-name {
			font-size: 28rpx;
			color: #333;
		}
	}

	/* 评分项 */
	.score-item {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    margin-bottom: 30rpx;
	    .score-label {
	        font-size: 28rpx;
	        color: #333;
	        width: 120rpx;
	    }
	    .stars-wrap {
	        display: flex;
	        gap: 12rpx;
	        flex: 1;
	        .star {
	            cursor: pointer;
	            transition: color 0.2s ease;
	            // 增加hover效果，提升用户体验
	            &:hover {
	                color: #FFD700 !important; // 悬浮时颜色更亮
	                transform: scale(1.1); // 轻微放大
	            }
	        }
	    }
	    .score-text {
	        font-size: 28rpx;
	        color: #ff9500;
	        font-weight: 500;
	        width: 150rpx;
	        text-align: right;
	    }
	}
	/* 评价输入 */
	.eval-input {
		display: flex;
		align-items: flex-start;
		gap: 16rpx;
		padding: 20rpx;
		background: #f5f5f5;
		border-radius: 12rpx;
		margin-bottom: 24rpx;
		textarea {
			flex: 1;
			font-size: 30rpx;
			color: #333;
			min-height: 80rpx;
		}
	}
	/* 上传附件 */
	.upload-wrap {
		display: flex;
		gap: 40rpx;
		margin-bottom: 30rpx;
		.upload-item {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			gap: 24rpx;
			font-size: 24rpx;
			color: #666;
		}
	}
	/* 提交按钮 */
	.submit-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background: #ff9500;
		color: #fff;
		font-size: 32rpx;
		border-radius: 16rpx;
	}
</style>