<template>
  <el-dialog
    title="评论详情"
    width="50%"
    :visible.sync="modal"
    :close-on-click-modal="false"
    @close="$emit('cancel')"
  >
    <divider-container title="基本信息">
      <el-row :gutter="10">
        <el-col class="txt-right" :span="4">评价来源：</el-col>
        <el-col :span="20">{{ info.moduleType }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="txt-right" :span="4">评价时间：</el-col>
        <el-col :span="20">{{ info.createDate }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="txt-right" :span="4">评价人：</el-col>
        <el-col :span="20">{{ info.nickName }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="txt-right" :span="4">联系电话：</el-col>
        <el-col :span="20">{{ info.mobile }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="txt-right" :span="4">评论课程：</el-col>
        <el-col :span="20">{{ info.articleTitle }}</el-col>
      </el-row>
    </divider-container>

    <divider-container title="评价信息">
      <el-row :gutter="10">
        <el-col class="txt-right" :span="4">评价内容：</el-col>
        <el-col :span="20">{{ info.comment }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="txt-right" :span="4">评价置顶：</el-col>
        <el-col :span="20"><el-checkbox v-model="info.isTop">置顶</el-checkbox></el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="txt-right" :span="4">展示状态：</el-col>
        <el-col :span="20"><el-checkbox v-model="info.isShow">展示</el-checkbox></el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="txt-right" :span="4">扫描状态：</el-col>
        <el-col :span="20">{{ info.isScan ? '已扫描' : '未扫描' }}</el-col>
      </el-row>
      <el-row v-if="info.sensitiveWords" :gutter="10">
        <el-col class="txt-right" :span="4">命中敏感词：</el-col>
        <el-col :span="20" style="color: #ed4014">{{ info.sensitiveWords }}</el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col class="txt-right" :span="4">优先级：</el-col>
        <el-col :span="20">
          <el-input-number
            v-model="info.sort"
            controls-position="right"
            :min="0"
            :max="10"
          />
        </el-col>
      </el-row>

    </divider-container>
    <div v-if="info.isAdminRead" slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button @click="modal = false">取消</el-button>
    </div>
    <div v-else slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handlePass">通过</el-button>
      <el-button type="danger" @click="handleRefuse">拒绝</el-button>
      <el-button @click="modal = false">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getItem, saveItem } from '@/model/comment'
import EMITKEY from '@/const/emitNameKey'

export default {
  name: 'CommentItem',

  props: {
    id: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      modal: true,
      info: {}
    }
  },

  mounted() {
    this.id && this.loadData()
  },

  methods: {

    async loadData() {
      const { success, data, msg } = await getItem({
        id: this.id
      })
      if (success) {
        this.info = data
      } else {
        this.$message.error(msg)
      }
    },

    getSaveInfo() {
      const result = {
        isTop: this.info.isTop,
        isShow: this.info.isShow,
        sort: this.info.sort
      }
      return result
    },

    handleSave() {
      let options = this.getSaveInfo()
      options = {
        ...options,
        isAdminRead: this.info.isAdminRead,
        isPassed: this.info.isPassed,
        passedStatus: this.info.passedStatus
      }
      this.saveItem(options)
    },

    handlePass() {
      const options = this.getSaveInfo()
      options.isAdminRead = true
      options.isPassed = true
      options.passedStatus = true

      this.saveItem(options)
    },

    handleRefuse() {
      const options = this.getSaveInfo()
      options.isAdminRead = true
      options.isPassed = true
      options.passedStatus = false

      this.saveItem(options)
    },

    async saveItem(options) {
      const { success, msg } = await saveItem({
        id: this.id,
        data: {
          ...options
        }
      })
      if (success) {
        this.$message.success('操作成功~')
        this.bus.$emit(EMITKEY.COMMENTRELOAD)
        this.modal = false
      } else {
        this.$message.error(msg)
      }
    }
  }
}
</script>

<style scoped>
.btn-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.mcol-20 .el-row {
  font-size: 14px;
  line-height: 1.7;
  padding-top: 14px;
}
</style>
