<template>
  <div class="total-content-wrapper">
    <div class="total-wrapper">
      <el-form
        ref="addform"
        :model="formInfo"
        :rules="rules"
      >
        <el-form-item label="法律法规标题" :label-width="'120px'" prop="title">
          <el-input v-model="formInfo.title" :maxlength="50" style="width: 500px" />
        </el-form-item>
        <el-form-item label="发布部门" :label-width="'120px'" prop="depart">
          <el-input v-model="formInfo.depart" :maxlength="50" style="width: 500px" />
        </el-form-item>
        <el-form-item label="发布时间" :label-width="'120px'" prop="time">
          <el-date-picker
            v-model="formInfo.time"
            type="datetime"
            placeholder="选择发布时间"
          />
        </el-form-item>
      </el-form>
      <div class="editor-wrapper">
        <editor
          v-model="formInfo.content"
          :init="{
            height: 500,
            menubar: false,
            plugins: [
              'advlist autolink lists link image charmap print preview anchor',
              'searchreplace visualblocks code fullscreen',
              'insertdatetime media table paste code help wordcount textcolor'
            ],
            toolbar:
              'undo redo | formatselect | bold italic backcolor forecolor | \
              alignleft aligncenter alignright alignjustify | \
              bullist numlist outdent indent | removeformat | help'
          }"
        />
      </div>
      <div class="pulish-wrapper">
        <el-button type="info" @click="clearContent">清空</el-button>
        <el-button type="success" @click="saveStorage">保存</el-button>
        <el-button type="primary" @click="publishLaw">发布</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'
import { postLaw } from '@/api/teachManage'
import { parseTime } from '@/utils/index'
export default {
  components: {
    'editor': Editor
  },
  data() {
    return {
      formInfo: {
        title: '',
        depart: '',
        time: '',
        content: ''
      },
      rules: {
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }
        ],
        depart: [
          {
            required: true,
            message: '请输入发布人',
            trigger: 'blur'
          }
        ],
        time: [
          {
            required: true,
            message: '请选择发布时间',
            trigger: 'change'
          }
        ]
      },
      // 经法局列表
      departList: [
        {
          value: '经发局（应急局）',
          label: '经发局（应急局）'
        },
        {
          value: '建设局',
          label: '建设局'
        },
        {
          value: '市场监督管理局',
          label: '市场监督管理局'
        },
        {
          value: '生态环境局',
          label: '生态环境局'
        },
        {
          value: '商务局',
          label: '商务局'
        }
      ]
    }
  },
  mounted() {
    const curLawItem = localStorage.getItem('curLawItem')
    if (curLawItem) {
      // localStorage.setItem('curLawItem', )
      this.formInfo = { ...JSON.parse(curLawItem) }
    }
    console.log(this.$store.getters.user, 'this.$store.getters.user')
  },
  methods: {
    publishLaw() {
      // 校验
      this.$refs.addform.validate((valid) => {
        if (valid) {
          // 发布
          // 调用 axios
          postLaw(this.formInfo.depart, this.formInfo.title, [{
            lawChapter: this.formInfo.content,
            createBy: this.$store.getters.user.username,
            createDate: parseTime(new Date())
          }]).then(res => {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.clearContent()
          })
          // 调用 localStorage 的removeItem()方法去掉 curLawItem
        } else {
          this.$message.error('请输入信息')
        }
      })
    },
    clearContent() {
      this.formInfo.title = ''
      this.formInfo.depart = ''
      this.formInfo.time = ''
      this.formInfo.content = ''
      // 调用 localStorage 的removeItem()方法去掉 curLawItem
      localStorage.removeItem('curLawItem')
    },
    saveStorage() {
      //
      // localStorage.getItem
      localStorage.setItem('curLawItem', JSON.stringify(this.formInfo))
    }
  }
}
</script>

<style lang="scss">
  .editor-wrapper {
    padding: 10px 20px;
  }
  .pulish-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  .total-content-wrapper {}
  .total-wrapper {
    width: 800px;
    margin: 40px auto;
    box-shadow: 0 0 2px 2px #eee;
    border-radius: 30px;
    padding: 30px;
  }
</style>
