<template>
  <div class="equity-grant-campaign-view">
    <el-card v-if="current">
      <template #header>
        <div class="header">
          <span class="title">查看发放计划</span>
        </div>
      </template>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="发放计划 ID">{{ current.id }}</el-descriptions-item>
        <el-descriptions-item label="发放计划名称">{{ current.name }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="statusTag" size="small">{{ statusLabel }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="获取方式">
          <el-tag :type="current.grantMode === 'direct' ? 'warning' : 'success'" size="small">{{ grantModeLabel }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="单客户权益数量">{{ grantSummary }}</el-descriptions-item>
        <el-descriptions-item label="开始时间">{{ current.startTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{ current.endTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="选择客群" :span="2">
          <template v-if="(current.crowdList || []).length">
            <el-tag
              v-for="cid in current.crowdList"
              :key="cid"
              size="small"
              type="info"
              style="margin-right:6px;margin-top:4px"
            >{{ crowdLabel(cid) }}</el-tag>
          </template>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="选择权益" :span="2">
          <template v-if="(current.equityList || []).length">
            <el-tag
              v-for="pid in current.equityList"
              :key="pid"
              size="small"
              style="margin-right:6px;margin-top:4px"
            >{{ equityLabel(pid) }}</el-tag>
          </template>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="短信通知" :span="2">
          <div class="sms-info-row">
            <span class="sms-tpl-name">{{ smsTemplateName }}</span>
          </div>
          <div v-if="current.smsTemplate" class="sms-template-preview">{{ current.smsTemplate }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ current.createTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ current.updateTime || '-' }}</el-descriptions-item>
      </el-descriptions>

      <div class="footer">
        <el-button type="primary" @click="goBack">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
import crowdTaskStore from '@/store/crowdTaskStore'

const grantCycleLabelMap = { total: '整个周期', monthly: '每月', quarterly: '每季度', yearly: '每年' }

const SMS_TEMPLATE_NAME_MAP = {
  GRANT_SMS_001: '发放成功通用模板',
  GRANT_SMS_002: '发放成功-含查看入口',
  GRANT_SMS_003: '发放成功-简洁版'
}

export default {
  name: 'EquityGrantCampaignView',
  data() {
    return { current: null, equityOptions: [] }
  },
  computed: {
    crowdOptions() {
      return crowdTaskStore.list
    },
    statusLabel() {
      if (!this.current) return ''
      const now = Date.now()
      const s = new Date(this.current.startTime).getTime()
      const e = new Date(this.current.endTime).getTime()
      if (now < s) return '未开始'
      if (now > e) return '已结束'
      return '进行中'
    },
    statusTag() {
      return { 未开始: 'info', 进行中: 'success', 已结束: '' }[this.statusLabel] || ''
    },
    grantSummary() {
      if (!this.current) return '-'
      const cycle = grantCycleLabelMap[this.current.grantCycle] || '整个周期'
      return `${cycle} ${this.current.grantQuantity || 0} 个`
    },
    grantModeLabel() {
      return this.current && this.current.grantMode === 'direct' ? '直接发放' : '用户领取'
    },
    smsTemplateName() {
      if (!this.current) return '-'
      return SMS_TEMPLATE_NAME_MAP[this.current.smsTemplateId] || this.current.smsTemplateId || '-'
    },
    validitySummary() {
      const v = this.current && this.current.validity
      if (!v) return '-'
      if (v.type === 'fixed') {
        if (!v.fixedRange || v.fixedRange.length !== 2) return '固定日期'
        return `${v.fixedRange[0]} 至 ${v.fixedRange[1]}`
      }
      if (v.type === 'relative') {
        return `自发放起 ${v.relativeDays || 0} 天内有效`
      }
      return '-'
    }
  },
  async created() {
    await this.fetchEquityOptions()
    await this.loadDetail()
  },
  methods: {
    async fetchEquityOptions() {
      const res = await request.get('/api/equity/list', { params: { shelfStatus: '已上架' } })
      this.equityOptions = res.data || []
    },
    async loadDetail() {
      const id = this.$route.params.id
      const res = await request.get('/api/equity-grant-campaign/detail', { params: { id } })
      this.current = res.data
      if (!this.current) {
        ElMessage.error('发放计划不存在')
        this.$router.replace('/customization/hsbc/equity-grant-campaign')
      }
    },
    equityLabel(productId) {
      const m = this.equityOptions.find(i => i.productId === productId)
      return m ? `${m.equityName} (${m.productId})` : productId
    },
    crowdLabel(crowdId) {
      const m = this.crowdOptions.find(i => i.id === crowdId)
      return m ? `${m.name} (${m.id})` : crowdId
    },
    goBack() {
      this.$router.push('/customization/hsbc/equity-grant-campaign')
    }
  }
}
</script>

<style scoped>
.equity-grant-campaign-view { padding: 0; }
.header { display: flex; align-items: center; justify-content: center; }
.title { font-size: 16px; font-weight: 600; color: #409EFF; }
.footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}
.sms-info-row { display: flex; align-items: center; gap: 8px; }
.sms-tpl-name { color: #303133; }
.sms-template-preview {
  margin-top: 8px;
  padding: 10px 12px;
  background: #f5f7fa;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
  word-break: break-all;
}
</style>
