<template>
  <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
    <el-row>
      <el-col :span="24">
        <el-form-item label="通知标题:" prop="noticeTitle">
          <el-input v-model="ruleForm.noticeTitle" class="width100"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="通知来源:" prop="noticeSource">
          <el-input v-model="ruleForm.noticeSource" class="width100"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="有效时长:">
          <el-input v-model="ruleForm.validDays" class="width100"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-form-item label="通知内容:" prop="noticeContent">
        <quill-editor v-model="ruleForm.noticeContent" class="editor ql-editor" ref="myQuillEditor"
          :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
          @change="onEditorChange($event)" @ready="onEditorReady($event)"></quill-editor>
      </el-form-item>
    </el-row>
    <!-- <el-row>
        <el-col :span="8">
          <el-form-item label="附件:" prop="noticeFileUrl">
            <el-upload action multiple :auto-upload="false" :limit="1" :on-change="handleChange"
              :before-upload="beforeUpload">
              <el-button icon="el-icon-upload" type="primary">上传</el-button>
              <div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row> -->
    <!-- 隐藏上传按钮 用于代替触发富文本上传事件 -->
    <div v-show="false">
      <el-upload action multiple :auto-upload="false" :on-change="RichTexthandleChange" :before-upload="beforeUpload"
        class="richUpload">
        <el-button icon="el-icon-upload" type="primary">上传</el-button>
        <div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
      </el-upload>
    </div>
    <el-form-item v-if="formData.isButtonFlag" class="text-center">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="submitForm" plain>确定</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  import { addSysNotice, updateSysNotice } from "@/api/sysNotice.js";
  import { upload } from "@/api/file.js";
  import store from '@/store'
  import { quillEditor } from "vue-quill-editor";
  export default {
    props: {
      formData: {
        type: Object,
        default: () => { }
      }
    },
    components: { quillEditor },
    data () {
      return {
        ruleForm: {
          noticeTitle: "",
          noticeContent: "",
          noticeFileUrl: "",
          noticeSource: "",
          validDays: 14,
          noticeType: "1"
        },
        rules: {
          noticeTitle: [
            { required: true, message: "请输入通知标题", trigger: "blur" }
          ],
          noticeContent: [
            { required: true, message: "请输入通知内容", trigger: "blur" }
          ],
          noticeSource: [
            { required: true, message: "请输入通知来源", trigger: "blur" }
          ]
        },
        // 富文本编辑器配置
        editorOption: {
          theme: "snow", // or 'bubble'
          modules: {
            toolbar: {
              container: [
                ["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] }], // 标题
                [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                // [{ font: ['songti'] }], // 字体种类
                [{ align: [] }], // 对齐方式
                ["clean"], // 清除文本格式
                ["image", "video"] // 链接、图片、视频
              ],
              handlers: {
                image: function (value) {
                  if (value) {
                    // 用upload的点击事件代替文本编辑器的图片上传事件
                    document.querySelector(".richUpload input").click();
                  } else {
                    this.quill.format("image", false);
                  }
                }
              }
            }
          },
          placeholder: "请输入正文"
        }
      };
    },
    mounted () {
      this.$nextTick(() => {
        //创建富文本粘贴事件监听
        let quill = this.$refs.myQuillEditor.quill;
        this.$forceUpdate();
        quill.root.addEventListener(
          "paste",
          evt => {
            if (
              evt.clipboardData &&
              evt.clipboardData.files &&
              evt.clipboardData.files.length
            ) {
              evt.preventDefault();
              [].forEach.call(evt.clipboardData.files, file => {
                if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
                  return;
                }
                that.clipboardPictureChange(file);
              });
            }
          },
          false
        )
      })
      if (!this.formData.isButtonFlag) {
        this.getDetailInfo(this.formData)
      }
      if (this.formData.edit) {
        this.getDetailInfo(this.formData)
      }
    },
    methods: {
      /**
       * @description: submitForm
       * @author: renchao
       */
      submitForm () {
        let that = this;
        that.$refs.ruleForm.validate(valid => {
          if (valid) {
            if (that.ruleForm.bsmNotice) {
              that.editNotice();
            } else {
              that.addNotice();
            }
          } else {
            return false;
          }
        });
      },
      //关闭窗口
      /**
       * @description: 关闭窗口
       * @author: renchao
       */
      closeDialog () {
        this.$popupCacel()
        this.resetRuleForm();
      },
      //新增通知
      /**
       * @description: 新增通知
       * @author: renchao
       */
      addNotice () {
        // 解决报错
        // this.ruleForm.noticeType = "1"
        addSysNotice(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.$message.success("保存成功");
            store.dispatch("user/refreshPage", true);
            this.$popupCacel()
            this.resetRuleForm();
          } else {
            this.$message.error(res.message);
          }
        });
      },
      //编辑通知
      /**
       * @description: 编辑通知
       * @author: renchao
       */
      editNotice () {
        updateSysNotice(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.$message.success("编辑成功");
            this.$popupCacel()
            this.resetRuleForm();
            store.dispatch("user/refreshPage", true);
          } else {
            this.$message.error(res.message);
          }
        });
      },
      /**
       * @description: 重置表单
       * @author: renchao
       */
      resetRuleForm () {
        this.ruleForm = {
          noticeTitle: "",
          noticeContent: "",
          noticeFileUrl: "",
          noticeSource: "",
          validDays: 14,
          noticeType: "1"
        }
      },
      /**
       * @description: beforeUpload
       * @param {*} file
       * @author: renchao
       */
      beforeUpload (file) {
        return true;
      },
      //附件上传事件
      /**
       * @description: 附件上传事件
       * @param {*} file
       * @author: renchao
       */
      async handleChange (file) {
        var formdata = new FormData();
        formdata.append("file", file.raw);
        upload(formdata).then(res => {
          this.ruleForm.noticeFileUrl = res.message;
        });
      },
      //富文本图片上传事件
      /**
       * @description: 富文本图片上传事件
       * @param {*} file
       * @author: renchao
       */
      RichTexthandleChange (file) {
        this.uploadPicture(file.raw)
      },
      //图片粘贴事件
      /**
       * @description: 图片粘贴事件
       * @param {*} file
       * @author: renchao
       */
      clipboardPictureChange (file) {
        this.uploadPicture(file)
      },
      /**
       * @description: getDetailInfo
       * @param {*} item
       * @author: renchao
       */
      getDetailInfo (item) {
        this.ruleForm = item
      },
      /**
       * @description: uploadPicture
       * @param {*} file
       * @author: renchao
       */
      uploadPicture (file) {
        let that = this;
        var formdata = new FormData();
        formdata.append("file", file);
        upload(formdata).then(res => {
          //editor对象
          const quill = that.$refs.myQuillEditor.quill;
          // 如果上传成功
          // 获取光标所在位置
          const length = quill.selection.savedRange.index;
          // 插入图片
          quill.insertEmbed(length, "image", res.message);
          // 调整光标到最后
          quill.setSelection(length + 1);
        });
      },
      /**
       * @description: onSubmit
       * @author: renchao
       */
      onSubmit () {
        //console.log("submit!");
      },
      // 失去焦点事件
      /**
       * @description: 失去焦点事件
       * @param {*} quill
       * @author: renchao
       */
      onEditorBlur (quill) {
        //console.log("editor blur!", quill);
      },
      // 获得焦点事件
      /**
       * @description: 获得焦点事件
       * @param {*} quill
       * @author: renchao
       */
      onEditorFocus (quill) {
        //console.log("editor focus!", quill);
      },
      // 准备富文本编辑器
      /**
       * @description: 准备富文本编辑器
       * @param {*} quill
       * @author: renchao
       */
      onEditorReady (quill) {
        //console.log("editor ready!", quill);
      },
      // 内容改变事件
      /**
       * @description: 内容改变事件
       * @param {*} quill
       * @param {*} html
       * @param {*} text
       * @author: renchao
       */
      onEditorChange ({ quill, html, text }) {
        //console.log("editor change!", quill, html, text);
        //this.content = html;
      }
    }
  };
</script>
<style scoped lang="scss">
  @import "~@/styles/dialogBoxheader.scss";

  .quill-editor {
    padding: 0;
  }

  .ql-editor {
    height: auto !important;
  }

  /deep/.ql-container {
    padding: 0;
    max-height: 400px;
    min-height: 160px;
    overflow-y: scroll;
  }
</style>