<script setup>
import { ref } from 'vue'
import { CommentQueryService, CommentWithdrawService } from '@/api/comment'
const params = ref({
  current: 1,
  size: 10
})
const loading = ref(false)
const total = ref(0)
const commentList = ref([])
const getCommentList = async () => {
  loading.value = true
  const {
    data: { data }
  } = await CommentQueryService(params.value)
  commentList.value = data.list
  total.value = data.total
  loading.value = false
}
getCommentList()
const onCurrentChange = (current) => {
  params.value.current = current
  getCommentList()
}
const onSizeChange = (size) => {
  params.value.current = 1
  params.value.size = size
  getCommentList()
}

const result = ref(false)
const withDrawComment = async (row) => {
  ElMessageBox.confirm(
    row.status == 2 ? '即将撤回该条评论' : '恢复评论',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'info'
    }
  )
    .then(async () => {
      const {
        data: { message }
      } = await CommentWithdrawService(row.id)
      ElNotification({
        title: '操作结果',
        message: message,
        type: 'success'
      })
      row.status = row.status === 2 ? 1 : 2
    })
    .catch(() => {})
}

// 设置评论状态
const changeStatus = () => {
  return result.value
}
</script>
<template>
  <page-container title="评论管理">
    <el-table :data="commentList" stripe v-loading="loading">
      <el-table-column prop="id" label="序号" width="80" />
      <el-table-column prop="content" label="评论内容" />
      <el-table-column prop="createTime" label="发布时间" />
      <el-table-column prop="updateTime" label="修改时间" />
      <el-table-column label="操作（是否撤回）">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="2"
            active-color="#409EFF"
            inactive-color="#dcdfe6"
            active-text="已撤回"
            inactive-text="恢复"
            inline-prompt
            @click="withDrawComment(row)"
            :before-change="changeStatus"
          />
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据" />
      </template>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
      v-model:current-page="params.current"
      v-model:page-size="params.size"
      :page-sizes="[10, 20, 50]"
      layout="jumper, total, sizes, prev, pager, next"
      background
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />
  </page-container>
</template>
