<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-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 { getLawDetail, putLaw } 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() {
    // this.formInfo = { ...this.$store.getters.curLawItem }
    getLawDetail(this.$store.getters.curLawItem.lawId).then(res => {
      console.log(res, 'getLawDetail')
      this.formInfo.lawId = res.lawId
      this.formInfo.depart = res.lawPublisher
      this.formInfo.title = res.lawTitle
      this.formInfo.time = res.createDate
      this.formInfo.content = res.thLawChapterDtoList.length ? res.thLawChapterDtoList[0].lawChapter : ''
      this.formInfo.createBy = res.thLawChapterDtoList.length ? res.thLawChapterDtoList[0].createBy : ''
      this.formInfo.createDate = res.thLawChapterDtoList.length ? res.thLawChapterDtoList[0].createDate : parseTime(new Date()),
      this.formInfo.currentUserRead = res.currentUserRead
      this.formInfo.lawItemId = res.thLawChapterDtoList.length ? res.thLawChapterDtoList[0].lawId : ''
    })
  },
  methods: {
    publishLaw() {
      // 校验
      this.$refs.addform.validate((valid) => {
        if (valid) {
          // 发布
          // 调用 axios
          putLaw(this.formInfo.lawId, this.formInfo.title, this.formInfo.depart, this.formInfo.createBy, this.formInfo.createDate, this.$store.getters.user.username, parseTime(new Date()), this.formInfo.createDate, this.formInfo.currentUserRead, [
            {
              lawChapter: this.formInfo.content,
              createBy: this.formInfo.createBy,
              createDate: this.formInfo.createDate,
              updateBy: this.$store.getters.user.username,
              updateDate: parseTime(new Date()),
              lawId: this.formInfo.lawItemId
            }
          ]).then(res => {
            console.log(res, 'putLaw')
            this.$router.push({
              path: '/train/law'
            })
          }).catch(() => {})
        } else {
          this.$message.error('发生错误')
        }
      })
    }
  }
}
</script>

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