<template>
	<view class="yh-page">
		<view class="yh-page-wrap">
			<view class="divider"/>
			<view class="title-tip">测试图片上传</view>
			<view class="tip">测试单图上传</view>
			<view class="image-box">
				<image :src="singlePictureUrl" mode="aspectFit" class="one-image" @tap="handleToPreview('single',0)"></image>
			</view>
			<button size="default"  class="custom-btn" @tap="handleToUplaodSinglePicture()">上传单图</button>
			<view class="tip">测试上传多图(测试为3张)</view>
			<view class="image-box">
				<image v-for="(item,key) in pictueArray" :key="key"  :src="item" mode="aspectFit" class="one-image" @tap="handleToPreview('multiple',key)"></image>
			</view>
			<button size="default"  class="custom-btn" @tap="handleToUplaodPicture()">上传多图</button>
		</view>
	</view>
</template>

<script setup>
import { DEFAULT_PICTURE_PATH } from '@/config/image-setting.uts'
import { chooseImage,previewImage } from '@/utils/image.uts'
import type {ApiUplaodSinglePictureResponse,UplaodSinglePictureResponseData} from '@/api/youhujun/upload/upload-type.uts'
import {singleUploadPicture,multipleUploadPicture} from '@/api/youhujun/upload/picture.uts'
const singlePictureUrl = ref<string>(DEFAULT_PICTURE_PATH)
const pictueArray = ref<string[]>([])

const handleToPreview = (name:string,index:number)=>{
	if(name == 'single'){
		const param:PreviewImageOptions = {
			current:index,
			urls:[singlePictureUrl.value]
		}
		
		previewImage(param)
	}
	
	if(name == 'multiple'){
		const param:PreviewImageOptions = {
			current:index,
			urls:pictueArray.value
		}
		
		previewImage(param)
	}
	
	
}
//上传单图
const handleToUplaodSinglePicture = async ()=>{
	const param:ChooseImageOptions = {
		count:1
	}
	const result = await chooseImage(param)
	//console.log(result)
	singlePictureUrl.value = result.tempFilePaths[0]
	const uploadResult:ApiUplaodSinglePictureResponse | null = await singleUploadPicture(result.tempFilePaths[0])
	// console.log(uploadResult)
	if(uploadResult){
		if(uploadResult.code === 0){
			singlePictureUrl.value = uploadResult.picture
		}
	}
}
//上传多图
const handleToUplaodPicture = async ()=>{
	const param:ChooseImageOptions = {
		count:3
	}
	const result = await chooseImage(param)
	//console.log(result)
	pictueArray.value =  result.tempFilePaths
	const uploadResult = await multipleUploadPicture(result.tempFilePaths)
	//console.log(uploadResult)
	const { pictureArray } = uploadResult
	pictueArray.value = pictureArray
	
}
</script>

<style lang="scss" scoped>
.divider{
	width: 100%;
	height:40rpx;
}
.title-tip{
	width: 80%; 
	/* 1. 去掉固定高度，改为自适应内容高度 */
	height: auto; 
	/* 2. 调整行高适配多行（原60rpx单行行高，多行需减小，保证行间距舒适） */
	line-height: 30rpx; 
	/* 3. 核心：强制自动换行属性 */
	word-wrap: break-word; /* 允许长单词换行 */
	word-break: break-all; /* 强制换行（兼容中英文） */
	white-space: normal; /* 恢复默认换行（避免单行强制不换行） */
	/* 原有样式保留 */
	color:  #1E90FF;
	border: 2px solid #FFE4C4;
	text-align: center;
	margin: 0 auto;
	/* 可选：加内边距，让文字和边框有间距，更美观 */
	padding: 10rpx 0;
}
.tip{
	width: 80%; 
	/* 1. 去掉固定高度，改为自适应内容高度 */
	height: auto; 
	/* 2. 调整行高适配多行（原60rpx单行行高，多行需减小，保证行间距舒适） */
	line-height: 30rpx; 
	/* 3. 核心：强制自动换行属性 */
	word-wrap: break-word; /* 允许长单词换行 */
	word-break: break-all; /* 强制换行（兼容中英文） */
	white-space: normal; /* 恢复默认换行（避免单行强制不换行） */
	/* 原有样式保留 */
	color: #BEBEBE;
	border: 2px dotted #FFE4E1;
	text-align: center;
	margin: 0 auto;
	/* 可选：加内边距，让文字和边框有间距，更美观 */
	padding: 10rpx 0;
	margin-top: 20rpx;
}
.custom-btn {
	width: 80%;  
	color: #ffffff;
	background-color: #0D8CE9;
	border-color:  	#D3D3D3;
	margin: 20rpx auto;
}
.image-box{
	width:710rpx;
	height:auto;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin: 0 auto;
	flex-wrap: wrap; 
	gap: 20rpx;
	padding: 20rpx;
	/* background-color: pink; */
}
.one-image{
	width: 240rpx;
	height: 240rpx;
	// background-color: green;
}
</style>