<template>
	<view class="gentfiling">
		<view class="prompt" v-if="animation">
				<section class="dots-container">
					<view class="dot"></view>
					<view class="dot"></view>
					<view class="dot"></view>
					<view class="dot"></view>
					<view class="dot"></view>
				</section>
				<text>录音中...</text>
		</view>
		<u-notify message="提交成功" :show="show"></u-notify>
		<!-- 初诊病历 -->
		<view class="head">
			<view class="item">
				初诊病例
			</view>
			<view class="title">初步诊断</view>
			<view class="textarea-post">
				<textarea :auto-height="true" v-model="diagnose" class="textarea" :maxlength="-1" placeholder="请输入"/>
				<img src="../images/yuy.png" alt="" @click="popupBtn(1)" />
			</view>
			
			<view class="title" style="margin-top: 60rpx;">既往史</view>
			<view class="textarea-post">
					<textarea :auto-height="true" v-model="caseHistory" :maxlength="-1"  class="textarea" placeholder="请输入"/>
					<img src="../images/yuy.png" alt="" @click="popupBtn(2)"  />
			</view>
		</view>
		
		<!--病历附件  -->
		<view class="annex">
			<view class="item" style="margin-bottom: 30rpx;" >
				病例附件
			</view>
			<view style="display: flex; flex-wrap: wrap;">
			<!-- 	<view style="height: 150rpx; width: 150rpx;" v-for="(item,index) in imageValue" :key="item">
					<img style="width: 100%;height: 100%;" :src="item" alt="" />
				</view> -->
				<uni-file-picker 
					:value="imageValue"
					title="最多选择3张图片"
					fileMediatype="image" 
					mode="grid" 
					:limit="3" 
					@delete="delete1"
					@select="select" 
					@progress="progress"
					@success="success"
				/>
			</view>
			
		</view>
		
		<!-- 提交 -->
		<view class="bottom">
			<button type="default"  class="button" @click="extractBtn">提交</button>
		</view>
		<!-- 抽屉的实现 -->
		<uni-popup  :mask="true" ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view @touchstart="streamRecord" @touchend="endStreamRecord" style="height: 100rpx;width: 100rpx; margin: 100rpx auto; display: flex; align-items: center; justify-content: center; border-radius: 50%;background-color: #fff;">
				<img style="height: 60rpx; width: 60rpx;" src="../images/yuy.png" alt="" />
			</view>
			<view style="text-align: center;">
			请按住说话	
			</view>
		</uni-popup>
	</view>
</template>

