<template>
  <div class="unified-box">
    <vue-ueditor-wrap v-model="ueditor" :config="editorConfig" />
    <div v-if="disabled" class="unified-mark" />
  </div>

</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    content: {
      type: String,
      default: ''
    },
    editorId: {
      type: String,
      default: 'editorId'
    },
    config: {
      type: Object,
      default: () => {
        return {
          initialFrameWidth: null,
          initialFrameHeight: 300,
          fullscreen: false
        }
      }
    }
  },
  data() {
    return {
      ueditor: '',
      editorConfig: {
        toolbars: [
          [
            'fullscreen',
            'source',
            '|',
            'undo',
            'redo',
            '|',
            'bold',
            'italic',
            'underline',
            'fontborder',
            'strikethrough',
            'superscript',
            'subscript',
            'removeformat',
            'formatmatch',
            'autotypeset',
            'blockquote',
            'pasteplain',
            '|',
            'forecolor',
            'backcolor',
            'insertorderedlist',
            'insertunorderedlist',
            'selectall',
            'cleardoc',
            '|',
            'rowspacingtop',
            'rowspacingbottom',
            'lineheight',
            '|',
            'customstyle',
            'paragraph',
            'fontfamily',
            'fontsize',
            // "|",
            // "directionalityltr",
            // "directionalityrtl",
            // "indent",
            '|',
            'justifyleft',
            'justifycenter',
            'justifyright',
            'justifyjustify',
            '|',
            // "touppercase",
            // "tolowercase",
            // "|",
            'link',
            'unlink',
            // "anchor",
            // "|",
            'imagenone',
            'imageleft',
            'imageright',
            'imagecenter',
            '|',
            // 'simpleupload',
            'insertimage',
            // "emotion",
            // "scrawl",
            // "insertvideo",
            // "music",
            // "attachment",
            // "map",
            // "gmap",
            // "insertframe",
            // "insertcode",
            // "webapp",
            'pagebreak',
            // "template",
            // "background",
            '|',
            'horizontal',
            // "date",
            // "time",
            'spechars',
            // "snapscreen",
            // "wordimage",
            '|',
            'inserttable',
            'deletetable',
            'insertparagraphbeforetable',
            'insertrow',
            'deleterow',
            'insertcol',
            'deletecol',
            'mergecells',
            'mergeright',
            'mergedown',
            'splittocells',
            'splittorows',
            'splittocols'
            // "charts",
            // "|",
            // "print",
            // "preview",
            // "searchreplace",
            // "drafts",
            // "help"
          ]
        ],
        fontfamily: [
          {
            label: '',
            name: 'songti',
            val: '宋体,SimSun'
          },
          {
            label: '仿宋',
            name: 'fangsong',
            val: '仿宋,FangSong'
          },
          {
            label: '仿宋_GB2312',
            name: 'fangsong',
            val: '仿宋_GB2312,FangSong'
          },
          {
            label: '',
            name: 'kaiti',
            val: '楷体,楷体_GB2312, SimKai'
          },
          {
            label: '',
            name: 'yahei',
            val: '微软雅黑,Microsoft YaHei'
          },
          {
            label: '',
            name: 'heiti',
            val: '黑体, SimHei'
          },
          {
            label: '',
            name: 'lishu',
            val: '隶书, SimLi'
          },
          {
            label: '',
            name: 'andaleMono',
            val: 'andale mono'
          },
          {
            label: '',
            name: 'arial',
            val: 'arial, helvetica,sans-serif'
          },
          {
            label: '',
            name: 'arialBlack',
            val: 'arial black,avant garde'
          },
          {
            label: '',
            name: 'comicSansMs',
            val: 'comic sans ms'
          },
          {
            label: '',
            name: 'impact',
            val: 'impact,chicago'
          },
          {
            label: '',
            name: 'timesNewRoman',
            val: 'times new roman'
          }
        ],
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        // 初始容器高度
        initialFrameHeight: 200,
        // 初始容器宽度
        initialFrameWidth: '100%',
        imageAllowFiles: ['.png', '.jpg', '.jpeg', '.gif', '.bmp'],
        imageCompressBorder: 1600,
        imageCompressEnable: true,
        imageFieldName: 'streamContent',
        imageInsertAlign: 'none',
        imageMaxSize: 20480000,
        // 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
        UEDITOR_HOME_URL: process.env.NODE_ENV === 'development' ? '/UEditor/' : `/factoring-trade/UEditor/`,
        // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        // serverUrl: 'https://ueditor.zhenghaochuan.com/cos',
        serverUrl: process.env.NODE_ENV === 'development' ? `${process.env.VUE_APP_BASE_API}/fileStorage/getUeconfig` : '/tradeV4-backend/fileStorage/getUeconfig',
        uploadUrl: process.env.NODE_ENV === 'development' ? `${process.env.VUE_APP_BASE_API}/fileStorage/imgUpload` : '/tradeV4-backend/fileStorage/imgUpload'
        // headers: {
        //   Authorization: '',
        //   tenantId: ''
        // }
        // headers: {
        //   token: getToken()
        // }
      }
    }
  },
  watch: {
    content: {
      handler(newV) {
        if (newV) {
          this.ueditor = newV
        }
      },
      immediate: true
    },
    ueditor: {
      handler(newV) {
        if (newV) {
          this.$emit('update:content', newV)
        }
      },
      deep: true
    }
  },
  methods: {
    getUEContent() {
      return this.ueditor
    }
  }
}
</script>

<style lang="scss" scoped>
.unified-box {
  width: 100%;
  margin-bottom: 20px;
  // position: relative;
}
.unified-box .unified-mark {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 98%;
  height: 365px;
  z-index: 999;
}

</style>

<style lang="scss">
.edui-editor {
  z-index: 0 !important;
}
</style>
