<template>
	<view class="chatAudio">
		<view class="audioPlay" v-if="show">
			<view class="content">
				<!-- 录制中动图，底色变化 -->
				<view class="gif" :class="{'red':closeShow}">
					<!-- <image src="../../static/img/33.gif" mode=""></image> -->
					<image src="/static/images/err.png" mode=""></image>
				</view>
				<view class="close">
					<!-- ×号 颜色变化-->
					<!-- <image src="../../static/img/32.png" mode="" v-if="!closeShow"></image>
					<image src="../../static/img/28.png" mode="" v-if="closeShow"></image> -->

					<image src="/static/images/head.jpg" mode="" v-if="!closeShow"></image>
					<image src="/static/images/kefu.png" mode="" v-if="closeShow"></image>
				</view>
				<view class="bom">
					<text v-if="!closeShow">松开 发送</text>
					<text v-if="closeShow">松开 取消</text>

					<!-- 底图颜色变化 -->
					<!-- <image src="../../static/img/30.png" mode="" v-if="!closeShow"></image> -->
					<!-- <image src="../../static/img/31.png" mode="" v-if="closeShow"></image> -->

					<image src="/static/images/open.png" mode="" v-if="!closeShow"></image>
					<image src="/static/images/open1.png" mode="" v-if="closeShow"></image>

					<!-- 计时器 -->
					<view class="times">
						<u-circle-progress active-color="#6C9FEB" :percent="times" bg-color="" width="140"
							border-width="7"></u-circle-progress>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = true;
	export default {
		name: 'chatAudio',
		props: {
			audioShow: {
				type: Boolean,
				default: false
			},
			audioXY: {
				type: Object,
			},
			audioTouchendShow: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			// audioShow：true录制界面显示，开始录音，false关闭。
			audioShow(e, oldVal) {
				if (e) {
					console.log('开始录音')
					this.status = 0;
					this.audioSrc = '';
					this.number = 1;
					this.show = true;

					// 计算录制时长，>=60 录制结束
					this.times = 1;
					this.timesInt = setInterval(() => {
						this.times++;
						console.log(this.times)
						if (this.times >= 60) {
							clearInterval(this.timesInt);
							this.closeShow = false;
							recorderManager.stop();
							console.log('结束录制');
						}
					}, 1000);

					// 开始录制
					recorderManager.start();

					// 获取关闭按钮.close在屏幕中的位置信息
					this.$nextTick(() => {
						let close = uni.createSelectorQuery().select(".close");
						close.boundingClientRect((data) => {
							this.dom = data;
						}).exec()
					})
				} else {
					this.show = false;
				}
			},
			// 手指在屏幕中的位置，判断是否：录制中/删除
			audioXY(e) {
				let x = e.x;
				let y = e.y;
				let left = this.dom.left;
				let top = this.dom.top;
				if (x > left && x < left + this.dom.width && y > top && y < top + this.dom.height) {
					this.closeShow = true;
				} else {
					this.closeShow = false;
				}
			},
			// 手指结束触摸，通知父组件关闭弹窗，根据this.closeShow类型，判断是取消还是发送
			audioTouchendShow(e) {
				this.$emit('closeAudioShow')
				if (this.number == 1) {
					this.number++;
					if (this.closeShow) {
						console.log('取消录制')
						clearInterval(this.timesInt);
						this.closeShow = false;
						recorderManager.stop();
					} else {
						console.log('发送音频');
						clearInterval(this.timesInt);
						this.closeShow = false;
						recorderManager.stop();
						this.status = 1;
					}
				}
			}
		},
		data() {
			return {
				show: false, // 弹窗
				closeShow: false, // 正常/删除
				winSize: {},
				dom: {}, // 删除按钮位置

				times: 1, // 计时器
				timesInt: null, // 计时器
				status: 0, //0录制中，1录制结束。
				number: 1,
			}
		},
		mounted() {
			// 录音停止事件，会回调文件地址，如果status == 1，上传音频，并通知父组件发送音频信息
			recorderManager.onStop((res) => {
				console.log(res)
				this.audioSrc = res.tempFilePath;
				if (this.status == 1) {
					this.upload(this.audioSrc, 'audio');
				}
			});
			uni.getSystemInfo({
				success: (res) => {
					this.winSize = {
						"witdh": res.windowWidth,
						"height": res.windowHeight
					}
				}
			})
		},
		methods: {
			// 上传音频，并发送
			upload(file, type) {

				// this.$uploadImage('/api/***', file).then(res => {
				// 	if (res.code == 1) {
				// 		this.$emit('submit', type, res.data.url)
				// 	}
				// })

				uni.uploadFile({
					//后端接口地址
					url: 'https://t23.9026.com' + '/api/upload',
					//图片临时地址
					filePath: file,
					//上传文件类型
					name: 'file',
					formData: {
						// tag: 'avatar',
						'tag': 'lamp'
					},
					success: (uploadRes) => {
						let result = JSON.parse(uploadRes.data)
						if (result.code == 0) {
							// _this.pic_url = _this.pic_url
							// 	.concat(result.data.file)
							console.log('上传后的头像url地址', result.data.file)
							this.$emit('submit', type, result.data.file)
						}
					},
				})

			},
		},
	}
</script>
<style lang="scss" scoped>
	.chatAudio {
		.audioPlay {
			width: 750rpx;
			min-height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 0, 0, .8);
			text-align: center;

			.content {
				position: absolute;
				left: 0;
				bottom: 100rpx;

				.gif {
					width: 364rpx;
					height: 172rpx;
					background: #6C9FEB;
					border-radius: 32rpx;
					margin: auto;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all .5s;

					uni-image {
						width: 160rpx;
						height: 48rpx;
					}
				}

				.red {
					background-color: #FB5353;
				}

				.close {
					margin: 176rpx auto 42rpx;
					width: 132rpx;
					height: 132rpx;

					uni-image {
						width: 132rpx;
						height: 132rpx;
					}
				}

				.bom {
					position: relative;

					.times {
						position: absolute;
						left: 50%;
						top: 125rpx;
						margin-left: -70rpx;
					}

					uni-image {
						width: 750rpx;
						height: 254rpx;
						margin-top: 26rpx;
					}

					uni-text {
						font-size: 28rpx;
						color: #9E9E9E;
					}
				}

			}
		}
	}
</style>