<script>
	 import {request} from '../../request/request.js'
	var plugin = requirePlugin("WechatSI")
	let manager = plugin.getRecordRecognitionManager()
	export default {
		data(){
			return{
			newUrlsArray:[],
			animation: false,
			imageValue:[],
			image:[],
			imageString:'',
			diagnose:'',
			caseHistory:'',
			typeIndex:'',
			tempFilePaths:[],
			tempFilePathsimg:'',
			show:false,
			userInfo1:{
				
			},
		
			}
		},
	  onShow() {
	    // 在页面再次打开时，将之前保存的图片路径传递给uni-file-picker组件进行回显
	    // this.imgUrl = JSON.parse(uni.getStorageSync('imageUrls') );
		
		// console.log(JSON.parse(uni.getStorageSync('imageUrls')),'JSON.parse(uni.getStorageSync('imageUrls'))');
	  },
		onLoad({userInfo}) {
			this.userInfo1 = JSON.parse(userInfo)
			if(this.userInfo1.img){
				this.ImageSet(this.userInfo1.img)
			}
			this.setCaseHistory(this.userInfo1.caseHistory)
			this.initRecord()
		},
		methods:{
			setCaseHistory(caseHistory){
			if(caseHistory){
			const parts = caseHistory.split(',');
			this.caseHistory = parts[0].split(':')[1]; // 获取caseHistory后面的数据
			this.diagnose = parts[1].split(':')[1]; // 获取diagnose后面的数据
			}
		},
			popupBtn(type){
			this.typeIndex = type
			 this.$refs.popup.open()
			},
			
				// 图片分隔
				ImageSet(img){
				 const img1 = img.split(',')
					const b = new Array()
					img1.forEach(ele => {
						b.push({url:ele})
					})
				this.imageValue = b
			},
			// 语音录入
			streamRecord: function() {
					this.animation = true;
					manager.start({
						lang: 'zh_CN',
					})
				},
				endStreamRecord: function() {
					this.animation = false;
					this.$refs.popup.close()
					manager.stop()
				},
				initRecord: function() {
					//有新的识别内容返回，则会调用此事件
				   // 识别结果处理逻辑
				    const handleRecognitionResult = (text) => {
				        if (text == '') {
				            uni.showToast({
				                icon: 'error',
				                title: '检测不到语音'
				            });
				            return;
				        }
				        if (this.typeIndex == 1) {
				            this.diagnose = text;
				        } else {
				            this.caseHistory = text;
				        }
				    };
				
				    // 有新的识别内容返回，则会调用此事件
				    manager.onRecognize = (res) => {
				        let text = res.result;
				        handleRecognitionResult(text);
				    };
				
				    // 识别结束事件
				    manager.onStop = (res) => {
				        let text = res.result;
				        handleRecognitionResult(text);
				    };
				},
// 图片上传
	delete1(e) {
		this.imageValue = this.imageValue.filter(ele => ele.url !== e.tempFilePath);
	    this.tempFilePaths = this.tempFilePaths.filter(ele => ele !== e.tempFilePath);
	},
	
	async select(file) {	
	    const tempFilePaths = file.tempFilePaths;
		this.tempFilePaths = [...this.tempFilePaths,...tempFilePaths]
	},
	
	async extractBtn() {
		const sex =  () =>{
			if(this.userInfo1.gender === '男'){
				return 0
			} else {
				return 1
			}
		}
	    for (const ele of this.tempFilePaths) {
	        try {
	            const loginRes = uni.getStorageSync('loginRes');
	            const res = await uni.uploadFile({
	                url: 'http://192.168.0.15:8080/wechat/img/upload',
	                filePath: ele,
	                name: 'imgFile',
	                header: {
	                    "content-type": "multipart/form-data",
	                    'Authorization': JSON.parse(loginRes).access_token
	                },
	                formData: {
	                    'imgFile': ele
	                }
	            });
	            const data = JSON.parse(res.data);
	            const url = 'http://192.168.0.15:8080/wechat' + data.data;
				this.image.push(url);
	            this.imageString = this.image.join(',');
	        } catch (err) {
	            console.error(err);
	        }
	    }
		const  caseHistory = `caseHistory:${this.caseHistory},diagnose:${this.diagnose}`
		let arr = []
		if(this.imageValue.length !==0){
			arr = this.imageValue.map(ele =>{
				return ele.url
			})
		}
		const imageString = arr.join(',')
		let  imageString1
		if(imageString) {
		 imageString1 = this.imageString+`,${imageString}`
		 if(!this.imageString){
			 imageString1 = imageString
		 }
		} else{
			imageString1 = this.imageString
		}
		
	    const data = {
	        caseHistory,
	        diagnose: this.diagnose,
	        img: `${imageString1}`,
	        id: this.userInfo1.id,
	    };
	
	    try {
	        await request({ url: '/patient/bookBuilding', method: 'POST', data });
			uni.showToast({
				title:'提交成功'
			})
	       setTimeout(() =>{
			   uni.redirectTo({
			       url: '/pages/home/index'
			   });
		   },1000)
	    } catch (error) {
	        console.error(error);
	    }
	}
	},
	}
</script>

