<!-- 获取验证字段 -->
<template>
  <el-dialog
    ref="dialog"
    :title="title"
    v-model="visible"
    :confirm-working="isWorking"
    :fullscreen="true"
    :append-to-body="true"
    :close-on-press-escape="false"
    :show-close="false"
    :close-on-click-modal="false"
    class="article-dialog"
    @close="$emit('exit')"
  >
    <template #header>
      <h3>{{ title }}</h3>
      <div class="opera">
        <el-button
          v-if="form.status === $const.ARTICLE_STATUS.ONLINE"
          type="primary"
          :disabled="unsavable"
          :loading="isWorking.save"
          @click="save"
        >更新</el-button>
        <template v-else>
          <el-button
            :disabled="unsavable"
            :loading="isWorking.save"
            @click="save"
          >保存</el-button>
          <el-button
            type="primary"
            :disabled="isWorking.publish"
            :loading="isWorking.publish"
            @click="publish"
          >发布</el-button>
        </template>
        <el-button
          type="danger"
          @click="exit"
        >退出</el-button>
      </div>
    </template>
    <div class="content-wrap">
      <div class="settings-wrap">
        <el-form :model="form" ref="form" :rules="rules">
          <el-form-item label="所属栏目" prop="categoryIds" required>
            <CategorySelect v-model="form.categoryIds"/>
          </el-form-item>
          <el-form-item label="文章摘要" prop="contentDigest" class="form-item-with-opera" required>
            <template #label>
              <span>文章摘要</span>
              <el-button size="small" @click="extractDigest">自动提取</el-button>
            </template>
            <el-input
              v-model="form.contentDigest"
              type="textarea"
              :rows="5"
              placeholder="请输入文章摘要"
              v-trim
              maxlength="200"
            />
          </el-form-item>
          <el-form-item label="关键字" prop="keywords">
            <el-input
              v-model="form.keywords"
              type="textarea"
              :rows="2"
              placeholder="请输入文章关键字"
              v-trim
              maxlength="200"
            />
            <FormItemTip>文章关键字用于SEO优化</FormItemTip>
          </el-form-item>
          <el-form-item label="文章标签" prop="tagIds">
            <ArticleTagSelect v-model="form.tagIds"/>
          </el-form-item>
          <el-form-item label="文章封面图" prop="cover" class="form-item-with-opera">
            <template #label>
              <span>文章封面图</span>
              <el-button size="small" @click="openCoverSelect">从正文中选取</el-button>
            </template>
            <ImageUploader v-model="form.cover"/>
          </el-form-item>
          <el-form-item label="附件上传" prop="attachments" class="form-item-with-opera form-item-attachments">
            <template #label>
              <span>附件上传</span>
              <ArticleAttachmentUploader
                @add-file="handleAddAttachment"
                @success="handleAttachmentUploadSuccess"
                @error="handleAttachmentUploadError"
              >
                <el-button size="small" type="primary" icon="Upload">上传附件</el-button>
              </ArticleAttachmentUploader>
            </template>
            <!-- 附件列表展示 -->
            <ArticleAttachments v-model="form.attachments"/>
          </el-form-item>
        </el-form>
      </div>
      <div class="editor-wrap">
        <el-input
          v-model="form.title"
          placeholder="请输入文章标题"
          v-trim
          maxlength="200"
        />
        <RichEditor
          ref="richEditor"
          v-model="form.content"
          placeholder="请输入文章内容"
          @created="handleEditorCreated"
        />
      </div>
    </div>
    <!-- 正文图片选择 -->
    <ArticleCoverSelect ref="articleCoverSelect" @confirm-select="form.cover = $event"/>
    <!-- 退出窗口 -->
    <el-dialog
      class="article-exit-dialog"
      v-model="exitDialog.visible"
      align-center
      width="420px"
      title="确认退出"
    >
      <Icon value="WarningFilled" size="24px"/>{{ exitDialog.message }}
      <template #footer>
        <el-button @click="exitDialog.visible = false">取消</el-button>
        <el-button type="danger" @click="forceClose">直接退出</el-button>
        <el-button type="primary" @click="saveAndClose">{{ exitDialog.confirmButtonText }}</el-button>
      </template>
    </el-dialog>
  </el-dialog>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import RichEditor from '@/components/common/RichEditor'
import ImageUploader from '@/components/common/ImageUploader'
import CategorySelect from '@/components/cms/category/CategorySelect'
import ArticleTagSelect from '@/components/cms/article/ArticleTagSelect'
import ArticleCoverSelect from '@/components/cms/article/ArticleCoverSelect'
import ArticleAttachments from '@/components/cms/article/ArticleAttachments'
import ArticleAttachmentUploader from '@/components/cms/article/ArticleAttachmentUploader'
import BaseMixin from '@/components/cms/article/editor/BaseMixin'
import AttachmentsMixin from '@/components/cms/article/editor/AttachmentsMixin'

export default {
  name: 'ArticleEditorWindow',
  extends: BaseOpera,
  mixins: [BaseMixin, AttachmentsMixin],
  components: {
    ArticleAttachmentUploader,
    ArticleAttachments,
    ArticleCoverSelect,
    ArticleTagSelect,
    CategorySelect,
    ImageUploader,
    RichEditor
  },
  data () {
    return {
      visible: false,
      isWorking: {
        save: false,
        publish: false
      },
      // 表单数据
      form: {
        id: null,
        uid: '',
        title: '',
        status: '',
        categoryIds: [],
        tagIds: [],
        cover: '',
        attachments: [],
        content: '',
        contentDigest: '',
        keywords: ''
      },
      // 原始表单数据，打开窗口和保存时进行赋值
      savedForm: null,
      // 验证规则
      rules: {
        categoryIds: [
          { required: true, message: '请选择所属栏目' }
        ],
        contentDigest: [
          { required: true, message: '请输入文章摘要' }
        ]
      },
      // 退出窗口
      exitDialog: {
        visible: false,
        message: '',
        confirmButtonText: ''
      }
    }
  },
  computed: {
    // 不可保存
    unsavable () {
      return this.isWorking.save || JSON.stringify(this.form) === JSON.stringify(this.savedForm)
    }
  },
  methods: {
    /**
     * 打开窗口
     *
     * @param title 标题
     * @param target 文章对象
     */
    open (title, target) {
      this.visible = true
      this.title = title
      this.$nextTick(() => {
        // 重置表单
        this.$refs.form.resetFields()
        // - 以下字段不在表单元素中，需手动清理
        this.form.id = null
        this.form.uid = ''
        this.form.title = ''
        this.form.content = ''
        this.form.status = ''
        // 填充文章信息
        if (target != null) {
          for (const key in this.form) {
            this.form[key] = target[key]
          }
          // 补充栏目
          this.form.categoryIds = target.categoryIds == null || target.categoryIds.length === 0 ?
            [] : target.categoryIds.split(',')
              .filter(item => item.trim() !== '')
              .map(item => Number(item))
          // 补充标签
          this.form.tagIds = target.tagIds == null || target.tagIds.length === 0 ?
            [] : target.tagIds.split(',')
              .filter(item => item.trim() !== '')
              .map(item => Number(item))
          // 初始化附件
          this.form.attachments = target.attachments == null ?
            [] : JSON.parse(target.attachments)
        }
        // 拷贝一份作为已保存的数据，用于保存检测
        this.savedForm = JSON.parse(JSON.stringify(this.form))
      })
    }
  }
}
</script>
<style lang="scss">
@import "./editor";
</style>
