<template>
  <div class="activity-mutex-group-edit">
    <el-card class="activity-page-card">
      <template #header>
        <div class="page-header">
          <span>{{ isEdit ? '编辑互斥组' : '新增互斥组' }}</span>
          <el-button @click="goBack">返回</el-button>
        </div>
      </template>

    <el-form :model="form" label-position="top" class="mutex-form">
      <el-card shadow="never" class="section-card">
        <template #header><div class="section-title">基础配置</div></template>
        <el-row :gutter="30">
          <el-col :span="12"><el-form-item label="互斥组名称" required><el-input v-model="form.name" placeholder="例如：NTB新客互斥组" /></el-form-item></el-col>
          <el-col :span="12">
            <el-form-item label="活动类型">
              <el-select v-model="form.businessType" multiple clearable placeholder="请选择活动类型" style="width:100%"><el-option label="层层礼" value="层层礼" /><el-option label="NTB" value="NTB" /><el-option label="MGM" value="MGM" /><el-option label="普通活动" value="普通活动" /></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="互斥活动">
              <el-select v-model="form.activityIds" multiple filterable clearable placeholder="请选择已创建的活动" style="width:100%">
                <el-option v-for="activity in activityOptions" :key="activity.id" :label="`${activity.name}（${activity.id}）`" :value="activity.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card shadow="never" class="section-card">
        <template #header><div class="section-title">MGM推荐活动设置</div></template>
        <el-form-item label="是否向推荐人展示推荐人进度" class="referrer-progress-switch-item">
          <el-switch v-model="form.showReferrerProgress" active-text="开启" inactive-text="关闭" />
        </el-form-item>
        <el-form-item label="报名拦截文案">
          <el-input v-model="form.signupInterceptTip" type="textarea" :rows="3" placeholder="例如：您已经于 {REF_DATE} 参与【{ACT}】活动。根据活动规则，您无法再继续报名【{CUR}】活动。" />
          <div class="variable-tip">
            <span class="variable-tip-label">可用变量：</span>
            <span class="variable-token">{ACT}</span><span>已参与活动名称</span>
            <span class="variable-token">{CUR}</span><span>当前活动名称</span>
            <span class="variable-token">{JOIN_DATE}</span><span>参与日期</span>
            <span class="variable-token">{REF_DATE}</span><span>推荐日期</span>
          </div>
        </el-form-item>
        <el-form-item label="无法继续参与文案（被推荐人）">
          <el-input v-model="form.referrerProgressTip" type="textarea" :rows="3" placeholder="例如：您已参与【{ACT}】活动，暂无法继续参与【{CUR}】活动" />
          <div class="variable-tip">
            <span class="variable-tip-label">可用变量：</span>
            <span class="variable-token">{ACT}</span><span>已参与活动名称</span>
            <span class="variable-token">{CUR}</span><span>当前活动名称</span>
            <span class="variable-token">{JOIN_DATE}</span><span>参与日期</span>
            <span class="variable-token">{REF_DATE}</span><span>推荐日期</span>
          </div>
        </el-form-item>
        <el-form-item label="未达标文案（推荐人）">
          <el-input v-model="form.referrerUnreachedTip" type="textarea" :rows="3" placeholder="例如：您推荐的客户暂未达标，请关注后续活动进度" />
          <div class="variable-tip">
            <span class="variable-tip-label">可用变量：</span>
            <span class="variable-token">{ACT}</span><span>已参与活动名称</span>
            <span class="variable-token">{CUR}</span><span>当前活动名称</span>
            <span class="variable-token">{JOIN_DATE}</span><span>参与日期</span>
            <span class="variable-token">{REF_DATE}</span><span>推荐日期</span>
          </div>
        </el-form-item>
      </el-card>

      <el-card shadow="never" class="section-card">
        <template #header><div class="section-title">其他活动设置</div></template>
        <el-form-item label="报名拦截文案">
          <el-input v-model="form.otherSignupInterceptTip" type="textarea" :rows="3" placeholder="例如：您已参与【{ACT}】活动，无法继续报名【{CUR}】活动" />
          <div class="variable-tip">
            <span class="variable-tip-label">可用变量：</span>
            <span class="variable-token">{ACT}</span><span>已参与活动名称</span>
            <span class="variable-token">{CUR}</span><span>当前活动名称</span>
            <span class="variable-token">{JOIN_DATE}</span><span>参与日期</span>
            <span class="variable-token">{REF_DATE}</span><span>推荐日期</span>
          </div>
        </el-form-item>
      </el-card>

      <el-card shadow="never" class="section-card">
        <template #header><div class="section-title">互斥组状态与备注</div></template>
        <el-row :gutter="30">
          <el-col :span="12"><el-form-item label="状态" required><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-col :span="24"><el-form-item label="备注"><el-input v-model="form.remark" type="textarea" :rows="2" /></el-form-item></el-col>
        </el-row>
      </el-card>
    </el-form>

    <div class="action-bar">
      <el-button @click="goBack">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
    </el-card>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import activityStore from '@/store/activityStore'

