<template>
	<view class="container" :class="[`${themeInfo.theme}-theme`]">
		<navBar class="navBar"></navBar>
		<view class="container-form">
			<view class="form">
				<view class="topBox">
					{{ $t('evaluate.customerEvaluation') }}
				</view>
				<view class="midBox">
					<!-- Overall rating评分 -->
					<view class="midBox-detail">
						<view class="circle"></view>
						<view class="rate">{{ $t("evaluate.overallRating") }}</view>
						<uv-rate 
							class="uv-rate"
							:count="5" 
							v-model="rate.overallRating"
							:activeColor="themeInfo.activeColor"
							inactiveColor="rgb(13, 32, 49)" 
							size="40rpx"
						>
						</uv-rate>
					</view>
					<!-- User experience -->
					<view class="midBox-detail-1">
						<view class="circle"></view>
						<view class="rate">{{ $t("evaluate.userExperience") }}</view>
						<view class="border"></view>
					</view>
					<!-- Hospitality评分 -->
					<view class="midBox-detail-2">
						<view class="line"></view>
						<view class="rate">{{ $t("evaluate.Hospitality") }}</view>
						<uv-rate 
							class="uv-rate"
							:count="5" 
							v-model="rate.Hospitality" 
							:activeColor="themeInfo.activeColor"
							inactiveColor="rgb(13, 32, 49)" 
							size="40rpx"
						>
						</uv-rate>
					</view>
					<!-- Cleanliness评分 -->
					<view class="midBox-detail-2">
						<view class="line"></view>
						<view class="rate">{{ $t("evaluate.cleanliness") }}</view>
						<uv-rate 
							class="uv-rate"
							:count="5" 
							v-model="rate.cleanliness" 
							:activeColor="themeInfo.activeColor"
							inactiveColor="rgb(13, 32, 49)" 
							size="40rpx"
						>
						</uv-rate>
					</view>
					<!-- Convenience评分 -->
					<view class="midBox-detail-2">
						<view class="line"></view>
						<view class="rate">{{ $t("evaluate.convenience") }}</view>
						<uv-rate 
							class="uv-rate"
							:count="5" 
							v-model="rate.convenience" 
							:activeColor="themeInfo.activeColor"
							inactiveColor="rgb(13, 32, 49)" 
							size="40rpx"
						>
						</uv-rate>
					</view>
				</view>
				<view class="textareaBox">
					<uv-textarea 
						v-model="rate.textarea" 
						height="140.8rpx"
						:placeholder="$t('evaluate.tips')"
						customStyle="background: transparent; border-radius: 16rpx; border:none;"
						textStyle="font-size: 24rpx; color: rgb(15, 34, 50); font-weight: 400; line-height: 35rpx;"

					>
					</uv-textarea>
					<view class="textareaBox-bottom">
						<view class="anonymous">
							<uv-checkbox-group v-model="rate.checkboxValue">
								<uv-checkbox activeColor="#A1A1A1"
									name="true" 
									shape="circle"
									:label="$t('evaluate.anonymous')"
								>
								</uv-checkbox>
							</uv-checkbox-group>
							<!-- <text>{{ $t('evaluate.anonymous') }}</text> -->
						</view>
						<view class="add-pictures" >
							<uv-upload 
								:fileList="fileList1" 
								name="6" 
								:maxCount="1" 
								width="102.4rpx"
								height="91.84rpx"
								customStyle="width: 102.4rpx;height: 92rpx; border-radius: 12rpx;display: flex; justify-content: center; align-items: center;"
								@afterRead="afterRead"
								:previewFullImage="false"
								@delete="deletePic"
							>
								<!-- <view class="add-pictures"  @click="addPicture">
									<uv-image src="../../static/evaluate/image.png" width="42rpx" height="39rpx"></uv-image>
									<br>
									add pictures
								</view> -->
								<image style="width: 102.4rpx; height: 91.84rpx;" src="../../static/evaluate/addPic.png" ></image>
							</uv-upload>
						</view>
					</view>
					
				</view>	
				<button @click="submit" v-show="ifsubmit" class="submit">
					{{ $t('common.submit') }}
				</button>
			</view>
		</view>
	</view>
