<template>
	<view class="RecordingDevice">
		<view class="RecordingDevice-2">
			<VoicePlayback ref="voicePlayback"/>
		</view>
		<view class="RecordingDevice-1">
			<view class="RecordingDevice-1-i">
				<view class="RecordingDevice-1-i-taps" v-if="hours || minutes || seconds">
					<image class="RecordingDevice-1-i-taps-bg" src="@/static/imagesV2/icon64.png" mode="widthFix"></image>
					
					<view class="RecordingDevice-1-i-taps-c">
						<image class="RecordingDevice-1-i-taps-c-l" src="@/static/imagesV2/icon65.png" mode="widthFix"></image>
						
						<text class="RecordingDevice-1-i-taps-c-t">{{ formattedTime }}</text>
					</view>
				</view>
				<view v-if="isTape === RECORDINGSTATUS.INPROGRESS" @click="pauseRecord">
					<view class="RecordingDevice-1-i-1">
						<image class="RecordingDevice-1-i-1-i" src="@/static/imagesV2/icon61.png" mode="widthFix"></image>
					</view>
					<view class="RecordingDevice-1-i-2">暂停</view>
				</view>
				<view v-else @click="start">
					<view class="RecordingDevice-1-i-1">
						<image class="RecordingDevice-1-i-1-i" src="@/static/imagesV2/icon66.png" mode="widthFix"></image>
					</view>
					<view class="RecordingDevice-1-i-2">开始</view>
				</view>
			</view>
			<view class="RecordingDevice-1-i" @click="stopRecord">
				<view class="RecordingDevice-1-i-1">
					<image class="RecordingDevice-1-i-1-i" src="@/static/imagesV2/icon62.png" mode="widthFix"></image>
				</view>
				<view class="RecordingDevice-1-i-2">完成</view>
			</view>
			<view class="RecordingDevice-1-i" @click="reRecording">
				<view class="RecordingDevice-1-i-1">
					<image class="RecordingDevice-1-i-1-i" src="@/static/imagesV2/icon63.png" mode="widthFix"></image>
				</view>
				<view class="RecordingDevice-1-i-2">重录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import VoicePlayback from "@/components/VoicePlayback/index.vue"
	/**
	 * 录制状态
	 */
	const RECORDINGSTATUS = {
		/**
		 * 未开始
		 * @value 1
		 */
		'NOTSTARTEDYET': 1,
		/**
		 * 进行中
		 * @value 2
		 */
		'INPROGRESS': 2,
		/**
		 * 暂停中
		 * @value 3
		 */
		'PAUSED': 3
	}
	export default {
		name: 'RecordingDevice',
		components: {
			VoicePlayback
		},
		computed: {
		    formattedTime() {
				const hours = this.padDigits(this.hours);
				const minutes = this.padDigits(this.minutes);
				const seconds = this.padDigits(this.seconds);
				return `${hours}:${minutes}:${seconds}`;
		    }
		},
		data() {
			return {
				RECORDINGSTATUS,
				// 是否正在录制
				isTape: RECORDINGSTATUS.NOTSTARTEDYET,
				recorder: null,
				seconds: 0,
				minutes: 0,
				hours: 0,
				timer: null,
			}
		},
		mounted() {
			this.recorder = uni.getRecorderManager();
			this.recorder.onStop(res => {
				if(this.isTape !== RECORDINGSTATUS.NOTSTARTEDYET) {
					console.log('停止录制...');
					console.log('录制文件路径：', res.tempFilePath);
					this.uploadFiles(res.tempFilePath)
					this.isTape = RECORDINGSTATUS.NOTSTARTEDYET;
				}
			});
			this.recorder.onStart(() => {
			    this.isTape = RECORDINGSTATUS.INPROGRESS;
			    console.log('开始录制...');
			});
			this.recorder.stop();
		},
		beforeDestroy() {
		    this.stopTimer();
		},
		methods: {
			padDigits(number) {
				return (number < 10) ? '0' + number : number;
			},
			startTimer() {
				this.timer = setInterval(() => {
					this.seconds++;
					if (this.seconds >= 60) {
					  this.seconds = 0;
					  this.minutes++;
					  if (this.minutes >= 60) {
						this.minutes = 0;
						this.hours++;
					  }
					}
				}, 1000);
			},
			resetTimer() {
				clearInterval(this.timer);
				this.timer = null;
				this.seconds = 0
				this.minutes = 0
				this.hours = 0
			},
			stopTimer() {
				clearInterval(this.timer);
				this.timer = null;
			},
			formatTwoDigits(value) {
				return value.toString().padStart(2, '0');
			},
			reRecording() {
				this.isTape = RECORDINGSTATUS.NOTSTARTEDYET
				this.recorder.stop();
				this.resetTimer()
			},
			start() {
				if(this.isTape === RECORDINGSTATUS.PAUSED) {
					this.resumeRecord()
				} else if(this.isTape === RECORDINGSTATUS.NOTSTARTEDYET){
					this.startRecord()
					this.resetTimer()
				}
				this.startTimer()
			},
			startRecord() {
				this.recorder.start({
			        format: 'mp3',
				});
			},
			pauseRecord() {
				this.recorder.pause();
				this.isTape = RECORDINGSTATUS.PAUSED;
				this.stopTimer()
				console.log('暂停录制...');
			},
			resumeRecord() {
				this.recorder.resume();
				this.paused = false;
				this.isTape = RECORDINGSTATUS.INPROGRESS;
				console.log('继续录制...');
			},
			stopRecord() {
				if(this.isTape === RECORDINGSTATUS.NOTSTARTEDYET) {
					uni.showToast({
						icon: 'none',
						title: '请录制音频'
					})
					return
				}
				this.resetTimer()
				this.recorder.stop();
			},
			uploadFiles(tempFilePath) {
				this.$service.wx_upload(tempFilePath, 'video').then(res => {
					this.$refs.voicePlayback.setUrl(res.data)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.RecordingDevice{
		.RecordingDevice-2{
			background-color: #F5F6F8;
			padding: 44rpx 43rpx;
			border-radius: 20rpx;
		}
		.RecordingDevice-1{
			display: flex;
			justify-content: space-around;
			padding-top: 120rpx;
			.RecordingDevice-1-i{
				text-align: center;
				position: relative;
				.RecordingDevice-1-i-taps{
					position: absolute;
					top: 0;
					left: 50%;
					transform: translate(-50%, -100%);
					.RecordingDevice-1-i-taps-bg{
						height: 68rpx;
						width: 216rpx;
					}
					.RecordingDevice-1-i-taps-c{
						position: absolute;
						top: 0;
						display: flex;
						align-items: center;
						height: 68rpx;
						width: 216rpx;
						padding-bottom: 12rpx;
						justify-content: center;
						.RecordingDevice-1-i-taps-c-l{
							height: 36rpx;
							width: 36rpx;
						}
						.RecordingDevice-1-i-taps-c-t{
							font-size: 28rpx;
							color: #646464;
							margin-left: 13rpx;
						}
					}
				}
				.RecordingDevice-1-i-1{
					.RecordingDevice-1-i-1-i{
						height: 120rpx;
						width: 120rpx;
					}
				}
				.RecordingDevice-1-i-2{
					font-size: 28rpx;
					color: #323232;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>