<template>
	<view class="sound-recording">
		<view class="time">{{status==0?'录音时长':(status==3?'录音已完成':'正在录音中')}}：<span class="time-span">{{time}}秒</span>
		</view>
		<!-- <view class="btn">
            <view :class="status==3?'show':'hide'" @click="reset" hover-class="jump-hover">重新录制</view>
            <view :class="status==3 && playStatus==0?'show':'hide'" @click="bofang" hover-class="jump-hover">{{playStatus==1?'录音播放中':'播放录音'}}</view>
        </view> -->
		<view class="progress">
			<progress :percent="time*(100/(duration/1000))" border-radius="10" color="#2C66FF" stroke-width="8"
				backgroundColor="rgba(44,102,255,0.14)" />
			<!-- <text class="txt">最大录音时长（{{duration/1000}}秒 = {{duration/60000}}分钟）</text> -->
		</view>
		<view class="anniu">
			<view class="d-flex j-sa">
				<view class="d-flex flex-column a-center" @click="handleStart">
					<img class="record-icon"
						:src="status==0 ? require('../../static/recordIcon/start.png') : status==1 ? require('../../static/recordIcon/pause.png') : status==2 ? require('../../static/recordIcon/start.png') : require('../../static/recordIcon/start.png') "
						alt="">
					<view>{{status==0 ? '开始' : status==1 ? '暂停' :  status==2 ? '继续' : '开始'}}</view>
				</view>
				<view class="d-flex flex-column a-center" @click="tingzhi">
					<img class="record-icon" src="../../static/recordIcon/stop.png" alt="">
					<view>停止</view>
				</view>
				<view class="d-flex flex-column a-center" @click="reset">
					<img class="record-icon" src="../../static/recordIcon/again.png" alt="">
					<view>重新录制</view>
				</view>
				<view class="d-flex flex-column a-center" @click="bofang">
					<img class="record-icon" :src="playStatus==1 ? '../../static/recordIcon/goon.png' : '../../static/recordIcon/play.png'" alt="">
					<view>{{playStatus==1?'录音播放中':'播放录音'}}</view>
				</view>

			</view>
			<!-- <view :class="status==0?'row':'no-clicking'" @click="kaishi" hover-class="jump-hover">开始</view>
            <view :class="status==1?'row':'no-clicking'" @click="zanting" hover-class="jump-hover">暂停</view>
            <view :class="status==2?'row':'no-clicking'" @click="jixu" hover-class="jump-hover">继续</view>
            <view :class="status==1 || status==2?'row':'no-clicking'" @click="tingzhi" hover-class="jump-hover">停止</view> -->
		</view>
		<view class="upload-voice-text" @click="handleUpload">上传录音</view>
	</view>
</template>

