<template>
  <div>
    <div
      v-if="hasImage"
    >
      <AntdAuthImage
        :width="64"
        :height="40"
        :auth-src="imageThumbnailSrc"
        :preview-src="imageSrc"
      />
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>
import Common from '../../common/Common.js';


import AntdAuthImage from '../../widget/AntdAuthImage.vue';

export default {

  components: {
    AntdAuthImage, 
  },

  
  props: {
   
    className: {
      type: String,
      default: null,
    },
    field: {
      type: Object,
      default : function(){
        return null;
      },
    },
    fieldValue: {
      type: Object,
      default : function(){
        return null;
      },
    },
  },
  
  emits: ['valueChanged'],

  data: function () {
    this.Common = Common;
    return {
      //imgs : []
      modalImgSrc: null,
      loading: false,
      modal: false,
    };
  },

  computed: {
    /**
     * 图片的地址
     */
    imageSrc: function () {
      var _self = this;
      if (this.fieldValue != undefined && this.fieldValue.displayValue != undefined) {
        var imageName = this.fieldValue.displayValue[0];
        return Common.getImageSrc(_self.className, imageName);
      } else {
        return '';
      }
    },
    /**
     * 图片缩略图的地址
     */
    imageThumbnailSrc: function () {
      var _self = this;
      if (this.fieldValue != undefined && this.fieldValue.displayValue != undefined) {
        var imageName = this.fieldValue.displayValue[0];
        return Common.getThumbnailImageSrc(_self.className, imageName);
      } else {
        return '';
      }
    },

    // 是否有图片
    hasImage: function () {
      if (this.fieldValue != undefined
                && this.fieldValue.displayValue != undefined
                && this.fieldValue.displayValue[0] != undefined
                && this.fieldValue.displayValue[0].length > 0) {
        return true;
      } else {
        return false;
      }
    },
  },

  methods: {
    /**
         * 预览图片
         */
    previewImg: function (imgSrc) {
      this.modalImgSrc = imgSrc;
      this.modal = true;
    },
    // 删除图片
    removeImage() {
      var newFieldValue = {
        displayValue: [],
        fieldType: 'String',
      };
      this.$emit('valueChanged', newFieldValue);
    },

  },
};
</script>

<style scoped>
.finish_room {
    width: 400px;
    height: auto;
}

.finish_room2 {
    width: 100%;
    height: auto;
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
}

.finish_room2 .room_img {
    width: 150px;
    height: 100px;
    margin-right: 10px;
    position: relative;
    overflow: hidden;
}

.finish_room2 .room_img img {
    width: 100%;
    height: 100%;
}

.finish_room2 > .room_img span {
    position: absolute;
    width: auto;
    height: auto;
    right: 5px;
    bottom: 3px;
}

.room_add_img {
    width: 148px;
    height: 98px;
    border: 1px solid #e1e1e1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.room_add_img > span:nth-child(1) {
    margin-top: 20px;
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.room_add_img > span:nth-child(2) {
    margin-bottom: 10px;
}

.room_add_img input {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
    opacity: 0;
}
.modal-img-box {
    width: 100%;
    text-align: center;
    overflow: auto;
}

.m-img {
    width: 100%;
}

.m-small-img {
    cursor: pointer;
}
</style>