<template>
	<image v-if="type == 'img'" class="_wh100" :src="srcdata" :mode="mode" :style="cstyle" />
	<view v-else-if="type == 'svg'" class="_wh100" :style="cstyle"></view>
</template>

<style scoped>
	._wh100 {
		width: 100%;
		height: 100%;
	}
</style>
<script>
	export default {
		options: {
			virtualHost: false
		},
		props: {
			src: {
				type: String,
				default: ''
			},
			mode: {
				type: String,
				default: 'widthFix'
			},
			ciystyle: {
				type: [String, Object]
			}
		},
		data() {
			return {
				type: '',
				srcdata: '',
			};
		},
		watch: {
			src: {
				handler(newD, oldD) {
					if (typeof(newD) != 'string')
						return;
					if (newD.substring(0, 5).toLowerCase() == '<svg ') {
						this.type = 'svg';
						this.srcdata = this.svg2bg(newD);
						return;
					}
					var ext = this.file_ext(newD);
					if (ext == 'SVG') {
						uni.request({
							url: this.file_stor(newD),
							dataType: 'text',
							method: 'GET',
							fail: res => {
								res._url = url;
								this.uperr("h5.loadsvg.fail", res);
								return reject({
									errmsg: res.errMsg
								});
							},
							success: res => {
								this.type = 'svg';
								this.srcdata = this.svg2bg(res.data);
							}
						});
					} else {
						this.type = 'img';
						this.srcdata = this.file_stor(newD);
					}
				},
				immediate: true
			},

		},
		computed: {
			cstyle() {
				var csty = this.style2obj(this.ciystyle);
				if (this.type == 'svg' && this.srcdata) {
					if (!csty['display'])
						csty['display'] = 'inline-block';
					csty['backgroundImage'] = this.srcdata;
				}
				return csty;
			}
		},
		mounted() {},
		methods: {}
	}
</script>