</template>
<script setup>
    import navBar from '@/components/navBar.vue'
	import { ref } from 'vue';
	import { useOrderApi } from '@/Apis/order.js'
	import { onLoad } from '@dcloudio/uni-app'
	// 主题色配置
	import { useMainStore } from "@/store/index.js";
	const { themeInfo } = useMainStore();
	const getApi = useOrderApi()
	const count = ref(5);
	const rate = ref({
		orderId: '',
		siteId: '',
		overallRating: '',
		Hospitality: '',
		cleanliness: '',
		convenience: '',
		imageUrl: '',
		textarea: "",
		checkboxValue: [],
	})
	onLoad((params) => {
		rate.value.orderId = params.orderId
		rate.value.siteId = params.siteId
	})
	// const overAll = ref(0);
	// const Hospitality = ref(0);
	// const cleanliness = ref(0);
	// const convenience = ref(0);
	const ifsubmit = ref(true);


	// 上传图片存放
	const fileList1 = ref([]);
	// 新增图片方法
	const afterRead = async (event) => {
		let lists = [].concat(event.file);
		let fileListLen = fileList1.value.length;

		lists.forEach(async (item) => {
			fileList1.value.push({
				...item,
				status: 'uploading',
				message: '上传中'
			});
			
			const result = await UploaderImage(item.url);
			fileList1.value[fileListLen] = {
				...item,
				status: 'success',
				message: '',
				url: result
			};
			rate.value.imageUrl = result

			fileListLen++;
		});
	}
	// 上传请求
	async function UploaderImage(url) {
		let url1 = '';
		try {
			const res = await getApi.UploaderImage({ filePath: url });
			// const jsonstr = JSON.parse(res);
			url1 = res.data;
		} catch (error) {
			throw error; //
		}
		return url1;
	}
	// 删除图片
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
		rate.value.imageUrl=''
	};
	// 提交评分
	async function submit() {
		uni.showLoading()
		const res = await getApi.SubmitOrderEvaluate({
            orderId: String(rate.value.orderId),
            siteId: String(rate.value.siteId),
            overallRating: String(rate.value.overallRating),
            hospitality: String(rate.value.Hospitality),
            cleanliness: String(rate.value.cleanliness),
            convenience: String(rate.value.convenience),
            remark: String(rate.value.textarea),
            imageUrl: String(rate.value.imageUrl),
            isAnonymity: rate.value.checkboxValue.length === 1
        });
		if(res.code === 200) {
			uni.hideLoading()
			ifsubmit.value = false

			uni.showToast({
				title: '提交成功',
				icon: 'none',
				duration: 2000
        	});
			setTimeout(() => {
				uni.reLaunch({
					url:'/pages/unlock/index'
				})
			},2000)
			


		}
	}
</script>

<style lang="scss" scoped>
@import '@/static/style/theme.scss';
uni-page-body {
    height: 100%;
    background: linear-gradient(0.00deg, rgb(1, 169, 188), rgb(10, 132, 184));
    overflow: auto;
}
.navBar {
	position: relative;

}
.container {
    display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: start;
	height: 100vh;
	background: linear-gradient(0.00deg, var(--left-linear), var(--right-linear));
}
.container-form {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	background: transparent;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
.form {
	position: relative;
	width: 690rpx;
	height: 1000rpx;
	background: #fff;
	border-radius: 16rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	& > .topBox {
		width: 100%;
		height: 116rpx;
		background: #F7F7F7;
		text-align: center;
		line-height: 116rpx;
		border-radius: 16rpx 16rpx 0 0;
	}
	& > .midBox {
		width: 504rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		.midBox-detail {
			margin-top: 54rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			& > .circle {
				width: 17rpx;
				height: 17rpx;
				background: var(--active-color);
				border-radius: 100%;
			}
			& > .rate {
				width: 214rpx;
				margin-left: 25rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #0F2232;
			}
			& > .uv-rate {
				margin-left: 26rpx;
			}
		}
		.midBox-detail-1 {
			margin-top: 34rpx;

			@extend .midBox-detail;
			& > .border {
				margin-left: 26rpx;
				background: #979797;
				width: 233rpx;
				height: 2rpx;
			}
			
		}
		.midBox-detail-2 {
			@extend .midBox-detail;
			margin-top: 21rpx;
			& > .line {
				width: 17rpx;
				height: 2rpx;
				background: #979797;
			}
		}
		
	}
	& >.textareaBox {
		margin-top: 44rpx;
		width: 630rpx;
		height: 294rpx;
		background: #F2F2F2;
		border-radius: 8rpx;
		& > .textareaBox-bottom {
			width: 100%;
			display: flex;
			align-items: flex-end;
			justify-content: flex-start;

			& >.anonymous {
				margin-left: 39rpx;
				width: 200rpx;
				display: flex;
				align-items: center;
			}
			& > .add-pictures {
				margin-left: 250rpx;
				width: 102.4rpx;
				height: 92rpx;
				// border: 1px dashed rgb(151, 151, 151);
				border-radius: 12rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 12rpx;
				font-weight: 500;
				color: #989898;
				z-index: 10;
				
			}
		}
		
	}
	& > .submit {
		margin-top: 41rpx;
		border-radius: 14rpx;
		background: var(--active-color);
		box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.13);
		width: 630rpx;
		height: 90rpx;
		color: var(--text-color);
		font-size: 37rpx;
		font-weight: 500;

	}

	&::before {
		content: "";
		position: absolute;
		top: -7px;
		left: 4px;
		width: 100%;
		height: 14px;
		background: radial-gradient(var(--right-linear) 0px, var(--right-linear) 5px, transparent 5px, transparent);
		background-size: 14px 14px;
	}
}
</style>