<template>
  <div class="activity-progress-template">
    <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="templateType" label="进度类型" width="150" />
        <el-table-column prop="statusTexts" label="状态文案" min-width="210" show-overflow-tooltip />
        <el-table-column prop="levels" label="层级/任务展示" min-width="190" show-overflow-tooltip />
        <el-table-column prop="rewardMode" label="发奖展示规则" min-width="170" show-overflow-tooltip />
        <el-table-column label="连续达标" width="100" align="center">
          <template #default="{ row }"><el-tag :type="row.continuousEnabled ? 'warning' : 'info'">{{ row.continuousEnabled ? '是' : '否' }}</el-tag></template>
        </el-table-column>
        <el-table-column prop="mgmView" label="MGM视角" width="100" />
        <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="860px">
      <el-form :model="form" label-width="130px">
        <el-divider content-position="left">基础信息</el-divider>
        <el-row :gutter="16">
          <el-col :span="12"><el-form-item label="模板名称" required><el-input v-model="form.name" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="进度类型" required><el-select v-model="form.templateType" style="width:100%"><el-option label="多条件多次发奖" value="多条件多次发奖" /><el-option label="多条件单次发奖" value="多条件单次发奖" /><el-option label="MGM专属" value="MGM专属" /></el-select></el-form-item></el-col>
          <el-col :span="24"><el-form-item label="状态文案" required><el-input v-model="form.statusTexts" placeholder="未达标/已达标/已发奖/无法继续参与" /></el-form-item></el-col>
        </el-row>

        <el-divider content-position="left">层级与奖励展示</el-divider>
        <el-form-item label="层级/任务展示" required><el-input v-model="form.levels" type="textarea" :rows="3" placeholder="如：达标50万、达标100万；开户、资产、消费" /></el-form-item>
        <el-form-item label="发奖展示规则" required><el-input v-model="form.rewardMode" placeholder="如：每层级独立发奖、全部条件满足后发一次奖" /></el-form-item>
        <el-form-item label="未达标按钮文案"><el-input v-model="form.unreachedButtonText" placeholder="默认：查看达标详情" /></el-form-item>

        <el-divider content-position="left">连续达标展示</el-divider>
        <el-row :gutter="16">
          <el-col :span="8"><el-form-item label="是否连续达标"><el-switch v-model="form.continuousEnabled" /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="观察周期X"><el-input-number v-model="form.continuousX" :min="1" :max="24" /></el-form-item></el-col>
          <el-col :span="8"><el-form-item label="达标月份Y"><el-input-number v-model="form.continuousY" :min="1" :max="24" /></el-form-item></el-col>
          <el-col :span="24"><el-form-item label="连续规则说明"><el-input v-model="form.continuousRule" /></el-form-item></el-col>
        </el-row>

        <el-divider content-position="left">MGM专属展示</el-divider>
        <el-row :gutter="16">
          <el-col :span="8"><el-form-item label="MGM视角"><el-select v-model="form.mgmView" style="width:100%"><el-option label="是" value="是" /><el-option label="否" value="否" /></el-select></el-form-item></el-col>
          <el-col :span="16"><el-form-item label="被推荐人状态来源"><el-input v-model="form.referredStatusSource" placeholder="MGM标签、推荐关系、活动报名记录" /></el-form-item></el-col>
          <el-col :span="24"><el-form-item label="未达标原因文案"><el-input v-model="form.unreachedReasonText" type="textarea" :rows="2" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="推荐人视角按钮"><el-input v-model="form.referrerButtonText" placeholder="查看达标详情" /></el-form-item></el-col>
          <el-col :span="12"><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-col>
        </el-row>
      </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: 'ActivityProgressTemplate',
  data() {
    return { visible: false, form: {} }
  },
  computed: {
    rows() { return activityStore.progressTemplates }
  },
  methods: {
    openDialog(row) {
      this.form = row ? { ...row } : {
        templateType: '多条件多次发奖',
        statusTexts: '未达标/已达标/已发奖/无法继续参与',
        levels: '',
        rewardMode: '',
        unreachedButtonText: '查看达标详情',
        continuousEnabled: false,
        continuousX: 12,
        continuousY: 8,
        continuousRule: '',
        mgmView: '否',
        referredStatusSource: '',
        unreachedReasonText: '',
        referrerButtonText: '查看达标详情',
        status: '启用'
      }
      this.visible = true
    },
    save() {
      if (!this.form.name || !this.form.templateType || !this.form.levels || !this.form.rewardMode) {
        return ElMessage.warning('模板名称、进度类型、层级展示和发奖展示规则必填')
      }
      if (this.form.continuousEnabled && Number(this.form.continuousY) > Number(this.form.continuousX)) {
        return ElMessage.warning('连续达标月份Y不能大于观察周期X')
      }
      activityStore.saveSimple('progressTemplates', this.form)
      this.visible = false
      ElMessage.success('保存成功')
    },
    toggle(row) {
      row.status = row.status === '启用' ? '停用' : '启用'
      activityStore.saveSimple('progressTemplates', 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>
