<script setup>
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import AddWord from './components/AddWord.vue'
import { WordQueryService, WordRemoveService, WordSetService } from '@/api/word'
// 敏感词等级
const levelOptions = ref([
  { label: '全部', value: 0 },
  { label: '轻度', value: 1 },
  { label: '中度', value: 2 },
  { label: '重度', value: 3 }
])
// 查询参数
const params = ref({
  current: 1,
  size: 10,
  level: 0 // 默认值为0，即查询全部敏感词
})
const loading = ref(false)
const total = ref(0)
const wordList = ref([])
const getWordList = async () => {
  loading.value = true
  const {
    data: { data }
  } = await WordQueryService(params.value)
  total.value = data.total
  wordList.value = data.list
  loading.value = false
}
getWordList()

const onCurrentChange = (current) => {
  params.value.current = current
  getWordList()
}
const onSizeChange = (size) => {
  params.value.current = 1
  params.value.size = size
  getWordList()
}
// 打开修改/编辑弹窗
const editRef = ref()
// 添加事件
const addWord = () => {
  editRef.value.open('add')
}
// 修改事件
const updateWord = (row) => {
  editRef.value.open('update', row)
}
// 删除
const handleRemove = (id) => {
  ElMessageBox.confirm('确认删除该敏感词？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'error'
  })
    .then(async () => {
      const {
        data: { message }
      } = await WordRemoveService(id)
      ElNotification({
        title: '操作结果',
        message: message,
        type: 'success'
      })
      onSizeChange(10)
    })
    .catch(() => {
      ElNotification({
        title: '操作结果',
        message: '系统错误',
        type: 'error'
      })
    })
}

// 设置敏感词状态
const handleSet = async (row) => {
  try {
    await WordSetService(row.id)
    ElMessage.success(row.status == 1 ? '启用成功' : '禁用成功')
  } catch (e) {
    ElMessage.error('服务错误')
  }
}
</script>

<template>
  <page-container title="敏感词管理">
    <template #extra>
      <div
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 15px;
        "
      >
        <el-button type="primary" @click="addWord"> + 添加敏感词 </el-button>
        <el-select
          v-model="params.level"
          style="min-width: 120px"
          @change="onSizeChange(10)"
        >
          <el-option
            v-for="item in levelOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </template>

    <el-table
      :data="wordList"
      stripe
      border
      v-loading="loading"
      element-loading-text="数据加载中......"
    >
      <el-table-column prop="id" label="序号" width="80" />
      <el-table-column prop="word" label="敏感词" />
      <el-table-column label="等级">
        <template #default="{ row }">
          <div v-if="row.level === 1">
            <el-tag type="primary">轻度</el-tag>
          </div>
          <div v-if="row.level === 2">
            <el-tag type="warning">中度</el-tag>
          </div>
          <div v-if="row.level === 3">
            <el-tag type="danger">重度</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="发布时间" />
      <el-table-column prop="updateTime" label="修改时间" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            :icon="Edit"
            type="primary"
            @click="updateWord(row)"
            circle
          />
          <el-button
            :icon="Delete"
            type="danger"
            @click="handleRemove(row.id)"
            circle
          />
        </template>
      </el-table-column>
      <el-table-column label="是否启用">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#409EFF"
            inactive-color="#dcdfe6"
            @change="(newVal) => handleSet(row, newVal)"
          />
        </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>
  <!-- 添加弹窗 -->
  <AddWord ref="editRef" @success="onSizeChange(10)"></AddWord>
</template>
