<template>
  <div>
    <div id="summernote" />
  </div>
</template>

<script>
import Common from '../../common/Common.js';
import DynamicJsLoader from '../../common/DynamicJsLoader.js';
import {notificationError} from '../../common/notification.js';
import { Notify, Uuid } from 'pc-component-v3';
export default {

  components: {
    DynamicJsLoader,
  },

  
  props: {
   
    className: {
      type: String,
      default: null,
    },
    readonly: {
      type: Boolean,
      default: null,
    },
    displayValue: {
      type: Boolean,
      default: null,
    },
    fieldValue: {
      type: Object,
      default : function(){
        return null;
      },
    },
  },

  
  emits: ['valueChanged'],


  data: function () {
    return {
      summernoteInitSuccess: false,
    };
  },

  computed: {},

  mounted: function () {
    var _self = this;
    DynamicJsLoader.loadSummernote(function () {
      $('#summernote').summernote({
        height: 400,
        minHeight: 300,
        maxHeight: 500,
        focus: true,
        lang: 'zh-CN',
        callbacks: {
          onImageUpload: function (files, editor, $editable) {
            _self.uploadImage(files[0], editor, $editable);
          },
          onChange: function (contents, $editable) {
            _self.onChange(contents);
          },
        },
      });
      $('#summernote').summernote('code', _self.displayValue);
      _self.summernoteInitSuccess = true;
      if (_self.readonly == true) {
        $('#summernote').summernote('disable');
      } else {
        $('#summernote').summernote('enable');
      }
    });
  },
  beforeUnmount: function () {
    if (this.summernoteInitSuccess == true) {
      $('#summernote').summernote('destroy');
    }
  },

  methods: {
    /**
     * 上传图片
     * @param  {File} selectedFile 选择的文件
     */
    uploadImage: function (selectedFile, element, $editable) {
      var _self = this;
      if (selectedFile == undefined) {
        return;
      }
      if (!/image\/\w+/.test(selectedFile.type)) {
        alert('请确保文件为图像类型');
        return;
      }

      if (selectedFile.size != null && selectedFile.size > 3000 * 1024) {
        Notify.error('错误', '图片大小超过限制，最大3M', true);
        element.value = '';
        return;
      }

      var formData = new FormData();
      formData.append('images', selectedFile);
      formData.append('className', _self.className);
      $.ajax({
        url: Common.getApiURL('file/imageUpload'),
        type: 'post',
        beforeSend: function (request) {
          Common.addTokenToRequest(request);
        },
        data: formData,
        contentType: false,
        processData: false,
        success: function (data) {
          if (data.errorCode == 0) {
            if(data.datas != null && data.datas.length > 0){
              data.datas.forEach(imageName => {
                $('#summernote').summernote(
                  'insertImage',
                  Common.getResourceUrl('image', _self.className, imageName),
                  'image name',
                );
              });
            }
          }else{
            notificationError(data.errorMessage, '图片上传失败');
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          Common.processException(XMLHttpRequest, textStatus, errorThrown);
        },
      });
    },

    onChange: function (contents) {
      var _self = this;
      _self.fieldValue.displayValue[0] = contents;
      this.$emit('valueChanged', _self.fieldValue);
    },
  },
};
</script>

<style scoped>
</style>