<template>
	<view :animation="animationData" class="_refani" v-if="show" :style="cstyle">
		<slot></slot>
	</view>
</template>
<style scoped>
</style>
<script>
	export default {
		options: {
			virtualHost: true
		},
		props: {
			ani: {
				type: String,
				default: ''
			},
			ciystyle: {
				type: [String, Object],
				default: ''
			}
		},
		data() {
			return {
				show: true,
				mastyle: {height:'auto'},
				animationData: {}
			};
		},
		watch: {
			ani(newD, oldD) {
				this.Doani(newD);
			}
		},
		computed: {
			cstyle() {
				this.mastyle.overflow = 'hidden';
				var sty = this.ciystyle;
				if(typeof(sty) == 'string')
					sty = this.style2obj(sty, this.mastyle);
				return sty;
			}
		},
		mounted() {
			this.rect = {};
			if (this.ani)
				this.Doani(this.ani);
		},
		methods: {
			async Doani(opn) {
				if (this._aniing)
					return;
				//opn，string=anis
				//{anis:string/array, init:obj}
				//in out show，先show，如果是out，show=false，其他不变
				//多个step执行，微信小程序会出现合并执行的bug
				//设置初始style，部分低版本浏览器无效，用16ms单帧替代
				//init参数希望不同step表现不同，用anis[array]，step单独传参
				//matrix，xx3d等，anis[string]未定义，需anis[array]。
				this.show = true;
				if (typeof(opn) == 'string') {
					//ResizeObserver微信小程序不支持
					if (opn.indexOf('hhauto') > -1) {
						this.mastyle.height = 'auto';
						this.mastyle.display = 'block';
						await this.$nextTick();
						var rect = await this.getrect('._refani');
						//console.log('rect.height',rect.height,this.rect.height);
						if (rect.width != 0 && rect.height != 0)
							this.rect = rect;
						if(this.rect.height)
							opn = opn.replace('hhauto', 'hh' + this.rect.height);
						else
							opn = opn.replace('hhauto', 'hh0');
					}
				}
				this._aniing = true;
				await this.goani(opn, data => this.animationData = data, (key, val) => {
					this.show = false;
				});
				this._aniing = false;
			}
		}
	}
</script>