function emptyMutex() {
  return {
    name: '', businessType: [], activities: '', activityIds: [], showReferrerProgress: false,
    referrerProgressTip: '', signupInterceptTip: '', referrerUnreachedTip: '', otherSignupInterceptTip: '', remark: '', status: '启用'
  }
}

export default {
  name: 'ActivityMutexGroupEdit',
  data() { return { form: emptyMutex() } },
  computed: {
    isEdit() { return this.$route.name === 'ActivityMutexGroupEdit' },
    activityOptions() { return activityStore.activities }
  },
  created() {
    if (!this.isEdit) return
    const row = activityStore.mutexGroups.find((item) => item.id === this.$route.params.id)
    if (!row) return this.goBack()
    this.form = { ...emptyMutex(), ...JSON.parse(JSON.stringify(row)) }
    this.normalizeBusinessTypes()
    if (!Array.isArray(this.form.activityIds)) {
      const legacyNames = String(this.form.activities || '').split(/[、，,]/).map((item) => item.trim()).filter(Boolean)
      this.form.activityIds = this.activityOptions.filter((activity) => legacyNames.includes(activity.name)).map((activity) => activity.id)
    }
  },
  methods: {
    save() {
      if (!this.form.name) return ElMessage.warning('互斥组名称必填')
      if (this.form.showReferrerProgress && !this.form.referrerProgressTip) return ElMessage.warning('请填写推荐人进度提示文案')
      this.form.activities = this.form.activityIds.map((id) => this.activityOptions.find((activity) => activity.id === id)?.name || id).join('、')
      activityStore.saveSimple('mutexGroups', this.form)
      ElMessage.success('保存成功')
      this.goBack()
    },
    normalizeBusinessTypes() {
      if (Array.isArray(this.form.businessType)) return
      this.form.businessType = String(this.form.businessType || '')
        .split(/[、，, /]/)
        .map((item) => item.trim())
        .filter(Boolean)
    },
    goBack() { this.$router.push('/customization/hsbc/activity-mutex-groups') }
  }
}
</script>

<style scoped>
.activity-mutex-group-edit { padding:20px; }
.activity-page-card { background:transparent; border:none; box-shadow:none; }
.activity-page-card :deep(> .el-card__header) { margin-bottom:18px; background:#fff; border:1px solid #ebeef5; border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.activity-page-card :deep(> .el-card__body) { padding:0; }
.page-header { display:flex; justify-content:space-between; align-items:center; font-weight:600; }
.section-card { margin-bottom:20px; border:1px solid #ebeef5; border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.section-card :deep(.el-card__header) { padding:12px 20px; background:#fafafa; border-bottom:1px solid #ebeef5; }
.section-title { color:#303133; font-size:16px; font-weight:600; }
.mutex-form :deep(.el-form-item) { margin-bottom:24px; }
.mutex-form :deep(.el-form-item__label) { height:auto; margin-bottom:8px; color:#303133; font-weight:600; line-height:22px; white-space:nowrap; }
.mutex-form :deep(.el-form-item__content) { line-height:normal; }
.variable-tip { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:8px; color:#909399; font-size:12px; line-height:20px; }
.variable-tip-label { color:#606266; }
.variable-token { padding:0 5px; color:#409eff; background:#ecf5ff; border:1px solid #d9ecff; border-radius:3px; font-family:Consolas, Menlo, monospace; }
.action-bar { display:flex; justify-content:center; gap:12px; padding:16px 20px; background:#fff; border:1px solid #ebeef5; border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.action-bar .el-button { min-width:100px; }
@media (max-width:1200px) { .activity-mutex-group-edit :deep(.el-col) { max-width:100%; flex:0 0 100%; } }
</style>
