<template>
  <div class="app-container">
    <el-form ref="formRef" :model="formData" :rules="formRules" class="detail" label-width="100px">
      <el-form-item label="文章标题：">{{ articleTitle }}</el-form-item>
      <el-form-item label="文章封面：">
        <el-image style="width:200px;height:200px" :src="articleImage" :preview-src-list="srcList" />
      </el-form-item>
      <el-form-item label="文章内容：">
        <div class="iframe" v-html="articleContent" />
        <!-- <iframe width="375" height="667" :src="previewSrc" frameborder="1" /> -->
      </el-form-item>
      <el-form-item label="审核状态：">
        <el-radio-group v-model="formData.auditStatus">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="0">不通过</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formData.auditStatus!==1" prop="invalidReason" label="原因：">
        <el-input v-model="formData.invalidReason" type="textarea" placeholder="请说明原因" />
      </el-form-item>
      <el-form-item label="">
        <el-button type="info" @click="$_back">返回</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getArticleDeatil } from '@/api/doc'
import { auditArticle } from '@/api/docReview'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      articleContent: '', // 文章内容
      articleTitle: '', // 文章标题
      articleImage: '', // 文章封面图
      srcList: [], // 文章封面图片回显
      previewSrc: '', // 预览图片列表
      formData: {
        articleId: '', // 文章id
        auditStatus: 1, // 审核状态
        invalidReason: '', // 不同过原因
        auditBy: '' // 审核人
      },
      formRules: {
        invalidReason: { required: true, message: '不通过原因不能为空', tigger: 'blur' }
      }
    }
  },
  computed: {
    ...mapGetters(['authUserId'])
  },
  created() {
    this.formData.articleId = this.$route.query.articleId
    this.getDetail()
  },
  methods: {
    // 获取文章数据
    getDetail() {
      getArticleDeatil({ articleId: this.formData.articleId })
        .then(res => {
          console.log(res)
          if (res.code !== 0) return
          this.articleContent = res.data.articleContent
          this.articleTitle = res.data.articleTitle
          this.articleImage = res.data.articleImage
          this.srcList.push(this.articleImage)
        })
    },
    // 审核操作
    submit() {
      this.$refs.formRef.validate(valide => {
        if (!valide) return
        this.formData.auditBy = this.authUserId
        auditArticle(this.formData)
          .then(res => {
            console.log(res)
            if (res.code !== 0) return
            this.$message({
              message: res.data,
              type: 'success',
              duration: 1000
            })
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.back()
          })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.iframe{
  height: 600px;
  overflow: scroll;
  border: 1px solid #999;
}
.detail{
  width: 1000px;
  margin: 30px auto;
}
.el-button{
  width: 120px;
}
</style>
