<template>
  <dialogBox title="新增系统通知" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="60%"
    @closeDialog="closeDialog" v-model="value">
    <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="通知标题:" prop="noticeTitle">
            <el-input v-model="ruleForm.noticeTitle"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="通知来源:" prop="noticeSource">
            <el-input v-model="ruleForm.noticeSource"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="通知内容:" prop="noticeContent">
            <quill-editor
              v-model="ruleForm.noticeContent"
              ref="myQuillEditor"
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @focus="onEditorFocus($event)"
              @change="onEditorChange($event)"
              @ready="onEditorReady($event)"
            >
            </quill-editor>
            <!-- <el-input v-model="ruleForm.noticeContent" type="textarea" :rows="16"></el-input> -->
          </el-form-item>
        </el-col>
      </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 } from "@/api/notice.js"
import { upload } from "@/api/system.js"
import { quillEditor } from "vue-quill-editor";
export default {
  props: {
    value: { type: Boolean, default: false },
  },
  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: "请输入正文",
      },
    }
  },
 mounted() {
    //  自定义粘贴图片功能
    let quill = this.$refs.myQuillEditor.quill;    
    quill.root.addEventListener("paste",evt => {
        console.log(1111);
        if (evt.clipboardData && evt.clipboardData.files &&evt.clipboardData.files.length) {
          console.log(2222);
          evt.preventDefault();
          [].forEach.call(evt.clipboardData.files, file => {
            console.log(33333);
            if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
              return;
            }
            console.log(4444);
            this.RichTexthandleChange(File);
          });
        }
      },
      false
    );
  },
  methods: {
    submitForm () {
      let that = this;
      that.$refs.ruleForm.validate(valid => {
        if (valid) {
          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)
            }
          })
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    //关闭窗口
    closeDialog () {
      this.$emit("input", false);
      this.resetRuleForm();
    },
    //
    resetRuleForm () {
      this.$refs['ruleForm'].resetFields();
      this.ruleForm.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
      })
    },
    //富文本图片上传事件
    async RichTexthandleChange (file) {
      let that = this;
      var formdata = new FormData();
      formdata.append("file", file.raw);
      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">
// .ql-editor{
//          height:500px;
//      }
/deep/.ql-editor {
  padding: 0px;
  height: 500px;
}     
</style>