<template>
	<view class="_voice" @touchstart="start" @touchend="stop">
		<ciy-ani class="_txt" ref="ani">{{txt}}</ciy-ani>
		<ciy-svgimg :src="svg" class="_img" :style="{filter:'hue-rotate('+deg+'deg)'}"></ciy-svgimg>
	</view>
</template>

<script>
	export default {
		emits: ['change'],
		props: {
			maskpng: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				bst: false,
				txt: '',
				deg: 0, //150 红 
				svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" version="1"><path fill="#1989d8" d="M1006 520c0 269-218 486-486 486-56 0-110-10-161-28-13 10-28 18-46 18-41 0-74-33-74-74 0-41 33-74 74-74 33 0 61 23 72 54 44 15 90 23 136 23 225 0 407-182 407-407 0-79-23-154-61-215-3-5-3-10-3-15 0-20 5-28 20-38 13-8 23-5 38-5 54 79 84 174 84 276z m-266-159v317c0 20-15 36-36 36-20 0-36-15-36-36V361c0-20 15-36 36-36 18 0 36 15 36 36z m-133 343h-8l-20 8c-8 0-18-13-20-20l-38-102h-146l-56 102c-3 8-13 20-20 20l-26-8c-10 0-18-8-18-18v-8L394 333c3-8 10-10 15-10h46c8 0 13 5 15 10L614 681c5 10 0 20-8 23zM435 404l-61 115h123L435 404z m269-238c-26 0-49-15-61-36-38-13-79-18-120-18-225 0-407 182-407 407 0 46 8 92 23 133 5 18 13 38 15 49 8 18-15 36-36 36-33 0-44-26-44-26-26-59-41-125-41-195 0-269 218-486 486-486 44 0 84 5 123 18 13-18 36-31 59-31 41 0 74 33 74 74 0 41-33 74-72 74z"/></svg>'
			};
		},
		watch: {},
		computed: {},
		mounted() {
			var app = getApp();
			app.globalData.plugin_wechatsi_manager.onStop = res => {
				this.$emit('change', {
					txt: res.result,
					data: res
				});
				this.getrefsSync('ani', this).Doani('op0|op1,200');
				this.txt = res.result;
				if (this._t)
					clearTimeout(this._t);
				this._t = setTimeout(() => {
					this.getrefsSync('ani', this).Doani('op1|op0,sa1.5,300|hide');
				}, 5000);
			}
			app.globalData.plugin_wechatsi_manager.onStart = res => {
				console.log("成功开始录音识别", res)
			}
			app.globalData.plugin_wechatsi_manager.onError = res => {
				clearInterval(this._an);
				this.deg = 150; //红
				console.error("error msg", res.msg)
			}
			this._an = setInterval(() => {
				this.deg += 10;
			}, 100);
		},
		unmounted() {
			clearInterval(this._an);
		},
		methods: {
			test(){
				this.getrefsSync('ani', this).Doani('op0|op1,200');
				this.txt = 'res.result';
				if (this._t)
					clearTimeout(this._t);
				this._t = setTimeout(() => {
					this.getrefsSync('ani', this).Doani('op1|op0,sa1.5,300|hide');
				}, 5000);
				
			},
			start() {
				this.bst = true;
				var app = getApp();
				app.globalData.plugin_wechatsi_manager.start({
					duration: 60000
				});
			},
			stop() {
				this.bst = false;
				var app = getApp();
				app.globalData.plugin_wechatsi_manager.stop();
			}
		}
	}
</script>

<style scoped>
	._voice {
		position: fixed;
		bottom: 3em;
		left: calc(50vw - 1.5em);
	}

	._voice ._img {
		width: 3em;
		height: 3em;
		display: block;
	}

	._voice ._txt {
		position: fixed;
		bottom: 7em;
		left: 0;
		right: 0;
		opacity: 0;
		text-align: center;
	}
</style>