<template>
  <el-dialog
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="1200px"
    @close="close"
  >
    <el-scrollbar style="height: 550px">
      <el-form ref="form" label-width="120px" :model="form" :rules="rules">
        <el-form-item :label="__('标题')" prop="article_title">
          <el-input v-model="form.article_title" :placeholder="__('标题')" />
        </el-form-item>

        <el-form-item :label="__('文章分类')" prop="category_id">
          <el-select
            v-model="form.category_id"
            class="filter-item"
            clearable
            :placeholder="__('文章分类')"
          >
            <el-option
              v-for="item in dataList"
              :key="item.category_id"
              :label="item.category_name"
              :value="item.category_id"
            />
          </el-select>
        </el-form-item>

        <el-form-item :label="__('排序')" prop="article_sort">
          <el-input v-model="form.article_sort" :placeholder="__('排序')" />
        </el-form-item>
        <el-form-item :label="__('SEO标题')" prop="article_seo_title">
          <el-input
            v-model="form.article_seo_title"
            :placeholder="__('SEO标题')"
          />
        </el-form-item>
        <el-form-item :label="__('SEO关键字')" prop="article_seo_keywords">
          <el-input
            v-model="form.article_seo_keywords"
            :placeholder="__('SEO关键字')"
          />
        </el-form-item>

        <el-form-item :label="__('SEO描述')" prop="article_seo_description">
          <el-input
            v-model="form.article_seo_description"
            :placeholder="__('SEO描述')"
          />
        </el-form-item>

        <el-form-item :label="__('文章类型')" prop="article_type">
          <el-radio-group v-model="form.article_type" size="medium">
            <el-radio
              v-for="(item, index) in article_typeOptions"
              :key="index"
              :disabled="item.disabled"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item :label="__('状态')" prop="article_status">
          <el-switch
            v-model="form.article_status"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item :label="__('图片')" prop="article_image">
          <upload
            height="100px"
            :image="form.article_image"
            width="100px"
            @upImage="
              (image) => {
                form.article_image = image
              }
            "
          />
        </el-form-item>

        <el-form-item :label="__('文章内容')" prop="article_content">
          <quill-editor
            ref="vab-quill"
            v-model="form.article_content"
            style="width: 90%"
          />
        </el-form-item>

        <el-form-item :label="__('标签')" prop="article_tags">
          <el-select
            v-model.trim="form.article_tags"
            allow-create
            default-first-option
            multiple
            :placeholder="__('请选择文章标签')"
          >
            <el-option
              v-for="item in optionslist"
              :key="item.tag_id"
              :label="item.tag_name"
              :value="item.tag_id"
            />
          </el-select>
        </el-form-item>

        <el-form-item v-if="false" :label="__('网址')" prop="article_url">
          <el-input v-model="form.article_url" :placeholder="__('网址')" />
        </el-form-item>
        <el-form-item :label="__('是否开启评论')" prop="article_reply_flag">
          <el-switch
            v-model="form.article_reply_flag"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>

        <el-form-item v-if="false" :label="__('文章别名')" prop="article_name">
          <el-input v-model="form.article_name" :placeholder="__('文章别名')" />
        </el-form-item>
        <el-form-item v-if="false" :label="__('文章摘要')" prop="article_excerpt">
          <el-input
            v-model="form.article_excerpt"
            :placeholder="__('文章摘要')"
          />
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{ __('取消') }}</el-button>
      <el-button type="primary" @click="save">{{ __('确定') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import quillEditor from '@/components/quill/quillEditor'
  import { doEdit } from '@/api/article/base'
  import { getList as getCategoryTree } from '@/api/article/category'
  import { getList } from '@/api/article/tag'
  import Upload from '@/components/upload'

  export default {
    name: 'ArticleBaseEdit',
    components: { quillEditor, Upload },
    data() {
      return {
        article_typeOptions: [
          {
            label: this.__('文章'),
            value: 1,
          },
          {
            label: this.__('公告'),
            value: 2,
          },
        ],
        optionslist: [],
        imageUrl: '',
        dataList: [],
        TagList: [],
        form: {
          article_image: '',
          article_tags: [],
          logistics_name: '',
          article_type: 2,
          article_status: 1,
          article_reply_flag: 1,
          article_content: '',
        },
        rules: {
          article_id: [
            { required: true, trigger: 'blur', message: this.__('编号') },
          ],
          article_title: [
            { required: true, trigger: 'blur', message: this.__('标题') },
          ],

          article_content: [
            { required: true, trigger: 'blur', message: this.__('文章内容') },
          ],

          category_id: [
            { required: true, trigger: 'blur', message: this.__('所属分类') },
          ],
          article_template: [
            { required: true, trigger: 'blur', message: this.__('模板') },
          ],
          article_reply_flag: [
            {
              required: true,
              trigger: 'blur',
              message: this.__('是否启用问答留言'),
            },
          ],
          article_lang: [
            { required: true, trigger: 'blur', message: this.__('语言') },
          ],
          article_type: [
            { required: true, trigger: 'blur', message: this.__('文章类型') },
          ],
          article_sort: [
            { required: true, trigger: 'blur', message: this.__('排序') },
          ],
          article_status: [
            { required: true, trigger: 'blur', message: this.__('状态') },
          ],

          user_id: [
            { required: true, trigger: 'blur', message: this.__('文章作者') },
          ],

          article_is_popular: [
            { required: true, trigger: 'blur', message: this.__('是否热门') },
          ],
        },
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {
      this.functiongetExpress()
      this.functiongetTag()
    },
    methods: {
      __,
      async functiongetExpress() {
        await getCategoryTree().then((res) => {
          this.dataList = res.data
        })
      },
      async functiongetTag() {
        await getList().then((res) => {
          this.optionslist = res.data.items
        })
      },
      showEdit(row) {
        if (!row) {
          this.title = this.__('添加')
        } else {
          this.title = this.__('编辑')
          this.form = {
            article_id: row.article_id,
            article_title: row.article_title,
            article_name: row.article_name,
            article_excerpt: row.article_excerpt,
            article_content: row.article_content,
            article_url: row.article_url,
            category_id: row.category_id,
            article_template: row.article_template,
            article_seo_title: row.article_seo_title,
            article_seo_keywords: row.article_seo_keywords,
            article_seo_description: row.article_seo_description,
            article_reply_flag: row.article_reply_flag,
            article_type: row.article_type,
            article_sort: row.article_sort,
            article_image: row.article_image,
            article_status: row.article_status,
            article_is_popular: row.article_is_popular,
          }
          if (row.article_tags.trim()) {
            this.form.article_tags = row.article_tags.split(',').map(Number)
          }
        }
        this.dialogFormVisible = true
      },
      close() {
        this.form = {
          article_image: '',
          article_tags: [],
          logistics_name: '',
          article_type: 2,
          article_status: 1,
          article_reply_flag: 1,
          article_content: '',
        }
        this.$refs['form'].resetFields()
        this.dialogFormVisible = false
      },
      async save() {
        const params = Object.assign({}, this.form)
        if (params.article_tags) {
          params.article_tags = this.form.article_tags.toString()
        }
        const { msg, status } = await doEdit(params)
        if (200 == status) {
          this.$baseMessage(msg, 'success')
        } else {
          this.$baseMessage(msg, 'error')
        }
        this.$emit('fetch-data')
        this.close()
      },
    },
  }
</script>
