<template>
  <div>
    <el-card>
      <template #header><div class="header"><div><div class="title">活动权益发放计划</div><div class="desc">配置达标后发什么奖品、怎么发、库存和单客户上限。</div></div><el-button type="primary" @click="openDialog()"><el-icon><Plus /></el-icon>新增计划</el-button></div></template>
      <el-table :data="rows" border stripe>
        <el-table-column prop="id" label="计划编号" width="120" /><el-table-column prop="name" label="计划名称" min-width="180" /><el-table-column prop="rewardType" label="奖品类型" width="110" /><el-table-column prop="rewardName" label="奖品名称" min-width="150" /><el-table-column prop="grantMode" label="发放方式" min-width="160" /><el-table-column prop="perCustomerLimit" label="单客户上限" width="110" /><el-table-column prop="stock" label="库存" width="100" /><el-table-column prop="usedBy" label="引用活动" min-width="160" /><el-table-column label="状态" width="90"><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" /><el-table-column label="操作" width="150" fixed="right"><template #default="{ row }"><el-button type="primary" link @click="openDialog(row)">编辑</el-button><el-button type="primary" link @click="toggle(row)">{{ row.status === '启用' ? '停用' : '启用' }}</el-button></template></el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="visible" :title="form.id ? '编辑发放计划' : '新增发放计划'" width="720px">
      <el-form :model="form" label-width="120px">
        <el-form-item label="计划名称" required><el-input v-model="form.name" /></el-form-item>
        <el-form-item label="奖品类型"><el-select v-model="form.rewardType" style="width:100%"><el-option label="积分" value="积分" /><el-option label="立减金" value="立减金" /><el-option label="卡券" value="卡券" /><el-option label="信用卡权益" value="信用卡权益" /><el-option label="第三方权益" value="第三方权益" /></el-select></el-form-item>
        <el-form-item label="奖品名称" required><el-input v-model="form.rewardName" /></el-form-item>
        <el-form-item label="发放方式"><el-select v-model="form.grantMode" style="width:100%"><el-option label="达标后自动发放" value="达标后自动发放" /><el-option label="达标后跳转领取" value="达标后跳转领取" /><el-option label="报名成功后直接发放" value="报名成功后直接发放" /></el-select></el-form-item>
        <el-form-item label="单客户上限"><el-input-number v-model="form.perCustomerLimit" :min="1" /></el-form-item>
        <el-form-item label="库存"><el-input-number v-model="form.stock" :min="0" /></el-form-item>
        <el-form-item label="引用活动"><el-input v-model="form.usedBy" /></el-form-item>
        <el-form-item label="状态"><el-select v-model="form.status" style="width:100%"><el-option label="启用" value="启用" /><el-option label="停用" value="停用" /></el-select></el-form-item>
      </el-form>
      <template #footer><el-button @click="visible=false">取消</el-button><el-button type="primary" @click="save">保存</el-button></template>
    </el-dialog>
  </div>
</template>
<script>
import { ElMessage } from 'element-plus'
import activityStore from '@/store/activityStore'
export default {
  name: 'ActivityGrantPlan',
  data() { return { visible: false, form: {} } },
  computed: { rows() { return activityStore.activityGrantPlans } },
  methods: {
    openDialog(row) { this.form = row ? { ...row } : { rewardType: '积分', grantMode: '达标后自动发放', perCustomerLimit: 1, stock: 0, status: '启用' }; this.visible = true },
    save() { if (!this.form.name || !this.form.rewardName) return ElMessage.warning('计划名称和奖品名称必填'); activityStore.saveSimple('activityGrantPlans', this.form); this.visible = false; ElMessage.success('保存成功') },
    toggle(row) { row.status = row.status === '启用' ? '停用' : '启用'; activityStore.saveSimple('activityGrantPlans', row) }
  }
}
</script>
<style scoped>.header{display:flex;justify-content:space-between;align-items:center;gap:16px}.title{font-size:16px;font-weight:600}.desc{margin-top:4px;color:#909399;font-size:13px}</style>
