<template>
  <div class="compliance-rules">
    <el-card>
      <div slot="header" class="card-header">
        <span>合规规则配置</span>
        <el-button type="primary" @click="handleAdd">
          <i class="el-icon-plus"></i>新增规则
        </el-button>
      </div>

      <el-alert
        title="合规规则说明"
        description="配置合规规则用于检查AI回复内容是否合规，支持关键词匹配和正则表达式。违规时可设置警告、拦截或转人工等操作。"
        type="info"
        show-icon
        :closable="false"
        style="margin-bottom: 20px"
      />

      <el-table :data="tableData" v-loading="loading" border>
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="ruleName" label="规则名称" min-width="150" />
        <el-table-column prop="ruleType" label="规则类型" width="100" align="center">
          <template slot-scope="{ row }">
            <el-tag :type="row.ruleType === 'regex' ? 'warning' : 'info'">
              {{ row.ruleType === 'regex' ? '正则' : '关键词' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pattern" label="匹配规则" min-width="200" show-overflow-tooltip />
        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
        <el-table-column prop="action" label="违规动作" width="100" align="center">
          <template slot-scope="{ row }">
            <el-tag :type="getActionType(row.action)">{{ getActionText(row.action) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="severity" label="严重程度" width="100" align="center">
          <template slot-scope="{ row }">
            <el-rate v-model="row.severity" disabled :max="3" />
          </template>
        </el-table-column>
        <el-table-column prop="enabled" label="状态" width="80" align="center">
          <template slot-scope="{ row }">
            <el-tag :type="row.enabled === 1 ? 'success' : 'danger'">
              {{ row.enabled === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="primary" size="mini" @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="规则名称" prop="ruleName">
          <el-input v-model="form.ruleName" placeholder="请输入规则名称" />
        </el-form-item>
        <el-form-item label="规则类型" prop="ruleType">
          <el-radio-group v-model="form.ruleType">
            <el-radio label="keyword">关键词</el-radio>
            <el-radio label="regex">正则表达式</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="匹配规则" prop="pattern">
          <el-input v-model="form.pattern" type="textarea" :rows="3"
            :placeholder="form.ruleType === 'keyword' ? '多个关键词用逗号分隔' : '输入正则表达式'" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description" type="textarea" :rows="2" placeholder="规则描述" />
        </el-form-item>
        <el-form-item label="违规动作" prop="action">
          <el-select v-model="form.action" style="width: 100%">
            <el-option label="警告" value="warn" />
            <el-option label="拦截" value="block" />
            <el-option label="转人工" value="takeover" />
          </el-select>
        </el-form-item>
        <el-form-item label="严重程度">
          <el-rate v-model="form.severity" :max="3" />
        </el-form-item>
        <el-form-item label="启用">
          <el-switch v-model="form.enabled" :active-value="1" :inactive-value="0" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { workflowExecApi } from '@/api/company/workflowExec'

export default {
  name: 'ComplianceRules',
  data() {
    return {
      loading: false,
      tableData: [],
      dialogVisible: false,
      dialogTitle: '',
      form: {
        id: null, ruleName: '', ruleType: 'keyword', pattern: '',
        description: '', action: 'warn', severity: 1, enabled: 1
      },
      rules: {
        ruleName: [{ required: true, message: '请输入规则名称', trigger: 'blur' }],
        ruleType: [{ required: true, message: '请选择规则类型', trigger: 'change' }],
        pattern: [{ required: true, message: '请输入匹配规则', trigger: 'blur' }],
        action: [{ required: true, message: '请选择违规动作', trigger: 'change' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        const res = await workflowExecApi.getComplianceRules()
        this.tableData = res.data || []
      } catch (error) {
        this.$message.error('获取列表失败')
      } finally {
        this.loading = false
      }
    },
    handleAdd() {
      this.dialogTitle = '新增规则'
      this.form = { id: null, ruleName: '', ruleType: 'keyword', pattern: '', description: '', action: 'warn', severity: 1, enabled: 1 }
      this.dialogVisible = true
      this.$nextTick(() => { this.$refs.formRef && this.$refs.formRef.resetFields() })
    },
    handleEdit(row) {
      this.dialogTitle = '编辑规则'
      this.form = { ...row }
      this.dialogVisible = true
    },
    async handleSubmit() {
      try {
        await this.$refs.formRef.validate()
        if (this.form.id) {
          await workflowExecApi.updateComplianceRule(this.form.id, this.form)
          this.$message.success('修改成功')
        } else {
          await workflowExecApi.addComplianceRule(this.form)
          this.$message.success('新增成功')
        }
        this.dialogVisible = false
        this.getList()
      } catch (error) {
        if (error !== false) this.$message.error('操作失败')
      }
    },
    async handleDelete(row) {
      try {
        await this.$confirm('确定要删除该规则吗？', '提示', { type: 'warning' })
        await workflowExecApi.deleteComplianceRule(row.id)
        this.$message.success('删除成功')
        this.getList()
      } catch (error) {
        if (error !== 'cancel') this.$message.error('删除失败')
      }
    },
    getActionType(action) {
      const map = { warn: 'warning', block: 'danger', takeover: '' }
      return map[action] || 'info'
    },
    getActionText(action) {
      const map = { warn: '警告', block: '拦截', takeover: '转人工' }
      return map[action] || action
    }
  }
}
</script>

<style scoped>
.card-header { display: flex; justify-content: space-between; align-items: center; }
</style>
