<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/system.js";
import { upload } from "@/api/file.js";
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: {
    submitForm () {
      let that = this;
      that.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (that.ruleForm.bsmNotice) {
            that.editNotice();
          } else {
            that.addNotice();
          }
        } else {
          return false;
        }
      });
    },
    //关闭窗口
    closeDialog () {
      this.$popupCacel()
      this.resetRuleForm();
    },
    //新增通知
    addNotice () {
      // 解决报错
      // this.ruleForm.noticeType = "1"
      addSysNotice(this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("保存成功");
          this.$popupCacel()
          this.resetRuleForm();
          this.$parent.queryClick();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //编辑通知
    editNotice () {
      updateSysNotice(this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("编辑成功");
          this.$popupCacel()
          this.resetRuleForm();
          this.$parent.queryClick();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //重置表单
    resetRuleForm () {
      this.ruleForm = {
        noticeTitle: "",
        noticeContent: "",
        noticeFileUrl: "",
        noticeSource: "",
        validDays: 14,
        noticeType: "1"
      }
    },
    beforeUpload (file) {
      return true;
    },
    //附件上传事件
    async handleChange (file) {
      var formdata = new FormData();
      formdata.append("file", file.raw);
      upload(formdata).then(res => {
        this.ruleForm.noticeFileUrl = res.message;
      });
    },
    //富文本图片上传事件
    RichTexthandleChange (file) {
      this.uploadPicture(file.raw)
    },
    //图片粘贴事件
    clipboardPictureChange (file) {
      this.uploadPicture(file)
    },
    getDetailInfo (item) {
      this.ruleForm = item
    },
    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);
      });
    },
    onSubmit () {
      //console.log("submit!");
    },
    // 失去焦点事件
    onEditorBlur (quill) {
      //console.log("editor blur!", quill);
    },
    // 获得焦点事件
    onEditorFocus (quill) {
      //console.log("editor focus!", quill);
    },
    // 准备富文本编辑器
    onEditorReady (quill) {
      //console.log("editor ready!", quill);
    },
    // 内容改变事件
    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>