<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.compilationUnit" clearable placeholder="请输入编写单位"></el-input>
          </el-form-item>
          <el-form-item label="编撰人员">
            <el-input v-model="form.editor" clearable placeholder="请输入编撰人员"></el-input>
          </el-form-item>
          <el-form-item label="版本号">
            <el-input v-model="form.versionNumber" clearable placeholder="请输入版本号"></el-input>
          </el-form-item>
          <el-form-item label="提交人">
            <el-input v-model="form.submitter" clearable placeholder="自动获取,不可编辑" disabled></el-input>
          </el-form-item>
          <el-form-item label="版本说明">
            <el-input v-model="form.versionDescription" clearable placeholder="请输入版本说明" maxlength="100">
            </el-input>
          </el-form-item>
          <div>
            <quill-editor v-model="form.content" res="myQuillEditor" :options="editorOption" id="editor">
              <!-- @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)" -->
            </quill-editor>
          </div>
        </el-form>
      </div>
      <div class="btn">
        <el-button @click="submit">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    addFormData
  } from '@/api/platformManagement'
  import quillEditor from 'vue-quill-editor';
  export default {
    data() {
      return {
        editorOption: {
          // modules: {
          //   // toolbar: [
          //   //   ['bold', 'italic', 'underline', 'strike', 'background', 'color', 'font', 'size'],
          //   //   ['blockquote', 'code-block']
          //   // ]
          // }
        },
        form: {},
        regulations: {},
        version: [],
        count: ""
      }
    },
    created() {
      this.form.submitter = JSON.parse(localStorage.getItem('UserInfo')).deptName
      this.regulations = JSON.parse(localStorage.getItem("regulations"))
      if (this.regulations) {
        this.$set(this.form, "compilationUnit", this.regulations.compilationUnit)
        this.$set(this.form, "editor", this.regulations.editor)
        // 默认当前生效规定版本版本号尾号 + 1
        this.version = this.regulations.versionNumber.split(".")
        this.count = Number(this.version[this.version.length - 1]) + 1
        this.$set(this.form, "versionNumber", this.regulations.versionNumber.substr(0, this.version.length + 1) + this
          .count)
      }
    },
    methods: {
      // Oneditorblur(e) {//失去焦点事件
      //   console.log(e)
      // },
      // Oneditorfocus(e) {//获得焦点事件
      //   console.log(e)
      // },
      // Oneditorchange(e) {//内容改变事件
      //   console.log(this.content)
      // },
      // SaveHtml(event) {//富文本点击保存按钮
      //   alert(this.content);
      // },
      submit() {
        if (this.form.compilationUnit && (this.form.compilationUnit.length < 0 || this.form.compilationUnit.length >
          25)) {
          this.$message.error("编写单位字数应在 0 - 25 之间")
          return
        }
        if (this.form.editor && (this.form.editor.length < 0 || this.form.editor.length > 10)) {
          this.$message.error("编撰人员字数应在 0 - 10 之间")
          return
        }
        if (!this.form.versionNumber) {
          this.$message.error("请输入版本号")
          return
        }
        if (this.form.versionNumber.indexOf(".") == -1) {
          this.$message.error("版本号格式不正确，如 1.**")
          return
        }
        if (this.form.versionDescription && (this.form.versionDescription.length < 0 || this.form.versionDescription
            .length > 100)) {
          this.$message.error("版本说明字数应在 0 - 100 之间")
          return
        }
        this.listLoading = true
        addFormData(this.form).then(response => {
            this.$notify({
              title: '成功',
              message: '添加成功！',
              type: 'success'
            });
            var _obj = {}
            _obj.compilationUnit = this.form.compilationUnit
            _obj.editor = this.form.editor
            _obj.versionNumber = this.form.versionNumber
            localStorage.setItem("regulations", JSON.stringify(_obj))
            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;
    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;
  }
</style>
