<template>
  <div class="activity-mutex-group">
    <el-card>
      <template #header>
        <div class="search-section">
          <div class="search-row">
            <el-form :model="searchForm" inline label-width="90px">
              <el-form-item label="互斥组名称"><el-input v-model="searchForm.name" clearable placeholder="请输入" class="search-field" /></el-form-item>
              <el-form-item label="状态">
                <el-select v-model="searchForm.status" clearable placeholder="全部" class="status-field">
                  <el-option label="启用" value="启用" /><el-option label="停用" value="停用" />
                </el-select>
              </el-form-item>
              <el-form-item><el-button type="primary" @click="handleSearch">查询</el-button><el-button @click="handleReset">重置</el-button></el-form-item>
            </el-form>
          </div>
          <div class="operation-row"><el-button type="primary" @click="handleCreate"><el-icon><Plus /></el-icon>新增互斥组</el-button></div>
        </div>
      </template>

      <el-table :data="pagedRows" stripe border style="width:100%">
        <el-table-column label="操作" width="150" fixed="left" align="center">
          <template #default="{ row }">
            <div class="list-actions">
              <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" size="small" @click="toggleStatus(row)">{{ row.status === '启用' ? '停用' : '启用' }}</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="互斥组编号" width="120" align="center" />
        <el-table-column prop="name" label="互斥组名称" min-width="160" show-overflow-tooltip />
        <el-table-column label="活动类型" width="160" align="center"><template #default="{ row }">{{ businessTypeText(row.businessType) }}</template></el-table-column>
        <el-table-column prop="activities" label="互斥活动" min-width="220" show-overflow-tooltip />
        <el-table-column label="推荐人进度展示" width="130" align="center">
          <template #default="{ row }"><el-tag :type="row.showReferrerProgress ? 'success' : 'info'">{{ row.showReferrerProgress ? '开启' : '关闭' }}</el-tag></template>
        </el-table-column>
        <el-table-column label="状态" width="90" align="center"><template #default="{ row }"><el-tag :type="row.status === '启用' ? 'success' : 'info'">{{ row.status }}</el-tag></template></el-table-column>
        <el-table-column prop="updatedAt" label="更新时间" width="170" align="center" />
      </el-table>
      <div class="pagination-section">
        <span class="total">Total {{ filteredRows.length }}</span>
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" layout="prev, pager, next, sizes, jumper" :page-sizes="[10, 20, 50]" :total="filteredRows.length" />
      </div>
    </el-card>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import activityStore from '@/store/activityStore'

export default {
  name: 'ActivityMutexGroup',
  data() {
    return {
      Plus,
      searchForm: { name: '', status: '' },
      appliedSearch: { name: '', status: '' },
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    rows() { return activityStore.mutexGroups },
    filteredRows() {
      return this.rows.filter((row) => {
        if (this.appliedSearch.name && !String(row.name || '').includes(this.appliedSearch.name)) return false
        if (this.appliedSearch.status && row.status !== this.appliedSearch.status) return false
        return true
      })
    },
    pagedRows() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.filteredRows.slice(start, start + this.pageSize)
    }
  },
  methods: {
    handleSearch() { this.appliedSearch = { ...this.searchForm }; this.currentPage = 1 },
    handleReset() { this.searchForm = { name: '', status: '' }; this.handleSearch() },
    handleCreate() { this.$router.push('/customization/hsbc/activity-mutex-groups/add') },
    handleEdit(row) { this.$router.push(`/customization/hsbc/activity-mutex-groups/edit/${row.id}`) },
    businessTypeText(value) { return Array.isArray(value) ? value.join('、') : (value || '-') },
    async toggleStatus(row) {
      const action = row.status === '启用' ? '停用' : '启用'
      await ElMessageBox.confirm(`确定${action}互斥组「${row.name}」吗？`, `${action}互斥组`, { type: 'warning' })
      row.status = row.status === '启用' ? '停用' : '启用'
      activityStore.saveSimple('mutexGroups', row)
      ElMessage.success('状态已更新')
    }
  }
}
</script>

<style scoped>
.activity-mutex-group { padding:0; }
.search-section { display:flex; flex-direction:column; }
.search-row { margin-bottom:15px; }
.search-row .el-form { display:flex; flex-wrap:wrap; }
.search-row .el-form-item { margin-right:0; margin-bottom:0; }
.search-field { width:200px; }
.status-field { width:140px; }
.operation-row { display:flex; align-items:center; }
.pagination-section { display:flex; justify-content:flex-end; align-items:center; gap:20px; margin-top:20px; }
.pagination-section .total { color:#606266; font-size:13px; }
.list-actions { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; }
.list-actions :deep(.el-button) { margin-left:0; padding:0; }
</style>