<script>
	import apiBaseConfig from '@/config/index.js';
	const recorderManager = uni.getRecorderManager()
	const innerAudioContext = uni.createInnerAudioContext()
	var init
	export default {
		data() {
			return {
				time: 0, //录音时长
				duration: 600000, //录音最大值ms 600000/10分钟
				tempFilePath: "", //音频路径
				status: 0, //录音状态 0:未开始录音 1:正在录音 2:暂停录音 3:已完成录音
				playStatus: 0, //录音播放状态 0:未播放 1:正在播放
				uploadUrl: apiBaseConfig.upload,
			}
		},
		methods: {
			//上传录音按钮事件
			async handleUpload(){
				let that = this
				return new Promise((resolve, reject) => {
					let a = wx.uploadFile({
						url: that.uploadUrl, // 仅为示例，非真实的接口地址
						filePath: that.tempFilePath,
						name: 'file',
						header:{
							'Authorization': `Bearer ${uni.getStorageSync('token')}`
						},
						success: (res) => {
							console.log(res,'dsan')
							const {
								data
							} = JSON.parse(res.data);
							console.log(data, '大街上可能',that.time)
							that.$emit('getVal', data,that.time);
							
							let clear =  setTimeout(() => {
								clearTimeout(clear)
								resolve(data.url)
								// resolve(res.data.data)
							}, 1000)
						},
						fail(err) {
							console.log('失败',err)
						}
					});
				})
			},
			handleStart() {
				let that = this
				if (that.status == 0) {
					that.kaishi()
				} else if (that.status == 1) {
					that.zanting()
				} else if (that.status == 2) {
					that.jixu()
				}
			},
			kaishi: function() {
				clearInterval(init) //清除定时器
				//监听录音自动结束事件(如果不加，录音时间到最大值自动结束后，没获取到录音路径将无法正常进行播放)
				recorderManager.onStop((res) => {
					console.log('recorder stop', res)
					this.tempFilePath = res.tempFilePath
					this.status = 3
					this.recordingTimer(this.time)
				})

				const options = {
					duration: this.duration, //指定录音的时长，单位 ms
					sampleRate: 16000, //采样率
					numberOfChannels: 1, //录音通道数
					encodeBitRate: 96000, //编码码率
					format: 'mp3', //音频格式，有效值 aac/mp3
					frameSize: 10, //指定帧大小，单位 KB
				}
				this.recordingTimer()
				recorderManager.start(options)
				// 监听音频开始事件
				recorderManager.onStart((res) => {
					console.log('recorder start')
					this.status = 1
				})
				console.log(this.status);
			},

			/**
			 * 暂停录音
			 */
			zanting: function() {
				recorderManager.onPause(() => {
					console.log('recorder pause')
					this.status = 2
				})
				this.recordingTimer(this.time)
				recorderManager.pause()
			},

			/**
			 * 继续录音
			 */
			jixu: function() {
				this.status = 1
				this.recordingTimer()
				recorderManager.resume()
			},

			/**
			 * 停止录音
			 */
			tingzhi: function() {
				recorderManager.onStop((res) => {
					console.log('recorder stop', res)
					this.tempFilePath = res.tempFilePath
					this.status = 3
				})
				this.recordingTimer(this.time)
				recorderManager.stop()

			},

			/**
			 * 播放录音
			 */
			bofang: function() {
				//音频地址
				console.log(this.tempFilePath, '音频地址');
				innerAudioContext.src = this.tempFilePath
				//在ios下静音时播放没有声音，默认为true，改为false就好了。
				// innerAudioContext.obeyMuteSwitch = false

				//点击播放
				if (this.playStatus == 0) {
					this.playStatus = 1
					innerAudioContext.play()
				}
				// //播放结束
				innerAudioContext.onEnded(() => {
					innerAudioContext.stop()
					this.playStatus = 0
				})
			},
			recordingTimer: function(time) {
				var that = this
				if (time == undefined) {
					//将计时器赋值给init
					init = setInterval(function() {
						var time = that.time + 1;
						that.time = time
					}, 1000);
				} else {
					clearInterval(init)
					console.log("暂停计时")
				}
			},

			/**
			 * 重新录制
			 */
			reset: function() {
				var that = this
				wx.showModal({
					title: "重新录音",
					content: "是否重新录制?",
					success(res) {
						if (res.confirm) {
							that.time = 0
							that.tempFilePath = ''
							that.status = 0
							that.playStatus = 0
							innerAudioContext.stop()
						}
					}
				})
			}
		}
	}
</script>

<style>
	/* 	.sound-recording {
		background-color: rgb(234, 234, 234);
		margin: 10rpx 30rpx;
        border-radius: 20rpx;
        padding: 5rpx 0rpx;
	} */

	.time-span {
		font-size: 24rpx;
		color: #2C66FF;
		font-weight: bold;
	}

	.record-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.btn {
		margin: 0rpx 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.btn .show {
		padding: 10rpx;
		width: 200rpx;
		font-size: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgb(178, 228, 228);
		border-radius: 20rpx;
		border: 5rpx solid rgb(127, 204, 214);
	}

	.btn .hide {
		padding: 10rpx;
		width: 200rpx;
		font-size: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
		border: 5rpx solid #eee;
		pointer-events: none;
		background-color: rgba(167, 162, 162, 0.445);
	}

	.time {
		line-height: 70rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.progress {
		margin: 20rpx;
	}

	.play {
		margin: 0rpx 20rpx;
	}

	.txt {
		display: flex;
		justify-content: center;
		line-height: 60rpx;
		font-size: 25rpx;
	}

	.anniu {
		margin: 10rpx 50rpx;
		font-size: 24rpx;
		/* display: flex;
        justify-content: space-between; */
	}

	.row {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		font-size: 25rpx;
		width: 80rpx;
		height: 80rpx;
		background-color: rgb(178, 228, 228);
		border: 5rpx solid rgb(127, 204, 214);
	}

	.jump-hover {
		transform: scale(0.9);
	}

	/*禁止点击*/

	.anniu .no-clicking {
		pointer-events: none;
		background-color: rgba(167, 162, 162, 0.445);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		font-size: 25rpx;
		width: 80rpx;
		height: 80rpx;
		border: 5rpx solid rgb(241, 244, 245);
	}
	.upload-voice-text{
		width: 276rpx;
		height: 70rpx;
		border-radius: 14rpx;
		border: 2rpx solid #2C66FF;
		text-align: center;
		line-height: 70rpx;
		color: #2C66FF;
		font-size: 24rpx;
		margin: 20rpx auto;
	}
</style>