<template><page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
	<view class="rating-page">
		<view class="border-box">
			<view style="font-size: 32rpx;margin-bottom: 10px;"><span style="color: red;">*</span>食堂 </view>
			<view @click="showCarteen=true" style="width: 100%;height: auto;">
				 <view style="border: 1px solid #dadbde;padding: 12rpx;height: 30px;">
					 {{canteenName}}
				 </view>
			</view>
			<u-action-sheet
					:show="showCarteen"
					:actions="actions"
					title="请选择食堂" 
					@close="showCarteen=false"
					@select="carteenSelect"
			></u-action-sheet> 
		</view>
		<view style="font-size: 32rpx;margin-bottom: 5px;margin-left: 10rpx;"><span style="color: red;">*</span>投诉建议</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 style="font-size: 32rpx;margin-bottom: 5px;margin-top: 20rpx;margin-left: 10rpx;">图片(选填) </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="contact-box">
			<text class="contact-title">请留下您的联系方式</text>
			<u--input
				v-model="contactInfo"
				placeholder="电话号码/电子邮箱（仅工作人员可见）"
				border="bottom" maxlength="11"
			></u--input>
		</view>
  
    <!-- 提交按钮 -->
    <view class="submit-btn">
    	<u-button 
    		shape="squrd"
    		@click="submitFeedback"
    		style="margin-bottom: 10px;font-size: 28rpx;"
    		:customStyle="{
    		  width: '100%',
    		  height: '88rpx',
    		  background: '#ff6633',
    		  color: '#ffffff',
    		  border: 'none'
    		}"
    	>提交</u-button>
    	<u-button
    		shape="squrd"
    		@click="goHistory"
    		:customStyle="{
    		  width: '100%',
    		  height: '88rpx',
    		  background: '#fff',
    		  color: '#000',
    		  border: '1px solid #000'
    		}" style="font-size: 28rpx;"
    	  >历史记录</u-button>
    </view>
  </view>
</template>

<script>
import { getAllCanteenStallApi,postCanteenPlaintApi } from "@/api/mine/index.js" 
import { pathToBase64, base64ToPath } from 'image-tools';
import { uploadBase64 } from "@/api/upload"

export default {
	data() {
		return {
			fontValue:uni.getStorageSync('fontSize') || 8,
			carteenName:"",
			showCarteen:false,
			actions:[],
			canteenId:"",
			canteenName:"",
			currentTab: 0,
			content: '',
			fileList: [],
			contactInfo: '',
			description:""
		}
	},
	onLoad() {
		this.getAllCanteenStall()
	},
	methods: {
		//获取食堂列表
		async getAllCanteenStall() {
			const res = await getAllCanteenStallApi({})
			let arr=[]
			if(res.length>0){
				res.forEach(item=>{
					let obj={
						id:item.canteenId,
						name:item.canteenName
					}
					arr.push(obj)
				})
			} 
			this.actions = arr  
		},
		carteenSelect(e){
			console.log(e)
			this.canteenId = e.id
			this.canteenName = e.name
		},
		//提交按钮
		async submitFeedback() {
			console.log(this.fileList)
			if(this.canteenId==""){
				uni.$u.toast('请选择食堂')
				return
			} 
			if(this.content==""){
				uni.$u.toast('请认真填写建议')
				return
			}
			let arr = []
			this.fileList.forEach(item=>{
				arr.push(item.url)
			})
			let param = {
				  "canteenId": this.canteenId,
				  "canteenName": this.canteenName,
				  "complaintPictureList": arr,
				  "content": this.content,
				  "mobile": this.contactInfo,
				  // "starLevel": 6,
				  "custId": uni.getStorageSync('custId')
			}
			console.log(param)
			const res = await postCanteenPlaintApi(param)
			if(res.code==200){
				uni.showToast({
					title: '提交成功',
					icon: 'none'
				});
				setTimeout(()=>{
					uni.navigateBack()
				},800)
			}
		},
		//历史记录
		goHistory(){
			uni.navigateTo({
				url: `/pages/feedback/history`
			})
		},
		// 新增图片
		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.fileNameUrl,
				})
			  );
			  fileListLen++;
			}
		},
		//上传接口
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				this.imgToBase64(url).then(base64 => {
					 let param = {
						"MERCHANT-ID":"378915229716713472",
						"uploadKey":'system',
						"base64File":base64
					 } 
					uploadBase64(param).then(res => {
						if(res.code==200){
							resolve(res.data) 
						}
					})
				})
			});
		},
		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>
/deep/.u-action-sheet__item-wrap {
	overflow: auto;
	max-height: 50vh;
}
.rating-page { 
  height: 94vh;
  overflow-y: auto;
  background-color: #ffffff;
  padding: 40rpx;
  padding-bottom: 100rpx;

 .border-box{
   background-color: #ffffff;
   // padding: 16rpx;
   border-radius: 8px;
   margin-bottom: 20rpx;
 }
  .contact-box {
    margin-top: 40rpx;
    background-color: #ffffff;
    padding: 20rpx 16rpx 16rpx 16rpx;
    border-radius: 8px;

    .contact-title {
      font-size: 28rpx;
      color: #333333;
      margin-bottom: 20rpx;
    }
  }
  .detail-rating {
	  margin-top: 40rpx;
    .rating-item {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;

      .item-label {
        width: 200rpx;
        font-size: 28rpx;
        color: #333333;
      }

      .hearts-row {
        display: flex;
        gap: 0rpx;
      }
    }
  }

  .comment-box {
    margin-top: 20rpx;
	height: auto;
	background: #fff;
	padding-bottom: 10px;
  }
	
	.submit-btn {
	  padding: 20rpx 30rpx;
		margin-top: 20px;
	}
   
}
  .upload-box {
    margin-top: 30rpx;
	margin-left: 10px;
	display: flex;
	

    .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>