<style>
</style>
<template id="app-rich-text">
  <div class="app-rich-text">
    <textarea style="width: 100%" :id="id"></textarea>
    <app-attachment v-show="attachmentDialogVisible" style="height:0;" :uploadMultple="uploadMultple"
      :openDialog="attachmentDialogVisible" :chooseMultple="chooseMultple" @closed="attachmentClosed"
      @selected="attachmentSelected" :uploadType="uploadType">
    </app-attachment>
  </div>
</template>
<script>
  import appAttachment from '../attachment/app-attachment'
  export default {
    props: {
      value: null,
      //上传单选还是多选
      uploadMultple: false,
      //文件单选还是多选
      chooseMultple: false,
      //插入图片图标
      labelIcon: {
        type: String,
        default: '插入图片',
      },
      //是否显示插入图片
      isShowInsertImage: {
        type: Boolean,
        default: true
      },
      //是否显示上传附件
      isShowAttachment: {
        type: Boolean,
        default: true
      },
      //是否显示音频
      isShowVoice: {
        type: Boolean,
        default: true
      },
      //UEEditor配置信息
      config: {
        type: Object
      },
    },
    components: {
      appAttachment
    },
    data() {
      return {
        attachmentDialogVisible: false, //上传附件弹窗
        id: 'app-rich-text-' + (Math.floor((Math.random() * 10000) + 1)),
        ue: null,
        tempContent: this.value,
        isInputChange: false,
        uploadType: "1", //1-上传图片，2-上传附件,3-上传音频
      };
    },
    watch: {
      value(newVal, oldVal) {
        if (!this.isInputChange && newVal) {
          if (this.ue) {
            if (this.ue.isReady !== 1) {
              let self = this;
              let time = setInterval(() => {
                //循环查
                if (self.ue.isReady === 1) {
                  clearInterval(time);
                  self.ue.setContent(newVal);
                  self.isInputChange = false;
                }
              }, 100);
              return;
            }
            this.ue.setContent(newVal);
          } else {
            this.tempContent = newVal;
          }
        }
        this.isInputChange = false;
      },
    },
    mounted() {
      this.loadUe();
    },
    methods: {
      //关闭上传文件弹窗
      attachmentClosed() {
        this.attachmentDialogVisible = false;
      },
      //选择文件弹窗
      attachmentSelected(e) {
        if (e.length) {
          let html = '';
          if (this.uploadType == 1) {
            for (let i in e) {
              html += '<img src="' + e[i].fileUrl + '" style="max-width: 100%;">';
            }
          }
          if (this.uploadType == 2) {
            for (let i in e) {
              var type = e[i].fileName.split('.')[1];
              if(type=='xlsx'||type=='xls'){
                html +=
                  `<p><span contenteditable="false" style="display:-webkit-box;margin-top:10px;background: #F7F8FA;padding: 14px 16px;max-width: 572px;overflow: hidden;cursor:pointer;-webkit-box-align: center;text-align:left;cursor:pointer;" name="${e[i].fileName}" data="xls">` +
                  `<img src="http://mooc2-ans.chaoxing.com/images/questionbank/icon/excel.png" style="width:42px; height:42px; overflow:hidden; margin-right:14px;border-radius:4px;"><span style="font-size:14px; color:#181E33; line-height:20px; display:block; overflow:hidden;  text-overflow:ellipsis;">${e[i].fileName}</span></span></p>`
              }
              if(type=='txt'){
                html +=
                `<p><span contenteditable="false" style="display:-webkit-box;margin-top:10px;background: #F7F8FA;padding: 14px 16px;max-width: 572px;overflow: hidden;cursor:pointer;-webkit-box-align: center;text-align:left;cursor:pointer;" name="${e[i].fileName}" data="xls">` +
                `<img src="http://mooc2-ans.chaoxing.com/images/questionbank/icon/txt.png" style="width:42px; height:42px; overflow:hidden; margin-right:14px;border-radius:4px;"><span style="font-size:14px; color:#181E33; line-height:20px; display:block; overflow:hidden;  text-overflow:ellipsis;">${e[i].fileName}</span></span></p>`
              }
              if(type=='ppt'||type=='pptx'){
                html +=
                `<p><span contenteditable="false" style="display:-webkit-box;margin-top:10px;background: #F7F8FA;padding: 14px 16px;max-width: 572px;overflow: hidden;cursor:pointer;-webkit-box-align: center;text-align:left;cursor:pointer;" name="${e[i].fileName}" data="xls">` +
                `<img src="http://mooc2-ans.chaoxing.com/images/questionbank/icon/ppt.png" style="width:42px; height:42px; overflow:hidden; margin-right:14px;border-radius:4px;"><span style="font-size:14px; color:#181E33; line-height:20px; display:block; overflow:hidden;  text-overflow:ellipsis;">${e[i].fileName}</span></span></p>`
              }
            }
          }
          this.ue.execCommand('inserthtml', html);
        }
        this.attachmentDialogVisible = false;
      },
      loadUe() {
        const _this = this;
        //上传附件
        if (_this.isShowInsertImage) {
          UE.registerUI('self-image', (editor, uiName) => {
            return new UE.ui.Button({
              name: uiName,
              title: _this.labelIcon,
              onclick() {
                _this.ue = editor
                _this.uploadType = "1"
                _this.attachmentDialogVisible = true;
              },
            });
          });
        }
        //上传附件
        if (_this.isShowAttachment) {
          UE.registerUI('self-attachment', (editor, uiName) => {
            return new UE.ui.Button({
              name: uiName,
              title: "附件",
              onclick() {
                _this.ue = editor
                _this.uploadType = "2"
                _this.attachmentDialogVisible = true;
              },
            });
          });
        }
        //是否显示音频
        if (_this.isShowVoice) {
          UE.registerUI('self-video', (editor, uiName) => {
            return new UE.ui.Button({
              name: uiName,
              title: "音频",
              onclick() {
                _this.ue = editor
                _this.uploadType = "3"
                _this.attachmentDialogVisible = true;
              },
            });
          });
        }
        this.ue = UE.getEditor(this.id, this.config);
        this.ue.addListener('ready', editor => {
          if (this.tempContent) {
            this.ue.setContent(this.tempContent);
          }
        });
        this.ue.addListener('keyup', editor => {
          this.isInputChange = true;
          this.$emit('input', this.ue.getContent());
        });
        this.ue.addListener('contentChange', editor => {
          this.isInputChange = true;
          this.$emit('input', this.ue.getContent());
        });
      }
    },
  }

</script>
