<template>
  <basic-container>
    <jl-go-back></jl-go-back>
    <el-row>
      <el-col :span="12">
        <avue-form :option="formOption" v-model="form" @submit="handleSubmit" ref="form">
          <template slot="policyFileUrl">
            <div class="policyFileUrlWrapper">
              <div class="uploadWrapperAb">
                <el-upload
                  action="#"
                  ref="upload"
                  :show-file-list="false"
                  :http-request="allUpload"
                  :multiple="false"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </div>
              <avue-input disabled v-model="policyFileUrl" placeholder="点击上传文件"></avue-input>
            </div>
          </template>
        </avue-form>

      </el-col>
      <el-col :span="12">
        <Tinymce v-model="form.note" ref="tinymce" style="height: 100%;"></Tinymce>
      </el-col>
    </el-row>
  </basic-container>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor} from "vue-quill-editor";


import {addNews, getNewsDetail, editNews} from "@/api/manage/news"
import {putFile} from "@/api/resource/oss";
import Tinymce from "@/components/Tinymce";
import {getClassifyDic} from '@/api/help/article/classify'

const toolbarItems = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
  ["blockquote", "code-block"], // 引用  代码块
  [{header: 1}, {header: 2}], // 1、2 级标题
  [{list: "ordered"}, {list: "bullet"}], // 有序、无序列表
  [{script: "sub"}, {script: "super"}], // 上标/下标
  [{indent: "-1"}, {indent: "+1"}], // 缩进
  // [{'direction': 'rtl'}],                         // 文本方向
  [{size: ["small", false, "large", "huge"]}], // 字体大小
  [{header: [1, 2, 3, 4, 5, 6, false]}], // 标题
  [{color: []}, {background: []}], // 字体颜色、字体背景颜色
  [{font: []}], // 字体种类
  [{align: []}], // 对齐方式
  ["clean"], // 清除文本格式
  ["image"], // 链接、图片、视频
]
export default {
  components: {quillEditor, Tinymce},
  props: {
    id: Number,
    type: String
  },
  mounted() {
    this.onload()
  },
  data() {
    return {
      policyFileUrl: '',
      putFile,
      imageUrl: '',
      ruleForm: {
        content: null,
      },
      form: {
        note: ''
      },
      description: '',
      formOption: {
        // labelWidth:120,
        column: [
          {
            "label": "服务时间",
            "span": 24,
            labelWidth: 100,
            "prop": "createTime",
            "rules": [
              {
                "required": true,
                "message": "请输入服务时间"
              }
            ]
          },
          {
            "label": "服务发起人",
            "span": 24,
            labelWidth: 100,
            "prop": "fromName",
            "rules": [
              {
                "required": true,
                "message": "请输入服务发起人"
              }
            ]
          },
          {
            "label": "服务对象",
            "span": 24,
            labelWidth: 100,
            "prop": "toName",
            "rules": [
              {
                "required": true,
                "message": "请输入服务对象"
              }
            ]
          },
          {
            "label": "服务主题",
            "span": 24,
            labelWidth: 100,
            "prop": "serveTheme",
            "rules": [
              {
                "required": true,
                "message": "请输入服务主题"
              }
            ]
          },
          {
            "label": "服务内容",
            "span": 24,
            labelWidth: 100,
            "prop": "serveContent",
            "rules": [
              {
                "required": true,
                "message": "请输入服务内容"
              }
            ]
          },
          {
            "label": "备注1",
            "span": 24,
            labelWidth: 100,
            "prop": "bak1",
            "rules": [
              {
                "required": true,
                "message": "请输入备注1"
              }
            ]
          },
          {
            label: "政策文件地址",
            prop: "policyFileUrl",
            span: 24,
            labelWidth: 120,
            hide: true,
            slot: true,
            formslot: true,
            showWordLimit: true,

          },
        ]

      },
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarItems,
            handlers: {
              'image': function (value) {
                if (value) {
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false);
                }
              }
            }
          },//工具菜单栏配置
        },
        placeholder: "请在这里编写文章内容", //提示
        readyOnly: false, //是否只读
        theme: "snow", //主题 snow/bubble
        syntax: true, //语法检测
      },
    };
  },
  methods: {

    // 值发生变化
    onEditorChange(editor) {
      this.content = editor.html;
    },
    handleSubmit(form, done) {
      // this.form['note'] = this.$refs.tinymce.getContent()

      if (this.form.note.length > 64 * 512) {
        this.$message.error('文章内容不能超过64KB！');
        done()
      } else {
        if (this.type == 'add') {
          addNews(
            this.form.articleTitle,
            this.form.headPic,
            this.form.articleSrc,
            this.form.articleSrcUrl,
            this.form.author,
            this.form.description,
            this.form.note,
            this.form.type
          ).then(() => {
            this.$message.success('添加成功');
            this.$router.go(-1);
          })
        } else if (this.type == 'edit') {
          editNews(
            this.id,
            this.form.articleTitle,
            this.form.headPic,
            this.form.articleSrc,
            this.form.articleSrcUrl,
            this.form.author,
            this.form.description,
            this.form.note,
            this.form.type
          ).then(() => {
            this.$message.success('修改成功');
            done()
          })
        }
      }


    },
    /*上传图片*/
    handleAvatarSuccess(res) {
      let quill = this.$refs.QuillEditor.quill
      let length = quill.getSelection().index;//获取光标所在位置
      quill.insertEmbed(length, 'image', res.data.link)
      quill.setSelection(length + 1)//光标后移一位
    },
    beforeAvatarUpload(file) {
      const isJPG = ["image/png", "image/jpeg", "image/svg+xml", "image/gif"].indexOf(file.type) != -1;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传图片格式不正确');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    onload() {
      if (this.id && this.type == 'edit') {
        getNewsDetail(this.id).then(res => {
          this.form = res.data.data;
          this.description = this.form.description;
        })
      }
    },

  },
};
</script>
<style>
.avatar-uploader {
  width: 0;
  height: 0;
  display: none;
}

.ql-editor {
  height: 400px;
}

.policyFileUrlWrapper {
  position: relative;
}

.uploadWrapperAb {
  position: absolute;
  right: 0px;
  z-index: 99;

}
</style>
