<template>
	<div
		class="editx-image"
		v-if="url !== null"
		:style="{
			width: width + 'px',
			height: height + 'px',
			borderRadius: radius + 'px',
			boxShadow: `0 0 ${shadow}px rgba(0,0,0,.1)`
		}"
	>
		<img  v-if="url" :src="url" :alt="title"/>
		<div v-else class="iconfont icontuxiangma" :style="{fontSize: fontSize + 'px'}"></div>
	</div>
</template>

<script>
  
  export default {
    name: "XdImage",
		props: {
      imageUrl: {
        type: String
			},
			styleSize: {
        type: String,
				default: 'size4'
			},
			title: {
        type: String,
        default: 'logo'
			},
			width: {
        type: Number|String,
				default: 100,
			},
      height: {
        type: Number | String,
        default: 100,
      },
      radius: {
        type: Number | String,
        default: 0,
			},
      shadow: {
        type: Number | String,
        default: 0,
      },
      
		},
		data(){
      return {
        url: null,
				fontSize: 50
			}
		},
		
		created(){
      let width = this.width,
				height = this.height;
      if(this.$xdHelper.checkVarType(this.width) === 'string' && /\d/.test(this.width)) {
        width = Number(this.width)
			}
      if (this.$xdHelper.checkVarType(this.height) === 'string' && /\d/.test(this.height)) {
        height = Number(this.height)
      }
      this.fontSize = width * 45 / 100;
      this.getImage();
      
		},
		
		methods: {
      checkImage(url) {
        return new Promise((resolve, reject) => {
          let img = new Image();
          img.onload = () => {
            resolve(true)
          }
          img.onerror = () => {
            resolve(false)
          }
          img.src = url;
        })
      },

      async getImage() {
        let url = this.getImageFullPath(this.imageUrl, this.styleSize);
        let status = await this.checkImage(url);
        if(status) this.url = url;
        else this.url = ''
      },
		}
  }
</script>

<style scoped lang="scss">
	.editx-image {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		
		& > img {
			max-height: 100%;
			max-width: 100%;
		}
		
		& > .iconfont.icontuxiangma {
			font-size: 50px;
			color: #ccc;
		}
	}
</style>
