<template>
	<view class="container_box" style="padding-bottom: 200rpx;">
		<!-- 球馆 -->
		<view class="evaluate_box">
			<!-- 头部信息 -->
			<view class="header">
				<view class="left_box">
					<image class="arena_logo" src="@/static/images/home/bg-1.png" mode=""></image>
				</view>
				<view class="right_box">
					<text class="title">彩虹体育馆</text>
					<text>订单编号：000026</text>
					<text>合计：¥200.15</text>
				</view>
			</view>
			<!-- 评分列表 -->
			<view class="evaluate_list">
				<view v-for="(item, index) in rateList" :key="index" class="evaluate_item">
					<view class="rate">
						<text>{{ item.title }}</text>
						<u-rate :count="5" v-model="item.retaValue" :activeColor="ThemeColor.PrimaryColor" inactiveColor="#D8D8D8" ></u-rate>
					</view>
					<view class="number">{{ item.retaValue }} 分</view>
				</view>
			</view>
		</view>
	
	<!-- 评论 -->
		<view class="user_intro">
			<view class="intro">退款原因：</view>
			<u--textarea v-model="introStr" :placeholder="defaultTip" placeholderClass  height="188rpx" count ></u--textarea>
		</view>
		
		<view class="user_intro">
			<view class="intro">上传图片：</view>
			<u-upload
				:fileList="fileList1"
				@afterRead="afterRead"
				@delete="deletePic"
				name="1"
				multiple
				:maxCount="10"
		 />
		</view>
		
		<view class="footer">
			<view style="flex: 1;">
				<MyButton title="取消" bgColor="#fff" color="#999999" :border="true" />
			</view>
			<view style="flex: 1;">
				<MyButton title="提交评论" />
			</view>
		</view>
	</view>
</template>

<script>
	import MyButton from '@/components/myButton.vue'
	import ThemeColor from '@/utils/themeColor';
	export default {
		components: { MyButton },
		data() {
			return {
				ThemeColor,
				introStr: '',
				fileList1: [], // 上传图片列表
				defaultTip: '请在此写下您的评论',
				rateList: [
					{ title: '环境：', retaValue: 4 },
					{ title: '服务：', retaValue: 5 },
					{ title: '性价比：', retaValue: 3 }
				]
			};
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(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: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 球馆信息
.evaluate_box{
	height: 440rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	box-sizing: border-box;
	padding: 30rpx;
	.header{
		display: flex;
		align-items: center;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #E1E1E1;
		.left_box{
			width: 136rpx;
			height: 136rpx;
			margin-right: 20rpx;
			.arena_logo{
				width: 136rpx;
				height: 136rpx;
			}
		}
		.right_box{
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: column;
			gap: 12rpx;
			font-size: 24rpx;
			color: #666;
			line-height: 32rpx;
			.title{
				color: #333;
				font-size: 28rpx;
				line-height: 36rpx;
			}
		}
	}

	.evaluate_list{
		display: flex;
		flex-direction: column;
		padding-top: 26rpx;
		gap: 36rpx;
		.evaluate_item{
			display: flex;
			align-items: center;
			justify-content: space-between;	
			font-size: 28rpx;
			color: #333;
			line-height: 36rpx;
			.rate{
				display: flex;
				align-items: center;
			}
		}
	}

}

// 评论
.user_intro{
	margin-top: 24rpx;
	padding: 28rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	.intro{
		font-size: 26rpx;
		color: #333;
		margin-bottom: 24rpx;
		line-height: 36rpx;
	}
}

.footer{
	position: fixed;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	background-color: #fff;
	justify-content: space-between;
	gap: 34rpx;
	width: 100%;
	padding: 16rpx 30rpx; 
}
</style>