<template>
	<gcanvas class="canvas" :ref="canvasId" :style="style"></gcanvas>
</template>

<script>
	import {enable, WeexBridge} from './gcanvas/index.js';
	// import { enable, WeexBridge, Image as GImage } from "@gcanvas/core";
	import { toPx, base64ToPath} from './utils';
	import { Draw } from './draw';
	export default {
		// version: '1.5.9.1',
		name: 'l-painter',
		props: {
			board: Object,
			fileType: {
				type: String,
				default: 'png'
			},
			width: [Number, String],
			height: [Number, String],
			pixelRatio: Number,
			customStyle: String,
			isRenderImage: Boolean,
			isBase64ToPath: Boolean,
			isH5PathToBase64: Boolean,
			sleep: {
				type: Number,
				default: 1000/30
			},
			type: {
				type: String,
				default: '2d',
			}
		},
		data() {
			return {
				canvasId: `l-painter_${this._uid}`,
				draw: null,
				ctx: null,
				canvas: {}
			}
		},
		computed: {
			newboard() {
				return this.board && JSON.parse(JSON.stringify(this.board))
			},
			style() {
				return `width:${this.boardWidth}; height: ${this.boardHeight}; ${this.customStyle}`;
			},
			dpr() {
				return this.pixelRatio || uni.getSystemInfoSync().pixelRatio;
			},
			boardWidth() {
				const { width = 200 } = this.board || {};
				return toPx(this.width || width);
			},
			boardHeight() {
				const { height = 200 } = this.board || {};
				return toPx(this.height || height);
			}
		},
		mounted() {
			this.$watch('newboard', async (val, old) => {
				if (JSON.stringify(val) === '{}' || !val) return;
				const {width: w, height: h} = val || {};
				const {width: ow, height: oh} = old || {};
				if(w !== ow || h !== oh) {
					this.inited = false;
				}
				this.render();
			}, {
				deep: true, 
				immediate: true,
				})
		},
		methods: {
			async render(args = {}, single = false) {
				const ctx = await this.getContext()
				const { boardWidth, boardHeight, board, canvas, sleep } = this;
				if (!canvas) {
					return Promise.reject(new Error('render: fail canvas has not been created'));
				}
				if(!this.boundary) {
					this.boundary = {
					  top: 0,
					  left: 0,
					  width: boardWidth,
					  height: boardHeight,
					  sleep
					}
				}
				if(!single) {
					ctx.clearRect(0, 0, boardWidth, boardHeight);
				}
				if(!this.draw) {
					this.draw = new Draw(ctx, canvas, false, false, this.boundary);
				} 
				if(JSON.stringify(args) != '{}' || board && JSON.stringify(board) != '{}') {
					await this.draw.drawBoard(JSON.stringify(args) != '{}' ? args : board);
				}
				await new Promise(resolve => this.$nextTick(resolve)) 
				if (!single) {
					await this.canvasDraw(ctx);
				}
				this.$emit('done')
				if(this.isRenderImage && !single) {
					this.canvasToTempFilePath()
					.then(async res => {
						plus.nativeUI.alert("文件位置:"+res.tempFilePath);
						console.log(res.tempFilePath)
						this.$emit('success', res.tempFilePath)
					})
					.catch(err => {
						this.$emit('fail', err)
						new Error(JSON.stringify(err))
						console.error(JSON.stringify(err))
					})
				}
				return Promise.resolve({ctx, draw: this.draw});
			},
			async custom(cb) {
				const {ctx, draw} = await this.render({}, true)
				ctx.save()
				await cb(ctx, draw)
				ctx.restore()
				return Promise.resolve(true);
			},
			async single(args = {}) {
				await this.render(args, true)
				return Promise.resolve(true);
			},
			canvasDraw(flag = false) {
				const {ctx} = this
				return new Promise(resolve => {
					ctx.draw(flag, () => {
						resolve(true);
					});
				});
			},
			async getContext() {
				if(this.ctx && this.inited) {
					return Promise.resolve(this.ctx)
				};
				const { type, use2dCanvas, dpr, boardWidth, boardHeight } = this;
				let gcanvas = this.$refs[this.canvasId];
				this.canvas = enable(gcanvas, {bridge: WeexBridge});
				this.ctx = this.canvas.getContext('2d');
				this.inited = true;
				return Promise.resolve(this.ctx)
			},
			canvasToTempFilePath(args = {}) {
			  const {ctx, canvasId} = this
			  return new Promise((resolve, reject) => {
			    let { top = 0, left = 0, width, height } = this.boundary || this
				ctx.toTempFilePath(
					left,
					top,
					width,
					height,
					width,
					height,
					args.fileType || this.fileType,
					args.quality || 1,
					function(res) {
						resolve(res)
					}
				);
			  })
			}
		}
	}
</script>