<template>
	<view class="voice-btn" @click="playBtn" :class="play?'audioplaying':''">
		<img class="play-btn" src="@/static/images/audio.png"></img>
		<view class="audio-box">
			<view class="audio1 wave1"></view>
			<view class="audio2 wave2"></view> 
			<view class="audio3 wave3"></view>
			<view class="audio2 wave2"></view>
			<view class="audio1 wave1"></view>
			<view class="audio2 wave2"></view>
			<view class="audio3 wave3"></view>
			<view class="audio2 wave2"></view>
			<view class="audio1 wave1"></view>
			<view class="audio2 wave2"></view>
			<view class="audio3 wave3"></view>
			<view class="audio2 wave2"></view>
		</view>
		<view>{{sec}}"</view>
	</view>
</template>
<script>
export default {
	emits: ['playAudio'],
	props: {
		isPlay: {
			type: [Boolean],
			default: false 
		},
		sec: {
			type: Number,
			default: 0
		},
	},
	data() {
		return {
			play: false,
		};
	},
	watch: {
		isPlay: {
			handler(newVal) {
				this.play = newVal;
			},
			immediate: true
		},
	},
	methods: {
		playBtn() {
			/* if(this.play){
				this.play = false;
			}else{
				this.play = true;
			} */
			this.$emit('playAudio');
		},
	}
};
</script>
<style lang="scss" scoped>
view{
	box-sizing: border-box;
}
.voice-btn {
	background-color: #3cc9a4;
	width: 340rpx;
	border-radius: 20px;
	padding: 16rpx 10rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	font-size: 24rpx;
}

.play-btn {
	width: 40rpx;
	height: 40rpx;
}

.audio-box {
	height: 34rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.audio1{
    margin-right: 8rpx;
	width: 6rpx;
	height: 33.3%;
	border-radius: 50px;
	background-color: #fff;
}

.audio2{
	margin-right: 8rpx;
	width: 6rpx;
	height: 66.6%;
	border-radius: 50px;
	background-color: #fff;
}

.audio3{
	margin-right: 8rpx;
	width: 6rpx;
	height: 100%;
	border-radius: 50px;
	background-color: #fff;
}

.audioplaying .wave1 {
	animation: wave1 1s linear 0s infinite;
}

.audioplaying .wave2 {
	animation: wave2 1s linear 0s infinite;
}

.audioplaying .wave3 {
	animation: wave3 1s linear 0s infinite;
}

@keyframes wave1{
  0% {
      width: 6rpx;
      height: 33%;
  }
  25% {
      width: 6rpx;
      height: 66%;
  }
  50% {
      width: 6rpx;
      height: 100%;
  }
  75% {
      width: 6rpx;
      height: 66%;
  }
  100% {
      width: 6rpx;
      height: 33%;
  }
}

@keyframes wave2{
  0% {
      width: 6rpx;
      height: 66%;
  }
  25% {
      width: 6rpx;
      height: 33%;
  }
  50% {
      width: 6rpx;
      height: 66%;
  }
  75% {
      width: 6rpx;
      height: 100%;
  }
  100% {
      width: 6rpx;
      height: 66%;
  }
}

@keyframes wave3{
  0% {
      width: 6rpx;
      height: 100%;
  }
  50% {
      width: 6rpx;
      height: 33%;
  }
  100% {
      width: 6rpx;
      height: 100%;
  }
}

</style>
