<template>
	<view :id="id" :name="name" :change:name="svg.nameChange" :width="width" :height="height"
		:change:width="svg.widthChange" :change:height="svg.heightChange" :style="{width:boxWidth,height:boxHight}"></view>
</template>
<script>
	export default {
		props: {
			id: {
				type: String,
				default: ''
			},
			name: {
				type: String,
				default: ''
			},
			width: {
				type: Number,
				default: 0
			},
			height: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				boxWidth: '',
				boxHight: ''
			}
		},
		methods: {
			onMessage({
				width,
				height
			}) {
				this.boxWidth = width + 'px';
				this.boxHight = height + 'px';
			}
		}
	}
</script>
<script module="svg" lang="renderjs">
	import {
		SVG
	} from '../../svg.js';
	export default {
		mounted() {
			this.init()
		},
		methods: {
			init() {
				const icon = require(`@/static/svg/${this.name}.svg`)
				const img = new Image();
				img.src = icon;
				img.onload = () => {
					const width = this.width ? this.width : img.width;
					const height = this.height ? this.height : img.height;
					this.$ownerInstance.callMethod('onMessage', {
						width,
						height
					})
					let draw = SVG().addTo(`#${this.id}`).size(width, height)
					draw.image(icon).size(width, height)
				}

			}
		}
	}
</script>

<style scoped>

</style>