<template>
  <div class="center">
    <div class="main_css">
      <div class="formData">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="公示标题">
            <el-input v-model="form.title" clearable placeholder="请输入标题" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="公示日期">
            <el-date-picker v-model="form.issuingDate" type="date" value-format="yyyy-MM-dd" style='width: 100%;'
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="发布机构">
            <el-input v-model="form.issuingAgency" clearable placeholder="请输入发布机构" maxlength="20"></el-input>
          </el-form-item>
          <div class="quill-editor">
            <!-- 图片上传组件辅助，组件内添加v-show=“false”属性，把该组件隐藏起来。-->
            <el-upload class="avatar-uploader" :action="uploadPath" :show-file-list="false" :on-success="uploadSuccess">
            </el-upload>
            <!--富文本编辑器组件-->
            <quill-editor v-model="form.releaseContent" :content="form.releaseContent" :options="editorOption"
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)"
              ref="QuillEditor">
            </quill-editor>
            <div v-html="form.releaseContent" />
          </div>
          <!--            <quill-editor v-model="form.releaseContent" res="myQuillEditor" :options="editorOption" id="editor">
            </quill-editor> -->
        </el-form>
      </div>
      <div class="btn">
        <el-button @click="submit">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  addFormData,
  uploadPath
} from '@/api/officialWebsiteManagement'
import quillEditor from 'vue-quill-editor';
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'], //引用，代码块
  [{
    'header': 1
  }, {
    'header': 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': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial']
  }], // 字体
  [{
    'align': []
  }], // 居中
  ['clean'], // 清除样式,
  ['link', 'image'], // 上传图片、上传视频
]
export default {
  data() {
    return {
      uploadPath,
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: function (value) {
                if (value) {
                  // 调用element的图片上传组件
                  document.querySelector('.avatar-uploader input').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      },
      form: {
        issuingAgency: '畅运通信息部'
      },
      regulations: {},
      version: [],
      count: ""
    }
  },
  created() {
    this.form.makeUser = JSON.parse(localStorage.getItem('UserInfo')).deptName
  },
  methods: {
    // 失去焦点
    onEditorBlur(editor) { },
    // 获得焦点
    onEditorFocus(editor) { },
    // 开始
    onEditorReady(editor) { },
    // 值发生变化
    onEditorChange(editor) {
      this.form.releaseContent = editor.html;
      console.log(editor);
    },
    beforeUpload(file) {
      const isIMAGE = ''
      file.type === 'image/jpeg' || 'image/gif' || 'image/png' || 'image/jpg'
      const isLt1M = file.size / 1024 / 1024 < 1

      if (!isIMAGE) {
        this.$message.error('上传文件只能是图片格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传文件大小不能超过 1MB!')
      }
      return isIMAGE && isLt1M
    },
    uploadSuccess(res) {
      // 获取富文本组件实例
      let quill = this.$refs.QuillEditor.quill
      // 如果上传成功
      if (res.data.errno = 200 && res.data.url) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', res.data.url)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        // 提示信息，需引入Message
        this.$message.error('图片插入失败！')
      }
    },

    submit() {
      if (!this.form.title) {
        this.$message.error("公示标题不能为空！")
        return
      }
      if (!this.form.issuingDate) {
        this.$message.error("公示日期不能为空！")
        return
      }

      if (!this.form.issuingAgency) {
        this.$message.error("发布机构不能为空！")
        return
      }
      if (!this.form.releaseContent) {
        this.$message.error("公示内容不能为空！")
        return
      }
      this.listLoading = true
      this.form.contentType = '公示'
      addFormData(this.form).then(response => {
        this.$notify({
          title: '成功',
          message: '添加成功！',
          type: 'success'
        });
        this.listLoading = false
        this.$router.go(-1)
      })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.center {
  background: #F5F6F7;
  min-height: calc(100vh - 50px);
  padding-top: 20px;

}

.main_css {
  width: 96%;
  height: 90vh;
  overflow-y: scroll;
  background: #FFFFFF;
  margin: 20px auto;
  padding-top: 20px;
}

.formData {
  width: 50%;
  margin: 20px 0 0 140px;
}

.btn {
  text-align: right;
  position: absolute;
  right: 200px;
  bottom: 100px;
}

.ql-editor {
  height: 400px !important;
}
</style>
