<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="crowdType" label="客群类型" width="120" />
        <el-table-column prop="source" label="来源" width="120" />
        <el-table-column prop="rule" label="规则说明" min-width="260" show-overflow-tooltip />
        <el-table-column prop="memberCount" label="客户数" width="100" />
        <el-table-column prop="usedBy" label="引用活动" min-width="160" show-overflow-tooltip />
        <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="110px">
        <el-form-item label="客群名称" required><el-input v-model="form.name" /></el-form-item>
        <el-form-item label="客群类型" required><el-select v-model="form.crowdType" style="width:100%"><el-option label="可见客群" value="可见客群" /><el-option label="报名客群" value="报名客群" /><el-option label="达标客群" value="达标客群" /></el-select></el-form-item>
        <el-form-item label="来源" required><el-select v-model="form.source" style="width:100%"><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.rule" type="textarea" :rows="3" /></el-form-item>
        <el-form-item label="客户数"><el-input-number v-model="form.memberCount" :min="0" /></el-form-item>
        <el-form-item label="引用活动"><el-input v-model="form.usedBy" /></el-form-item>
        <el-form-item label="名额控制">
          <el-input-number v-model="form.quota" :min="0" placeholder="不填表示不限" />
        </el-form-item>
        <el-form-item label="报名成功引导语">
          <el-switch v-model="form.enableSignupGuide" />
        </el-form-item>
        <template v-if="form.enableSignupGuide">
          <el-form-item label="报名成功页引导语配置" class="signup-guide-block">
            <div class="signup-guide-card">
              <el-form-item label="标题" :label-width="'80px'" required>
                <el-input v-model="form.signupGuideTitle" placeholder="请输入标题" />
              </el-form-item>
              <el-form-item label="描述" :label-width="'80px'">
                <el-input v-model="form.signupGuideDesc" type="textarea" :rows="3" placeholder="请输入描述" />
              </el-form-item>
            </div>
          </el-form-item>
        </template>
        <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: 'ActivityCrowdManagement',
  data() { return { visible: false, form: {} } },
  computed: { rows() { return activityStore.activityCrowds } },
  methods: {
    openDialog(row) { this.form = row ? { ...row } : { crowdType: '可见客群', source: '标签规则', memberCount: 0, status: '启用', quota: 0, enableSignupGuide: false, signupGuideTitle: '', signupGuideDesc: '' }; this.visible = true },
    save() {
      if (!this.form.name || !this.form.rule) return ElMessage.warning('客群名称和规则说明必填');
      if (this.form.enableSignupGuide && !this.form.signupGuideTitle) return ElMessage.warning('开启报名成功引导语时标题必填');
      activityStore.saveSimple('activityCrowds', this.form);
      this.visible = false;
      ElMessage.success('保存成功');
    },
    toggle(row) { row.status = row.status === '启用' ? '停用' : '启用'; activityStore.saveSimple('activityCrowds', 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>
