<template>
  <div v-if="img"
       :style="{
      width: `${mini === true ? miniWidth : maxWidth}px`,
      height: `${mini === true ? miniHeight : maxHeight}px`
    }">
    <img v-if="mini === true && hoverMax === false && visible"
         :src="src"
         @error="error"
         :style="{
        width: `${miniWidth}px`,
        height: `${miniHeight}px`,
        border: 'none'
      }" />
    <el-popover v-else-if="mini === true && hoverMax === true"
                trigger="hover"
                placement="right">
      <img :src="src"
           v-if="visible"
           @error="error"
           :style="{
          width: `${maxWidth}px`,
          height: `${maxHeight}px`,
          border: 'none'
        }" />
      <div slot="reference"
           style=" display: flex;flex-direction: row;justify-content:center;align-items:center;">
        <img :src="src"
             v-if="visible"
             @error="error"
             :style="{
            width: `${miniWidth}px`,
            height: `${miniHeight}px`,
            border: 'none'
          }" />
      </div>
    </el-popover>
    <img v-if="mini === false && visible"
         :src="src"
         @error="error"
         :style="{
        width: `${maxWidth}px`,
        height: `${maxHeight}px`,
        border: 'none'
      }" />
  </div>
</template>
<script>
import ElPopover from 'mk-element/packages/popover';

export default {
  name: 'mk-img-view',
  components: {
    ElPopover
  },
  data() {
    return {
      visible: true,
      src: null
    };
  },
  props: {
    img: { type: String },
    def: { type: String, default: '//static.emeker.com/common/nopic.png' },
    mini: { type: Boolean, default: false },
    hoverMax: { type: Boolean, default: false },
    miniWidth: { type: Number, default: 20 },
    miniHeight: { type: Number, default: 20 },
    maxWidth: { type: Number, default: 150 },
    maxHeight: { type: Number, default: 150 }
  },
  created() {
    this.src = this.img || this.def;
  },
  watch: {
    img: function() {
      this.src = this.img || this.def;
    }
  },
  methods: {
    error() {
      this.src = this.def;
    }
  }
};
</script>
