<template>
  <el-dialog
    :visible.sync="visible"
    v-bind="modalOptions"
    append-to-body
  >
    <el-form
      ref="formData"
      :model="formData"
      size="mini"
      label-position="left"
      label-suffix=":"
      label-width="200px"
    >
      <!-- 评论信息 -->
      <el-form-item label="评论" prop="comment">
        {{ formData.comment || '--' }}
      </el-form-item>
      <el-form-item label="图片" prop="images">
        <div v-if="formData.images && formData.images.length">
          <el-image
            v-for="(item, index) in formData.images" :key="index" :src="item"
            style="width:80px;height:80px;margin-right: 10px;" fit="cover"
            :preview-src-list="formData.images"
          />
        </div>
        <span v-else>--</span>
      </el-form-item>
      <el-form-item label="追加评论" prop="addComment">
        {{ formData.addComment || '--' }}
      </el-form-item>
      <el-form-item label="追加图片" prop="addImages">
        <div v-if="formData.addImages && formData.addImages.length">
          <el-image
            v-for="(item, index) in formData.addImages" :key="index" :src="item"
            style="width:80px;height:80px;margin-right: 10px;" fit="cover"
            :preview-src-list="formData.addImages"
          />
        </div>
        <span v-else>--</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="mini" @click="handleClose">取 消</el-button>
        <el-button type="primary" size="mini" @click="handleShow">允许展示</el-button>
        <el-button type="primary" size="mini" @click="handleHide">隐藏</el-button>
        <el-button type="primary" size="mini" @click="handleDelete">删除</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { commentSysGetById, commentSysUpdate, commentSysDelete, commentAllow } from '@/api/comment'

export default {
  name: 'CommentDetails',
  data() {
    return {
      modalOptions: {
        closeOnClickModal: false,
        width: '800px',
        title: '查看评论详情'
      },
      visible: false,
      formData: {
        commentId: '',
        comment: '',
        images: [],
        addComment: '',
        addImages: []
      }
    }
  },
  methods: {
    handleClose() {
      this.visible = false
    },
    handleOpen(params = {}) {
      this.formData = Object.assign(this.$options.data().formData, params)
      if (params.commentId) {
        this.getInfo(params.commentId)
      }
      this.visible = true
    },
    async getInfo(id) {
      const loading = this.$loading({ text: '加载中' })
      try {
        const res = await commentSysGetById({ commentId: id })
        this.formData = Object.assign(this.$options.data().formData, res.data, {
          commentId: res.data.commentId || '',
          comment: res.data.comment || '',
          images: res.data.images || [],
          addComment: res.data.addComment || '',
          addImages: res.data.addImages || []
        })
      } finally {
        loading.close()
      }
    },
    async handleShow() {
      const res = await commentAllow({
        commentId: this.formData.commentId,
        state: 1
      })
      if (res.code === '') {
        this.$message.success('成功')
        this.visible = false
        this.$emit('success')
      }
    },
    async handleHide() {
      const res = await commentSysUpdate({
        commentId: this.formData.commentId,
        state: 0
      })
      if (res.code === '') {
        this.$message.success('隐藏成功')
        this.visible = false
        this.$emit('success')
      }
    },
    async handleDelete() {
      const res = await commentSysDelete({
        commentId: this.formData.commentId
      })
      if (res.code === '') {
        this.$message.success('删除成功')
        this.visible = false
        this.$emit('success')
      }
    }
  }
}
</script>

