<template>
  <div class="rule-group-list">
    <el-card>
      <template #header>
        <div class="search-section">
        <div class="search-row">
          <el-form :model="searchForm" label-width="100px" inline>
            <el-form-item label="规则组编号:">
              <el-input v-model="searchForm.id" placeholder="请输入" clearable style="width: 180px" />
            </el-form-item>
            <el-form-item label="规则组名称:">
              <el-input v-model="searchForm.name" placeholder="请输入" clearable style="width: 180px" />
            </el-form-item>
            <el-form-item label="规则组类型:">
              <el-select v-model="searchForm.type" clearable placeholder="全部" style="width: 160px">
                <el-option
                  v-for="opt in groupTypes"
                  :key="opt.value"
                  :label="opt.label"
                  :value="opt.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="审核状态:">
              <el-select v-model="searchForm.auditStatus" clearable placeholder="全部" style="width: 160px">
                <el-option label="新增待审核" value="新增待审核" />
                <el-option label="编辑待审核" value="编辑待审核" />
                <el-option label="审核通过" value="审核通过" />
              </el-select>
            </el-form-item>
            <div class="button-group">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </el-form>
        </div>
        <div class="action-row">
          <el-button type="primary" @click="handleCreate">
            <el-icon><Plus /></el-icon>新增规则组
          </el-button>
        </div>
        </div>
      </template>

      <el-table :data="pagedData" stripe border style="width: 100%">
        <el-table-column label="操作" width="220" fixed="left">
          <template #default="scope">
            <el-button type="text" size="small" @click="handleView(scope.row)">查看详情</el-button>
            <template v-if="scope.row.status === 'draft'">
              <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="text" size="small" @click="handlePublish(scope.row)">提交审核</el-button>
              <el-button
                type="text"
                size="small"
                style="color: #F56C6C"
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="规则组编号" width="170" />
        <el-table-column prop="name" label="规则组名称" min-width="180" show-overflow-tooltip />
        <el-table-column label="规则组类型" width="130">
          <template #default="scope">{{ typeLabel(scope.row.type) }}</template>
        </el-table-column>
        <el-table-column label="规则逻辑" width="110" align="center">
          <template #default="scope">
            <el-tag size="small" :type="scope.row.logic === 'AND' ? '' : 'warning'">
              {{ scope.row.logic === 'AND' ? '且（AND）' : '或（OR）' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="规则数量" width="90" align="center">
          <template #default="scope">{{ (scope.row.rules || []).length }}</template>
        </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'online' ? 'success' : 'info'" size="small">
              {{ scope.row.status === 'online' ? '已上线' : '新建' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" width="120" align="center">
          <template #default="scope">
            <el-tag :type="auditStatusTag(scope.row.auditStatus)" size="small">{{ scope.row.auditStatus }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="创建人" width="100" />
        <el-table-column prop="createdAt" label="创建时间" width="170" />
      </el-table>

      <div class="pagination-section">
        <span class="total">共 {{ filteredData.length }} 条</span>
        <el-pagination
          layout="prev, pager, next, sizes, jumper"
          v-model:current-page="page.current"
          v-model:page-size="page.size"
          :page-sizes="[10, 20, 50]"
          :total="filteredData.length"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import ruleGroupStore from '@/store/ruleGroupStore'
import { GROUP_TYPES } from '@/config/metaRules'

export default {
  name: 'RuleGroupList',
  data() {
    return {
      searchForm: { id: '', name: '', type: '', auditStatus: '' },
      page: { current: 1, size: 10 },
      groupTypes: GROUP_TYPES
    }
  },
  computed: {
    filteredData() {
      return ruleGroupStore.query(this.searchForm)
    },
    pagedData() {
      const start = (this.page.current - 1) * this.page.size
      return this.filteredData.slice(start, start + this.page.size)
    }
  },
  methods: {
    typeLabel(type) {
      const item = this.groupTypes.find((g) => g.value === type)
      return item ? item.label : type
    },
    auditStatusTag(s) {
      if (s === '审核通过') return 'success'
      if (s === '新增待审核' || s === '编辑待审核') return ''
      return 'info'
    },
    handleSearch() {
      this.page.current = 1
    },
    handleReset() {
      this.searchForm = { id: '', name: '', type: '', auditStatus: '' }
      this.page.current = 1
    },
    handleCreate() {
      this.$router.push('/customization/hsbc/rule-groups/add')
    },
    handleView(row) {
      this.$router.push(`/customization/hsbc/rule-groups/view/${row.id}`)
    },
    handleEdit(row) {
      this.$router.push(`/customization/hsbc/rule-groups/edit/${row.id}`)
    },
    handlePublish(row) {
      ElMessageBox.confirm(`确定要提交规则组「${row.name}」审核吗？审核通过后将不可编辑/删除。`, '提示', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ruleGroupStore.publish(row.id)
        ElMessage.success('已提交审核（demo 默认通过）')
      }).catch(() => {})
    },
    handleDelete(row) {
      ElMessageBox.confirm(`确定要删除规则组「${row.name}」吗？删除后无法恢复`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ruleGroupStore.remove(row.id)
        ElMessage.success('删除成功')
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.rule-group-list { padding: 0; }

.search-section { display: flex; flex-direction: column; }
.search-row .el-form { display: flex; flex-wrap: wrap; gap: 8px 0; }
.search-row .el-form-item { margin-right: 8px; margin-bottom: 8px; }

.button-group { display: flex; gap: 5px; margin-top: 2px; }
.action-row { margin-top: 12px; }

.pagination-section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.pagination-section .total { color: #606266; font-size: 13px; }
</style>
