<template>
  <dialogBox :title="title" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%"
    @closeDialog="closeDialog" v-model="value" :isButton="isButtonFlag">
    <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-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>
  </dialogBox>
</template>

<script>
import { addSysNotice,updateSysNotice } from "@/api/notice.js";
import { upload } from "@/api/system.js";
import { quillEditor } from "vue-quill-editor";
export default {
  props: {
    value: { type: Boolean, default: false },
    isButtonFlag: { type: Boolean, default: true },
    title: {type:String, default: '新增系统通知'}
  },
  components: { quillEditor },
  data () {
    return {
      ruleForm: {
        noticeTitle: "",
        noticeContent: "",
        noticeFileUrl: "",
        noticeSource: "",
        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: "请输入正文"
      }
    };
  },
  watch: {
    value (val) {
      if (val) {
        let that = this
        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
          );
        });
      }
    }
  },
  mounted () {},
  methods: {
    submitForm () {
      let that = this;
      that.$refs.ruleForm.validate(valid => {
        if (valid) {
          if(that.ruleForm.bsmNotice){
            that.editNotice();
          }else{
            that.addNotice();
          }
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    //关闭窗口
    closeDialog () {
      this.$emit("input", false);
      this.resetRuleForm();
    },
    //新增通知
    addNotice(){
      addSysNotice(this.ruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("保存成功");
          this.$emit("input", false);
          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.$emit("input", false);
          this.resetRuleForm();
          this.$parent.queryClick();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //重置表单
    resetRuleForm () {
      this.ruleForm = {
        noticeTitle: "",
        noticeContent: "",
        noticeFileUrl: "",
        noticeSource: "",
        noticeType: "1"
      }
      this.isButtonFlag = true;
    },
    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);
        //that.quillUpdateImg = false;
      });
    },
    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">
.quill-editor {
  padding: 0;
}

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

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