<template>
  <div class='tinymce'>
    <editor id='tinymce' v-model='lookData.content' :init='init'></editor>
    <div>
      <div class="imgInter" @click="showDialog()">插入图片</div>
      <div class="MP3Inter" @click="showDialogMP3()">插入音频</div>
    </div>
    <el-dialog
      title="插入图片"
      :visible.sync="dialogVisible"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      center
      :append-to-body="true"
      width="550px">
      <el-form label-width="80px">
        <el-form-item label="图片">
          <el-upload
            action="/api/public/upload"
            :http-request="uploadFile"
            :on-remove="removeFile"
            :before-upload="beforeAvatarUploadImg"
            drag
            :on-exceed="handleExceed"
            multiple
            :limit="1"
            :file-list="form.imgList">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="铺满">
          <el-switch
            v-model="form.big">
          </el-switch>
        </el-form-item>
        <el-form-item label="居中">
          <el-switch
            v-model="form.center">
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="imgInter">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="插入音频"
      :visible.sync="dialogVisibleMp3"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      center
      :append-to-body="true"
      width="550px">
      <el-form label-width="80px">
        <el-form-item label="音频">
          <el-upload
            action="/api/public/upload"
            :http-request="uploadFileMp3"
            :before-upload="beforeAvatarUploadAudio"
            :on-remove="removeFileMp3"
            drag
            :on-exceed="handleExceed"
            multiple
            :limit="1"
            :file-list="radio">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传MP3文件，且不超过10MB</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleMp3 = false">取 消</el-button>
        <el-button type="primary" @click="audioInter">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
  import tinymce from 'tinymce/tinymce'
  import 'tinymce/themes/modern/theme'
  import Editor from '@tinymce/tinymce-vue'
  import 'tinymce/plugins/link'
  import 'tinymce/plugins/code'
  import 'tinymce/plugins/table'
  import 'tinymce/plugins/lists'
  import 'tinymce/plugins/contextmenu'
  import 'tinymce/plugins/wordcount'
  import 'tinymce/plugins/textcolor'
  import 'tinymce/plugins/colorpicker'
  import 'tinymce/plugins/preview'
  import 'tinymce/plugins/fullpage'
  import 'tinymce/plugins/textpattern'
  import 'tinymce/plugins/colorpicker'
  import 'tinymce/plugins/media'
  import {uploadFileApi} from "../../service/api";

  export default {
    name: 'tinymce',
    props:[
      'lookData'
    ],
    data () {
      return {
        dialogVisibleMp3:false,
        radio:[],
        imageType:false,
        form:{
          imgList:[],
          big:false,
          weight:'',
          center:true
        },
        show:'',
        dialogVisible:false,
        init: {
          toolbar:'bold italic underline strikethrough | fontselect | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | ',
          language_url: '/static/tinymce/zh_CN.js',
          language: 'zh_CN',
          skin_url: '/static/tinymce/skins/lightgray',
          height: 500,
          plugins: 'preview textpattern colorpicker lists code colorpicker fullpage textcolor wordcount contextmenu media',
          branding: false
        }
      }
    },
    activated(){
      this.show = true
    },
    deactivated(){
    },
    mounted () {

    },
    methods:{
      beforeAvatarUploadImg(file){
        const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png' );
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
        }
        return isJPG;
      },
      beforeAvatarUploadAudio(file){
        const isJPG = (file.type === 'audio/mp3' );
        if (!isJPG) {
          this.$message.error('上传音频只能选择MP3格式!');
        }
        return isJPG;
      },
      imgInter(){
        if(this.form.imgList.length < 1){
          this.$message({
            type: 'error',
            message: '请选择图片'
          });
          return false
        }
        let ImageStyle = '';
        if(this.form.big){
          ImageStyle += 'width:100%;'
        }else{
          ImageStyle += 'width:70%'
        }
        if(this.form.center){
          ImageStyle = 'display:block;margin:auto'
        }
        let str= `<img src="${this.form.imgList[0].url}" style="${ImageStyle}"/>`;
        tinymce.activeEditor.insertContent(str);
        this.dialogVisible = false
      },
      audioInter(){
        if(this.radio.length < 1){
          this.$message({
            type: 'error',
            message: '请选择音频'
          });
          return false
        }
        let str = `<p style="text-align: center"><img class="mce-object mce-object-audio" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="280" height="55" data-mce-p-controls="controls" data-mce-html="%0A%3Csource%20src%3D%22https%3A//cdn.singsingenglish.com/${this.radio[0].url}%22%20type%3D%22audio/mpeg%22%20/%3E" data-mce-object="audio"></p>`;
        tinymce.activeEditor.insertContent(str);
        this.dialogVisibleMp3 = false
      },
      uploadFile(a){
          uploadFileApi({file:a.file,type:'local'}).then(res=>{
            this.$message({
              type: 'success',
              message: '上传成功!'
            });
            this.form.imgList = [{name:res.name,url:process.env.IMAGE_URL_HEAD + res.url}];
          })
      },
      uploadFileMp3(a){
          uploadFileApi({file:a.file,type:'local'}).then(res=>{
            this.$message({
              type: 'success',
              message: '上传成功!'
            });
            this.radio = [{name:res.name,url:res.url}];
          })
      },
      showDialogMP3(){
        this.dialogVisibleMp3 = true;
        this.radio = []
      },
      showDialog(){
        this.dialogVisible = true;
        this.form={
          imgList:[],
            big:false,
            weight:'',
            center:true
        }
      },
      removeFile(){},
      removeFileMp3(){},
      handleExceed(){}
    },
    created:function(){
      tinymce.init({})
    },
    components: {Editor}
  }
</script>
<style scoped lang="less">
  @import "../../util/public";
  .tinymce{
    position: relative;
    .clear-both;
    .MP3Inter{
      position: absolute;
      display: inline-block;
      text-shadow: 0 1px 1px rgba(255,255,255,0.75);
      top: 3px;
      left: 400px;
      box-shadow: none;
      filter: none;
      padding: 4px 6px;
      border: 1px solid transparent;
      &:hover{
        border-color: #e2e4e7;
        cursor: pointer;
      }
    }
    .imgInter{
      position: absolute;
      display: inline-block;
      text-shadow: 0 1px 1px rgba(255,255,255,0.75);
      top: 3px;
      left: 330px;
      box-shadow: none;
      filter: none;
      padding: 4px 6px;
      border: 1px solid transparent;
      &:hover{
        border-color: #e2e4e7;
        cursor: pointer;
      }
    }
  }
</style>