<template>
  <div class="cxshMini-article-container">
    <el-button style="margin-bottom: 10px" type="primary" @click="handlePublish">发布</el-button>
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <el-form-item label="标题" prop="title">
        <el-input v-model.trim="form.title" autocomplete="off" />
      </el-form-item>
      <el-form-item label="分类" prop="categoryId">
        <el-select v-model="form.categoryId" placeholder="请选择分类">
          <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model.trim="form.desc" autocomplete="off" />
      </el-form-item>
      <el-form-item label="封面" prop="coverUrl">
        <single-upload
          style="width: 100px; height: 100px"
          upload-url="http://127.0.0.1:3999/management/api/common/upload"
          :value="form.coverUrl"
          @upload-success="handleUploadSuccess"
        />
      </el-form-item>
    </el-form>
    <quill-editor v-model="form.content" :options="editorOptions" />
  </div>
</template>

<script>
  import { quillEditor } from 'vue-quill-editor'
  import 'quill/dist/quill.snow.css'
  import SingleUpload from '@/components/SingleUpload'
  import { getList as getCategoryList } from '@/api/miniAnliCategory'
  import { getArticle, doAdd, doEdit } from '@/api/miniAnli'

  export default {
    name: 'CxshMiniArticle',
    components: { quillEditor, SingleUpload },
    data() {
      return {
        form: {
          title: '',
          categoryId: '',
          desc: '',
          coverUrl: '',
          content: '',
        },
        categoryList: [],
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
          categoryId: [{ required: true, trigger: 'blur', message: '请选择分类' }],
          coverUrl: [{ required: true, trigger: 'blur', message: '请上传封面' }],
          content: [{ required: true, trigger: 'blur', message: '请输入内容' }],
        },
        articleId: '',
        editorOptions: {
          theme: 'snow',
        },
      }
    },
    created() {
      this.fetchData()
      this.articleId = this.$route.query.id
      if (this.articleId) {
        this.fetchArticle()
      }
    },
    methods: {
      handlePublish() {
        if (this.articleId) {
          this.$refs['form'].validate(async (valid) => {
            if (valid) {
              await doEdit(this.articleId, this.form)
              this.$baseMessage('编辑成功', 'success')
              this.$router.push(`/cxshMini/anli/list`)
            } else {
              return false
            }
          })
        } else {
          this.$refs['form'].validate(async (valid) => {
            if (valid) {
              await doAdd(this.form)
              this.$baseMessage('发布成功', 'success')
              this.$router.push(`/cxshMini/anli/list`)
            } else {
              return false
            }
          })
        }
      },
      async fetchData() {
        const { data } = await getCategoryList(this.queryForm)
        this.categoryList = data.list
      },
      handleUploadSuccess(url) {
        this.form.coverUrl = url
      },
      async fetchArticle() {
        const { data } = await getArticle(this.articleId)
        this.form = data
      },
    },
  }
</script>
