<template>
  <div style="display: flex; flex-wrap: wrap;width: 100%;">
    <div v-for="item in newFieldValue.displayValue" :key="item">
      <AntdAuthImage :auth-src="getThumbnailImageSrc(item)" :width="64" :height="64" :preview-src="getImageSrc(item)" />
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>

import Common from '../../common/Common.js';
import { notificationError } from '../../common/notification.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 {
      newFieldValue: {
        displayValue: [],
        displayType: 'String',
      },
      modalImgSrc: null,
      loading: false,
      modal: false,
    };
  },

  watch:{
    fieldValue: {
      handler: function (newValue, oldValue) {
        if (newValue !== oldValue) {
          if (newValue.displayValue != undefined && newValue.displayValue.length > 0) {
            this.newFieldValue.displayValue = newValue.displayValue[0].split(',');
          }else{
            this.newFieldValue.displayValue = [];
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted: function () {
    var _self = this;
    var displayValue = _self.fieldValue.displayValue;
    if (displayValue != undefined && displayValue.length > 0) {
      _self.newFieldValue.displayValue = displayValue[0].split(',');
    }
  },

  methods: {
    /**
         * 预览图片
         */
    previewImg: function (imgSrc) {
      this.modalImgSrc = imgSrc;
      this.modal = true;
    },
    /**
         * 删除图片
         * @param  {String} item 图片Name
         */
    removeImage(item) {
      let _self = this;
      var index = _self.newFieldValue.displayValue.indexOf(item);
      if (index > -1) {
        _self.newFieldValue.displayValue.splice(index, 1);
      }
      var images = _self.newFieldValue.displayValue.join(',');
      _self.fieldValue.displayValue[0] = images;
      this.$emit('valueChanged', _self.fieldValue);
    },

    /**
         * 选择图片发生改变
         * @param  {[type]} e [description]
         * @return {[type]}   [description]
         */
    onFileChange(e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;
      this.uploadImage(files[0]);
    },
    /**
         * 上传图片
         * @param  {File} selectedFile 选择的文件
         */
    uploadImage: function (selectedFile) {
      var _self = this;
      if (selectedFile == undefined) {
        return;
      }
      if (!/image\/\w+/.test(selectedFile.type)) {
        alert('请确保文件为图像类型');
        return;
      }
      var formData = new FormData();
      formData.append('images', selectedFile);
      formData.append('className', _self.className);
      _self.loading = true;
      $.ajax({
        url: Common.getApiURL('file/imageUpload'),
        type: 'post',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {
          _self.loading = false;
          if (data.errorCode == 0) {
            _self.addImgs(data.datas);
          } else {
            notificationError(data.errorMessage, '图片上传失败');
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading = false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
         * 添加图片
         * @param {String} imageName 添加的图片名称
         */
    addImgs: function (imageNames) {
      var _self = this;
      if (_self.newFieldValue.displayValue == undefined) {
        _self.newFieldValue.displayValue = new Array();
      }
      if (imageNames != null) {
        imageNames.forEach(element => {
          _self.newFieldValue.displayValue.push(element);
        });
      }

      var images = _self.newFieldValue.displayValue.join(',');
      _self.fieldValue.displayValue[0] = images;
      this.$emit('valueChanged', _self.fieldValue);
    },
    /**
     * 获取图片地址
     * @param  {String} item 图片名称
     * @return {String}      图片URL地址
     */
    getImageSrc: function (item) {
      var _self = this;
      if (item != undefined && item != null) {
        return Common.getImageSrc(_self.className, item);
      } else {
        return '';
      }
    },

    /**
     * 获取图片缩略图地址
     * @param  {String} item 图片名称
     * @return {String}      图片URL地址
     */
    getThumbnailImageSrc: function (item) {
      var _self = this;
      if (item != undefined && item != null) {
        return Common.getThumbnailImageSrc(_self.className, item);
      } else {
        return '';
      }
    },
  },
};
</script>

<style scoped>
.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.room_img {
  width: 150px;
  height: 100px;
  float: left;
  margin-right: 10px;
}

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

.room_img span {
  position: relative;
  right: -130px;
  top: -100px;
  font-size: 20px;
  color: red;
}

.label-btn {
  color: white;
  background-color: #006699;
  display: inline-block;
  padding: 5px 15px;
  border-radius: 5px;
}

.label-btn:hover {
  color: white;
  background-color: #003399;
  display: inline-block;
  padding: 5px 15px;
  border-radius: 5px;
  cursor: pointer;
}

.modal-img-box {
  width: 100%;
  text-align: center;
  overflow: auto;
}

.m-small-img {
  cursor: pointer;
}

.m-img {
  width: 100%;
}
</style>