<template>
	<view :key="cKey" class="tm-lottie flex-center">
		<!-- #ifndef H5 -->

		<canvas :style="{ width: w_w + 'px', height: h_h + 'px' }" id="cid" canvas-id="cid" class="cid"></canvas>
		<!-- #endif -->
		<!-- #ifdef H5 -->

		<canvas :style="{ width: w_w + 'px', height: h_h + 'px' }" :id="cuid" :canvas-id="cuid"></canvas>
		<!-- #endif -->
	</view>
</template>

<script>
import lottie from 'tm-vuetify/tool/function/lottie.js';
export default {
	name: 'tm-lottie',
	props: {
		width: {
			type: Number | String,
			default: 420
		},
		height: {
			type: Number | String,
			default: 420
		},
		url: {
			type: String||Object,
			default: ()=>{
				return "";
			}
		},
		loop: {
			type: Boolean,
			default: true
		},
		autoplay: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		w_w: function() {
			return uni.upx2px(this.width);
		},
		h_h: function() {
			return uni.upx2px(this.height);
		}
	},
	data() {
		return {
			cuid: 'cid',
			cKey: ''
		};
	},
	created() {
		// #ifdef H5
		this.cuid = this.$tm.guid();
		// #endif
		this.cKey = this.$tm.guid();
	},
	destroyed() {
		// 释放内存。
		lottie.destroy()
	},
	async mounted() {
		if (this.url) {
			this.$nextTick(async function() {
				await this.LoadLottiePlay_Mp();
			});
		}
	},
	methods: {
		async LoadLottiePlay_Mp(url) {
			const canvasContext = uni.createCanvasContext(this.cuid, this);
			// #ifdef MP-WEIXIN || MP-ALIPAY
			// let canvas = await this.getNodeCanvasNodeRef();
			// console.log(canvas);
			
			// #endif
			//  请求到的lottie json数据
			let animationData=null
			// 请求lottie的路径。注意开启downloadFile域名并且返回格式是json
			const animationPath = url || this.url;// url || this.url
			if(typeof animationPath ==='string'&&animationPath!=''){
				let p = await this.rloadJson(animationPath).catch(e=>{
					uni.$tm.toast(JSON.stringify(e));
				})
				animationData = JSON.parse(p.data.data)
				
			}else{
				animationData = url;
			}
			if(!animationData) return;
			
			// 指定canvas大小
			canvasContext.canvas = {
				width: this.w_w,
				height: this.h_h
			};
			try {
				// 如果同时指定 animationData 和 path， 优先取 animationData
				lottie.loadAnimation({
					renderer: 'canvas', // 只支持canvas
					loop: this.loop,
					autoplay: this.autoplay,
					animationData: animationData,
					path: '',
					rendererSettings: {
						context: canvasContext,
						clearCanvas: true
					}
				});
			} catch (e) {
				console.log(e);
			}
		},
		//mp alipay
		getNodeCanvasNodeRef(){
			return new Promise((resolve,reject)=>{
				const query = uni.createSelectorQuery().in(this)
				query
				.select('.cid')
				.fields({ node: true, size: true })
				.exec(res => {
					console.log(res);
				  const canvasNode = res[0].node
				  const canvasDpr = uni.getSystemInfoSync().pixelRatio
				  const canvasWidth = res[0].width
				  const canvasHeight = res[0].height
				  const ctx = canvasNode.getContext('2d')
				  resolve(ctx,{dpr:canvasDpr,width:canvasWidth,height:canvasHeight,node:canvasNode});
				})
			})
		},
		async LoadLottiePlay_H5(url) {
			const canvasContext = uni.createCanvasContext(this.cuid, this);
		
			//  请求到的lottie json数据
			let animationData=null
			// 请求lottie的路径。注意开启downloadFile域名并且返回格式是json
			const animationPath = url || this.url;// url || this.url
			
			
			// 指定canvas大小
			canvasContext.canvas = {
				width: this.w_w,
				height: this.h_h
			};
			try {
				// 如果同时指定 animationData 和 path， 优先取 animationData
				lottie.loadAnimation({
					renderer: 'canvas', // 只支持canvas
					loop: this.loop,
					autoplay: this.autoplay,
					animationData: '',
					path: animationPath,
					rendererSettings: {
						context: canvasContext,
						clearCanvas: true
					}
				});
			} catch (e) {
				console.log(e);
			}
		},
		play() {
			lottie.play();
		},
		stop() {
			lottie.stop();
		},
		pause() {
			lottie.pause();
		},
		rloadJson(url){
			
			return new Promise((res,rej)=>{
				
				uni.request({
					responseType:'json',
					url:url,
					success: (v) => {
						
						res(v)
					},
					fail: (e) => {
						console.log(e);
						rej(e)
					}
				})
			})
		},
		// type:1正向播放，-1反向
		setDirection(type = 1) {
			lottie.setDirection(type);
		},
		async registerAnimation(url) {
			if (!url) return;
			lottie.destroy();
			this.cKey = this.$tm.guid();
			await this.LoadLottiePlay_Mp(url);
			lottie.resize();
		}
	}
};
</script>

<style lang="scss"></style>
<html>
<head><title>PANIC: session(release): write data/sessions/0/0/002bdf35492ff7fa: no space left on device</title>
<meta charset="utf-8" />
<style type="text/css">
html, body {
	font-family: "Roboto", sans-serif;
	color: #333333;
	background-color: #ea5343;
	margin: 0px;
}
h1 {
	color: #d04526;
	background-color: #ffffff;
	padding: 20px;
	border-bottom: 1px dashed #2b3848;
}
pre {
	margin: 20px;
	padding: 20px;
	border: 2px solid #2b3848;
	background-color: #ffffff;
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
</style>
</head><body>
<h1>PANIC</h1>
<pre style="font-weight: bold;">session(release): write data/sessions/0/0/002bdf35492ff7fa: no space left on device</pre>
<pre>/root/go/pkg/mod/github.com/go-macaron/session@v0.0.0-20190805070824-1a3cdc6f5659/session.go:199 (0x8bc0f8)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/context.go:81 (0x83623b)
/root/go/pkg/mod/github.com/go-macaron/inject@v0.0.0-20160627170012-d8a0b8677191/inject.go:157 (0x80b5f4)
/root/go/pkg/mod/github.com/go-macaron/inject@v0.0.0-20160627170012-d8a0b8677191/inject.go:135 (0x80b51c)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/context.go:125 (0x8363b2)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/context.go:115 (0x8473a6)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/recovery.go:161 (0x84739d)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/logger.go:40 (0x839a24)
/root/go/pkg/mod/github.com/go-macaron/inject@v0.0.0-20160627170012-d8a0b8677191/inject.go:157 (0x80b5f4)
/root/go/pkg/mod/github.com/go-macaron/inject@v0.0.0-20160627170012-d8a0b8677191/inject.go:135 (0x80b51c)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/context.go:125 (0x8363b2)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/router.go:187 (0x8412dd)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/router.go:304 (0x8423ec)
/root/go/pkg/mod/gopkg.in/macaron.v1@v1.5.0/macaron.go:218 (0x83adde)
/usr/local/btgo/src/net/http/server.go:2936 (0x7b23b5)
	serverHandler.ServeHTTP: handler.ServeHTTP(rw, req)
/usr/local/btgo/src/net/http/server.go:1995 (0x7add91)
	(*conn).serve: serverHandler{c.server}.ServeHTTP(w, w.req)
/usr/local/btgo/src/runtime/asm_amd64.s:1598 (0x47e160)
	goexit: BYTE	$0x90	// NOP
</pre>
</body>
</html>