<style scoped lang="scss">
	.prompt {
		width: 100%;
		height: 160rpx;
		position: fixed;
		bottom: 70vh;
		z-index: 99;
	}
	 
	.prompt text {
		position: absolute;
		bottom: 2px;
		color: white;
		left: calc(45%);
		animation: puls 1.5s infinite ease-in-out;
	}
	 
	.dots-container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80px;
		width: 45%;
		position: absolute;
		bottom: 0px;
		left: calc(27.5%);
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 40rpx;
	}
	 
	.dot {
		height: 28rpx;
		width: 28rpx;
		margin-right: 20rpx;
		border-radius: 20rpx;
		background-image: linear-gradient(#5396FF, #AEDAFF);
		animation: pulse 1.5s infinite ease-in-out;
	}
	 
	.dot:last-child {
		margin-right: 0;
	}
	 
	.dot:nth-child(1) {
		animation-delay: -0.3s;
	}
	 
	.dot:nth-child(2) {
		animation-delay: -0.1s;
	}
	 
	.dot:nth-child(3) {
		animation-delay: 0.1s;
	}
	 
	@keyframes pulse {
		0% {
			transform: scale(0.8);
			background-color: #66A3FF;
			/* 更改为与.dot背景色相近的颜色 */
			box-shadow: 0 0 0 0 rgba(102, 163, 255, 0.7);
			/* 使用相同的颜色 */
		}
	 
		50% {
			transform: scale(1.2);
			background-color: #ADD8FF;
			/* 稍浅的颜色，增加对比度 */
			box-shadow: 0 0 0 10px rgba(174, 218, 255, 0);
			/* 使用.dot的结束颜色，但透明度为0 */
		}
	 
		100% {
			transform: scale(0.8);
			background-color: #66A3FF;
			/* 与0%时的颜色相同 */
			box-shadow: 0 0 0 0 rgba(102, 163, 255, 0.7);
			/* 与0%时的box-shadow相同 */
		}
	}
	 
	@keyframes puls {
		0% {
			transform: translateY(0px)
		}
	 
		50% {
			transform: translateY(-4px)
		}
	 
		100% {
			transform: translateY(0px)
		}
	}
	.gentfiling{
		padding-top: 2rpx;
		height: 100vh;
		width: 100vw;
		background-color: #eee;
		.bottom{
			// margin-top: 70rpx;
			height: 200rpx;
			display: flex;
			align-items: center;
			.button{
				width: 721rpx;
				height: 100rpx;
				line-height: 100rpx;
				background: #5581FF;
				box-shadow: 8rpx 0rpx 16rpx 0rpx #2385FF;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				color: #FFFFFF;
			}
		}
		
		.item{
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 30rpx;
			color: #999999;
			line-height: 32rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			position: relative;
			&::before{
				content: '';
				position: absolute;
				top: 3rpx;
				left: -20rpx;
				width: 7rpx;
				height: 30rpx;
			
				background: #5581FF;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				
			}
		}
		.annex{
		margin: 40rpx;
		margin-top: 20rpx;
		// height: 300rpx;
		background: #FFFFFF;
		box-shadow: 6rpx 0rpx 34rpx 0rpx #eee;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 40rpx;	
		
		}
		.head{
			margin: 40rpx;
			// margin-top: 80rpx;
			background: #FFFFFF;
			box-shadow: 6rpx 0rpx 34rpx 0rpx #eee;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 40rpx;
			.title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				margin: 30rpx 0;
				font-style: normal;
				text-transform: none;
			}
			.textarea-post{
				position: relative;
				img{
					position: absolute;
					right: 0;
					bottom: 15rpx;
					width: 30rpx;
					height: 40rpx;
				}
			}
			.textarea{
				background: #F3F3F3;
				width:570rpx;
				// height: 150rpx;
				padding: 20rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 0rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

		}
		.caseHistory{
			margin: 40rpx;
			margin-top: -60rpx;
			// height: 100%;
			// height: 300rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			padding: 40rpx;
			.item {
				margin-top: 20rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.img{
				 .title1{
					 font-family: PingFang-SC, PingFang-SC;
					 font-weight: bold;
					 font-size: 30rpx;
					 color: #333333;
					 font-style: normal;
					 text-transform: none;
					 margin-top: 30rpx;
				 }
				 .img-info{
					 display: flex;
					 justify-content: space-between;
					 flex-wrap: wrap;
					.img-item{
						margin-top: 20rpx;
						width: 162rpx;
						height: 222rpx;
						margin: 10rpx;
					 img{
						 width: 100%;
						 height: 90%;
						}
					view{
							font-family: SourceHanSansCN, SourceHanSansCN;
							font-weight: 400;
							font-size: 22rpx;
							color: #343434;
							line-height: 32rpx;
							text-align: center;
							font-style: normal;
							text-transform: none;
						}
					} 
				 }
			
			}
			.title{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #333333;
				font-style: normal;
				text-transform: none;
				position:relative;
				&::before{
					content: '';
					position: absolute;
					top: 10rpx;
					left: -15rpx;
					width: 6rpx;
					height: 37rpx;
					background: #5581FF;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
				}
			}
		}
	
	}
</style>