<template>
  <div class="input-group">
    <div v-if="hasImage" class="finish_room2">
      <div class="row">
        <span class="col-md-12">
          <div class="room_img">
            <AntdAuthImage :auth-src="imageSrc" />
          </div>
          <a-button v-if="!readonly" danger @click="removeImage">
            删除图片
          </a-button>
        </span>
      </div>
    </div>
    <div v-else id="app">
      <div>
        <input
          id="file"
          autocomplete="off"
          type="file"
          class="form-control"
          :readonly="!readonly"
          @change="onFileChange"
        />
      </div>
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>


import AntdAuthImage from '../../widget/AntdAuthImage.vue';
import Common from '../../common/Common.js';
import {notificationError} from '../../common/notification.js';

export default {

  components: {
    AntdAuthImage,
  },

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

  data: function () {
    this.Common = Common;
    return {
      show: false,
      loading: false,
    };
  },
  computed: {
    /**
     * 计算图片地址
     * @return {String} 图片URL地址
     */
    imageSrc: 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 '';
      }
    },

    /**
     * 判断是否有图片
     * @return {Boolean} 是否有图片
     */
    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: {
    /**
     * 删除图片
     * @param  {String} item 图片Name
     */
    removeImage() {
      var newFieldValue = {
        displayValue: [],
        fieldType: 'String',
      };
      this.$emit('valueChanged', newFieldValue);
    },

    /**
     * 选择图片发生改变
     * @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;
          console.log(data);
          if (data.errorCode == 0) {
            if(data.datas.length > 0){
              _self.addImg(data.datas[0]);
            }
          }else{
            notificationError(data.errorMessage, '图片上传失败');
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          _self.loading=false;
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },
    /**
     * 添加图片
     * @param {String} imageName 添加的图片名称
     */
    addImg: function (imageName) {
      var newFieldValue = {
        displayValue: [],
        fieldType: 'String',
      };
      newFieldValue.displayValue[0] = imageName;
      this.$emit('valueChanged', newFieldValue);
      this.show = false;
    },
    toggleShow() {
      this.show = !this.show;
    },
  },
};
</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;
}
</style>