<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="date"
            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,
            this.formInfo.time,
            [
              {
                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" scoped>
.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;
  border-radius: 5px;
  padding: 10px;
  background: #fff;
}
</style>
