<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-select
          v-model="formInfo.depart"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteFetchMethod"
          :loading="fetchLoading">
          <el-option
            v-for="item in companys"
            :key="item.companyId"
            :label="item.companyName"
            :value="item.companyId">
          </el-option>
        </el-select>
      </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" v-loading="publishLoading">发布</el-button>
    </div>
  </div>
</template>

<script>
import { getAllCompanyInfo } from '@/api/industry.js'
import { postNotice } from '@/api/opeAdvice.js'
import Editor from '@tinymce/tinymce-vue'
export default {
  components: {
    'editor': Editor
  },
  data() {
    return {
      formInfo: {
        title: '',
        depart: '',
        time: '',
        content: ''
      },
      rules: {
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          }
        ],
        depart: [
          {
            required: true,
            message: '请选择通知公司',
            trigger: 'change'
          }
        ],
      },
      // 经法局列表
      departList: [
        {
          value: '经发局（应急局）',
          label: '经发局（应急局）'
        },
        {
          value: '建设局',
          label: '建设局'
        },
        {
          value: '市场监督管理局',
          label: '市场监督管理局'
        },
        {
          value: '生态环境局',
          label: '生态环境局'
        },
        {
          value: '商务局',
          label: '商务局'
        }
      ],
      companys: [],
      fetchLoading: false,
      publishLoading: false
    }
  },
  mounted() {
    const curLawItem = localStorage.getItem('curAdviceItem')
    if (curLawItem) {
      // localStorage.setItem('curLawItem', )
      this.formInfo = { ...JSON.parse(curLawItem) }
    }
  },
  methods: {
    publishLaw() {
      // 校验
      this.$refs.addform.validate((valid) => {
        if (valid) {
          // 发布
          // 调用 axios
          // 调用 localStorage 的removeItem()方法去掉 curLawItem
          this.publishLoading = true
          postNotice({
            companyIds: this.formInfo.depart,
            noticeContent: this.formInfo.content,
            noticeTitle: this.formInfo.title
          }).then(res => {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.publishLoading = false
            localStorage.removeItem('curAdviceItem')
          }).catch(() => {
            this.$message.error('添加失败')
            this.publishLoading = false
          })
        } else {
          this.$message.error('请输入信息')
        }
      })
    },
    clearContent() {
      this.formInfo.title = ''
      this.formInfo.depart = ''
      this.formInfo.time = ''
      this.formInfo.content = ''
      // 调用 localStorage 的removeItem()方法去掉 curLawItem
      localStorage.removeItem('curAdviceItem')
    },
    saveStorage() {
      //
      // localStorage.getItem
      localStorage.setItem('curAdviceItem', JSON.stringify(this.formInfo))
    },
    remoteFetchMethod(query) {
      if (query !== '') {
        this.fetchLoading = true;
        getAllCompanyInfo({
          page: 0,
          size: 10,
          companyName: query
        }).then(res => {
          this.companys = [...res.content]
          this.fetchLoading = false
          this.formInfo = {
            title: '',
            depart: '',
            time: '',
            content: ''
          }
        },() => {
          this.fetchLoading = false
        })
      } else {
        this.companys = []
      }
    }
  }
}
</script>

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