<template>
  <div class="activity-config-list">
    <el-card>
      <template #header>
        <div class="header">
          <div>
            <div class="title">{{ config.title }}</div>
            <div class="desc">{{ config.desc }}</div>
          </div>
          <el-button type="primary" @click="openDialog()">
            <el-icon><Plus /></el-icon>{{ config.addText }}
          </el-button>
        </div>
      </template>

      <el-table :data="rows" border stripe>
        <el-table-column v-for="col in config.columns" :key="col.prop" :prop="col.prop" :label="col.label" :min-width="col.width || 140" show-overflow-tooltip>
          <template #default="{ row }">
            <span v-if="col.type === 'array'">{{ arrayText(row[col.prop]) }}</span>
            <span v-else-if="col.type === 'bool'">{{ row[col.prop] ? '是' : '否' }}</span>
            <span v-else>{{ row[col.prop] || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="isActive(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="170" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="openDialog(row)">编辑</el-button>
            <el-button type="primary" link @click="toggleStatus(row)">{{ isActive(row.status) ? '停用' : '启用' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" :title="editing.id ? `编辑${config.shortTitle}` : `新增${config.shortTitle}`" width="820px">
      <el-form :model="editing" label-width="130px">
        <el-row :gutter="16">
          <el-col v-for="field in config.fields" :key="field.prop" :span="field.span || 12">
            <el-form-item :label="field.label" :required="field.required !== false">
              <el-input v-if="!field.type || field.type === 'text'" v-model="editing[field.prop]" :placeholder="field.placeholder" />
              <el-input v-else-if="field.type === 'textarea'" v-model="editing[field.prop]" type="textarea" :rows="field.rows || 3" :placeholder="field.placeholder" />
              <el-input-number v-else-if="field.type === 'number'" v-model="editing[field.prop]" :min="field.min || 0" :max="field.max || 999999" style="width: 100%" />
              <el-switch v-else-if="field.type === 'switch'" v-model="editing[field.prop]" />
              <el-select v-else-if="field.type === 'select'" v-model="editing[field.prop]" style="width: 100%" :multiple="field.multiple" :allow-create="field.allowCreate" filterable default-first-option>
                <el-option v-for="option in field.options" :key="option" :label="option" :value="option" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = 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'

const configs = {
  forms: {
    title: '报名表单管理',
    shortTitle: '报名表单',
    desc: '配置报名时收集的补充信息，活动中最多引用两个字段。',
    addText: '新增表单',
    listName: 'forms',
    activeStatus: '启用',
    inactiveStatus: '停用',
    defaults: { status: '启用', fieldType: '文本', requiredFlag: true, maxLength: 30, jumpLink: '', usedBy: 0 },
    columns: [
      { prop: 'id', label: '表单编号', width: 120 },
      { prop: 'name', label: '表单名称' },
      { prop: 'fields', label: '字段名称' },
      { prop: 'fieldType', label: '字段类型', width: 100 },
      { prop: 'requiredFlag', label: '必填', width: 80, type: 'bool' },
      { prop: 'maxLength', label: '最大长度', width: 90 },
      { prop: 'jumpLink', label: '第三方跳转链接' },
      { prop: 'usedBy', label: '引用活动数', width: 110 }
    ],
    fields: [
      { prop: 'name', label: '表单名称' },
      { prop: 'fields', label: '字段名称' },
      { prop: 'placeholder', label: '提示文案' },
      { prop: 'fieldType', label: '字段类型', type: 'select', options: ['文本', '数字', '手机号', '会员号'] },
      { prop: 'requiredFlag', label: '是否必填', type: 'switch' },
      { prop: 'maxLength', label: '最大长度', type: 'number', min: 1, max: 100 },
      { prop: 'jumpLink', label: '第三方跳转链接', span: 24, required: false },
      { prop: 'status', label: '状态', type: 'select', options: ['启用', '停用'] }
    ]
  },
  progress: {
    title: '达标规则管理',
    shortTitle: '达标规则',
    desc: '配置进度页样式、达标层级、任务条件、标签和连续达标规则。',
    addText: '新增规则',
    listName: 'progressRules',
    activeStatus: '启用',
    inactiveStatus: '停用',
    defaults: { status: '启用', style: '多层级任务', levels: 1, tasks: 1, taskTags: [], copywriting: '', helpText: '', continuousEnabled: false, continuousX: 3, continuousY: 6, continuousZ: 2 },
    columns: [
      { prop: 'id', label: '规则编号', width: 120 },
      { prop: 'name', label: '规则名称' },
      { prop: 'style', label: '进度样式' },
      { prop: 'levels', label: '层级数', width: 90 },
      { prop: 'tasks', label: '任务数', width: 90 },
      { prop: 'taskTags', label: '任务标签', type: 'array' },
      { prop: 'continuousEnabled', label: '连续达标', type: 'bool', width: 90 }
    ],
    fields: [
      { prop: 'name', label: '规则名称' },
      { prop: 'style', label: '进度样式', type: 'select', options: ['多层级任务', '连续达标月份', 'MGM推荐进度'] },
      { prop: 'levels', label: '层级数', type: 'number', min: 1, max: 5 },
      { prop: 'tasks', label: '任务数', type: 'number', min: 1, max: 5 },
      { prop: 'taskTags', label: '任务标签', type: 'select', multiple: true, allowCreate: true, options: ['开户', '资产', '消费', '推荐', 'MGM'] },
      { prop: 'copywriting', label: '对客文案', type: 'textarea', span: 24 },
      { prop: 'helpText', label: '问号说明', type: 'textarea', span: 24, required: false },
      { prop: 'continuousEnabled', label: '连续达标', type: 'switch' },
      { prop: 'continuousX', label: '观察周期X', type: 'number', min: 1, max: 24 },
      { prop: 'continuousY', label: '达标月份Y', type: 'number', min: 1, max: 24 },
      { prop: 'continuousZ', label: '发奖次数Z', type: 'number', min: 1, max: 24 },
      { prop: 'status', label: '状态', type: 'select', options: ['启用', '停用'] }
    ]
  },
  launches: {
    title: '活动投放管理',
    shortTitle: '投放配置',
    desc: '配置渠道码、链接、二维码、MobileX/权益首页版位和合作方落地页。',
    addText: '新增投放',
    listName: 'launches',
    activeStatus: '已投放',
    inactiveStatus: '待投放',
    defaults: { status: '待投放', channelCode: '', link: '', qrCode: true, placement: '', landingPage: '' },
    columns: [
      { prop: 'id', label: '投放编号', width: 120 },
      { prop: 'activityName', label: '活动名称' },
      { prop: 'channel', label: '投放渠道' },
      { prop: 'channelCode', label: '渠道码' },
      { prop: 'material', label: '投放物料' },
      { prop: 'placement', label: '版位' },
      { prop: 'link', label: '链接' }
    ],
    fields: [
      { prop: 'activityName', label: '活动名称' },
      { prop: 'channel', label: '投放渠道', type: 'select', options: ['权益首页', '全部活动', '渠道二维码', 'MobileX', '合作方链接'] },
      { prop: 'channelCode', label: '渠道码' },
      { prop: 'material', label: '投放物料' },
      { prop: 'qrCode', label: '生成二维码', type: 'switch' },
      { prop: 'placement', label: '版位' },
      { prop: 'link', label: '活动链接', span: 24 },
      { prop: 'landingPage', label: '合作方落地页', span: 24, required: false },
      { prop: 'status', label: '状态', type: 'select', options: ['待投放', '已投放'] }
    ]
  },
  notifications: {
    title: '活动通知模板管理',
    shortTitle: '通知模板',
    desc: '配置报名成功、活动开始前、达标发奖等短信模板和变量。',
    addText: '新增模板',
    listName: 'notifications',
    activeStatus: '启用',
    inactiveStatus: '停用',
    defaults: { status: '启用', channel: '短信', scene: '报名成功', variables: 'activityName' },
    columns: [
      { prop: 'id', label: '模板编号', width: 120 },
      { prop: 'name', label: '模板名称' },
      { prop: 'scene', label: '触发场景' },
      { prop: 'channel', label: '通知渠道' },
      { prop: 'variables', label: '变量' },
      { prop: 'template', label: '模板内容' }
    ],
    fields: [
      { prop: 'name', label: '模板名称' },
      { prop: 'scene', label: '触发场景', type: 'select', options: ['报名成功', '活动开始前', '达标发奖', '补充信息提醒'] },
      { prop: 'channel', label: '通知渠道', type: 'select', options: ['短信', '站内信', 'Push'] },
      { prop: 'variables', label: '变量' },
      { prop: 'template', label: '模板内容', type: 'textarea', span: 24, rows: 4 },
      { prop: 'status', label: '状态', type: 'select', options: ['启用', '停用'] }
    ]
  }
}

export default {
  name: 'ActivityConfigList',
  data() {
    return {
      dialogVisible: false,
      editing: {}
    }
  },
  computed: {
    type() {
      return this.$route.meta.configType
    },
    config() {
      return configs[this.type]
    },
    rows() {
      return activityStore[this.config.listName] || []
    }
  },
  methods: {
    arrayText(value) {
      return Array.isArray(value) ? value.join('、') : value || '-'
    },
    isActive(status) {
      return status === this.config.activeStatus || (!status && this.config.activeStatus === '启用')
    },
    openDialog(row) {
      this.editing = row ? { ...this.config.defaults, ...JSON.parse(JSON.stringify(row)) } : { ...this.config.defaults }
      this.dialogVisible = true
    },
    save() {
      const required = this.config.fields.find((field) => field.required !== false)
      if (required && !this.editing[required.prop]) {
        ElMessage.warning(`${required.label}必填`)
        return
      }
      if (this.type === 'forms' && Number(this.editing.maxLength) <= 0) {
        ElMessage.warning('最大长度必须大于 0')
        return
      }
      if (this.type === 'progress' && Number(this.editing.tasks) > 5) {
        ElMessage.warning('每层任务最多 5 个')
        return
      }
      if (this.type === 'launches' && this.editing.status === '已投放' && !this.editing.link) {
        ElMessage.warning('已投放状态下活动链接必填')
        return
      }
      activityStore.saveSimple(this.config.listName, this.editing)
      ElMessage.success('保存成功')
      this.dialogVisible = false
    },
    toggleStatus(row) {
      row.status = this.isActive(row.status) ? this.config.inactiveStatus : this.config.activeStatus
      activityStore.saveSimple(this.config.listName, row)
      ElMessage.success('状态已更新')
    }
  }
}
</script>

<style scoped>
.header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.title { font-size: 16px; font-weight: 600; color: #303133; }
.desc { margin-top: 4px; font-size: 13px; color: #909399; }
</style>
