<template><page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="rating-page">
		<view style="margin: 20rpx 0;">
			<text style="font-size: 30rpx;font-weight: bold;">{{dishesData.stallName}}</text> 
		</view>
		<view style="width: 100%;height: 10vh;margin: 20rpx 0;display: flex;">
			<view v-for="n in 5" :key="n" @click="changAllStar(n)" style="width: 19%;display: flex;flex-direction: column;align-items: center;">
				<u-icon :name="n <= starLevel ? 'star-fill' : 'star-fill'"
					:color="n <= starLevel ? '#ff9933' : '#ccc'" size="50"></u-icon>
					<span v-if="n==1">非常差</span>
					<span v-if="n==2">较差</span>
					<span v-if="n==3">一般</span>
					<span v-if="n==4">推荐</span>
					<span v-if="n==5">超赞</span>
			</view>
		</view>
		<!-- 分项评分 -->
		<view class="detail-rating">
			<view class="rating-item" v-for="(item, index) in dishesList" :key="index"> 
				<image :src="item.goodsImgUrl" style="width: 100rpx;height: 100rpx;"></image>
				<text class="item-label">{{ item.goodsName }}</text>
				<view class="hearts-row">
				  <u-icon v-for="n in 5" :key="n" :name="n <= item.starValue ? 'star-fill' : 'star-fill'"
					:color="n <= item.starValue ? '#ff9933' : '#ccc'" size="36" @click="changStar(item,n)"></u-icon>
				</view>
			</view>
		</view>
		<!-- 评价输入 -->
		<view class="comment-box">
			<view>
				<u--textarea
					v-model="description" maxlength="200"
					placeholder="口味、服务、环境如何？有哪些想要提的建议？"
					height="120" style="font-size: 24rpx;background: transparent;"
				></u--textarea>
			</view>
			<!-- 图片上传 -->
			<view class="upload-box">
				<!-- <view style="font-size: 32rpx;margin-bottom: 5px;">图片(选填) </view> -->
			  <u-upload
			    :fileList="fileList"
			    @afterRead="afterRead"
			    @delete="deletePic"
			    :maxCount="5"
			    multiple
			  >
			    <view class="upload-btn">
			      <u-icon name="camera" size="44" color="#666666"></u-icon>
			      <text class="upload-text">添加图片</text>
			    </view>
			  </u-upload>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-btn" @click="sumbitEvaluate">
		  <u-button
			text="发布评价"
			shape="square"
			:customStyle="{
			  width: '100%',
			  height: '88rpx',
			  background: '#ff9933',
			  color: '#ffffff',
			  border: 'none',
			  fontSize: '26rpx'
			}"
		  ></u-button>
		</view>
  </view>
</template>

<script>
import { addMenuEvaluaOrderApi } from '../../api/order/index'
import { pathToBase64, base64ToPath } from 'image-tools';
import { uploadBase64 } from "@/api/upload"
import config from '@/config'
import { getToken } from '@/utils/auth'
export default {
	data() {
		return {
			fontValue:uni.getStorageSync('fontSize') || 8,
			dishesData:{},
			dishesList:[],
			overallRating: 5,
			ratingTexts: ['非常差', '较差', '一般', '推荐', '超赞'],
			ratingItems: [
				{ label: '口味', value: 5 },
				{ label: '环境', value: 0 },
				{ label: '服务', value: 0 }
			],
			description: '',
			starLevel:0,
			fileList: [],
			sumbitStatus:false,
		}
	},
	onLoad(options) {
		options = JSON.parse(options.params)
		console.log(options)
		this.dishesData=options;
		this.dishesList = this.dishesData.orderDetailList;
		this.dishesList.forEach(item=>{
			item.starValue = 0
		})
	},
	methods: {
		changStar(item,n){
			item.starValue=n;
			this.$forceUpdate()
		},
		changAllStar(n){
			this.starLevel=n;
			this.$forceUpdate()
		},
		sumbitEvaluate(){
			if(!this.sumbitStatus){
				if(this.description==""){
					uni.$u.toast('请填写评论！')
					retrun
				}
				this.sumbitStatus = true
				let arr = this.dishesList.map(item=>{
					let obj={
						mealId:item.goodsId,
						mealType:item.detailType,
						starLevel:item.starValue,
						description:this.description
					}
					return obj
				})
				let arr2 = []
				this.fileList.forEach(item=>{
					arr2.push(item.url)
				})
				let param ={
					"description":this.description,
					"orderId":this.dishesData.orderId,
					"orderEvaluaType":this.dishesData.orderType,
					// "orderEvaluaType":1,
					"starLevel": this.starLevel,
					"stallId":this.dishesData.stallId,
					"detailList":arr,
					"pictureList":arr2
				}
				console.log(param) 
				addMenuEvaluaOrderApi(param).then((res)=>{
					console.log('?? ~ getList ~ res:', res)
					uni.navigateBack({
						delta: 1
					});
					this.sumbitStatus = false
				}).catch(()=>{
					this.sumbitStatus = false
				})
			}
			 
		},
		// 新增图片
		async afterRead(event) {
				  console.log(event)
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});  
				});
				console.log(lists)
				for (let i = 0; i < lists.length; i++) {
				  const result = await this.uploadFilePromise(lists[i].url);
				  console.log(result)
				  let item = this[`fileList${event.name}`][fileListLen];
				  this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
					  status: "success",
					  message: "",
					  url: result.url,
					})
				  );
				  fileListLen++;
				}
		},
		//上传接口
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: config.baseUrl+`/file/upload`, //服务器地址 
					filePath: url,
					formData: {
						"fileType":'face', 
					},
					header: {
						'Authorization': 'Bearer ' + getToken(), 
					},
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data)   
						if(res.code==200){
							resolve(res.data)
						}else{
							uni.$u.toast('上传失败');
						}
					},
					fail: err => {
						uni.$u.toast('上传失败');
						console.log(err)
					}
				});  
			});
		},
		imgToBase64(data) {
		  return new Promise((resolve, reject) => {
					pathToBase64(data).then(base64 => {
						resolve(base64)
					}).catch(error => {
						console.error(error)
						reject(error)
					})
		  })
		},
		deletePic(event) {
				this.fileList.splice(event.index, 1);
		},
		
	}
	
	
	
}
</script>

<style lang="scss" scoped>
.rating-page {
  height: 94vh;
  overflow-y: auto;
  background-color: #ffffff;
  padding: 40rpx;
  // padding-bottom: 120rpx;

 

  .detail-rating {
	  padding-top: 60rpx;
	  padding-bottom: 40rpx;
    .rating-item {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;

      .item-label {
        width: 200rpx;
		padding-left: 10rpx;
        font-size: 28rpx;
        color: #333333;
      } 
      .hearts-row {
        display: flex;
        gap: 0rpx;
      }
    }
  }

  .comment-box {
    margin-top: 40rpx;
	height: auto;
	background: #e0e0e0;
	padding-bottom: 10px;
	margin-bottom: 20px;
  }

  .submit-btn {
    // position: fixed;
    // left: 30rpx;
    // right: 30rpx;
    // bottom: 40rpx;
  }
}
  .upload-box {
    margin-top: 30rpx;
	margin-left: 10px;
	

    .upload-btn {
      width: 160rpx;
      height: 160rpx;
      // background-color: #f7f8fa;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
	  border: 1px dashed #000;
      border-radius: 8rpx;

      .upload-text {
        font-size: 24rpx;
        color: #666666;
        margin-top: 10rpx;
      }
    }
  }

::v-deep .u-textarea {
  background-color: #f7f8fa;
  border-radius: 8rpx;
  padding: 20rpx;
}
</style>