<template>
  <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-select v-model="formInfo.depart" placeholder="请选择部门">
          <el-option
            v-for="item in departList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </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="primary" @click="publishLaw">发布</el-button>
    </div>
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'
import { putNotice } from '@/api/opeAdvice.js'
export default {
  components: {
    'editor': Editor
  },
  data() {
    return {
      formInfo: {
        title: '',
        depart: '',
        time: '',
        content: ''
      },
      rules: {
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }
        ]
      },
      // 经法局列表
      departList: [
        {
          value: '经发局（应急局）',
          label: '经发局（应急局）'
        },
        {
          value: '建设局',
          label: '建设局'
        },
        {
          value: '市场监督管理局',
          label: '市场监督管理局'
        },
        {
          value: '生态环境局',
          label: '生态环境局'
        },
        {
          value: '商务局',
          label: '商务局'
        }
      ]
    }
  },
  mounted() {
    const curLawItem = localStorage.getItem('curAdviceItem1')
    if (curLawItem) {
      // localStorage.setItem('curLawItem', )
      this.formInfo = { ...JSON.parse(curLawItem) }
    } else {
      console.log(this.$store.getters.curAdviceItem, 'this.$store.getters.curAdviceItem')
      this.formInfo = { ...this.$store.getters.curAdviceItem }
    }
  },
  methods: {
    publishLaw() {
      // 校验
      this.$refs.addform.validate((valid) => {
        if (valid) {
          // 发布
          // 调用 axios
          // 调用 localStorage 的removeItem()方法去掉 curLawItem
          putNotice({...this.formInfo, noticeTitle: this.formInfo.title,noticeContent: this.formInfo.content})
          .then(res => {
            console.log(res, 'putNotice')
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            localStorage.removeItem('curAdviceItem1')
            window.history.back()
          }).catch(() => {
            this.$message.error('修改失败')
          })
        } else {
          this.$message.error('请输入信息')
        }
      })
    },
    clearContent() {
      this.formInfo.title = ''
      this.formInfo.depart = ''
      this.formInfo.time = ''
      this.formInfo.content = ''
      // 调用 localStorage 的removeItem()方法去掉 curLawItem
      localStorage.removeItem('curAdviceItem1')
    },
    saveStorage() {
      //
      // localStorage.getItem
      localStorage.setItem('curAdviceItem1', JSON.stringify(this.formInfo))
    }
  }
}
</script>

<style lang="scss">
  .editor-wrapper {
    padding: 10px 20px;
  }
  .pulish-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;
  }
  .total-wrapper {
    padding: 30px;
  }
</style>
