<template>
  <div class="view-equity-product">
    <el-card>
      <template #header>
        <div class="header-title">
          <span>查看权益</span>
        </div>
      </template>

      <!-- 步骤条 -->
      <el-steps :active="activeStep" simple style="margin-bottom: 20px;">
        <el-step title="填写权益信息">
          <template #icon><el-icon><InfoFilled /></el-icon></template>
        </el-step>
        <el-step title="设置规则">
          <template #icon><el-icon><Setting /></el-icon></template>
        </el-step>
        <el-step title="更多设置">
          <template #icon><el-icon><Monitor /></el-icon></template>
        </el-step>
      </el-steps>

      <!-- 步骤内容 -->
      <div v-show="activeStep === 0">
        <!-- 基本信息 -->
        <el-card shadow="never" class="section-card">
          <template #header>
            <div class="section-title">基本信息</div>
          </template>
          <el-form :model="form" label-width="120px" label-position="left">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="是否权益平台兑换" label-width="150px">
                  <el-radio-group v-model="form.isPlatformExchange" disabled>
                    <el-radio label="是"></el-radio>
                    <el-radio label="否"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="form.isPlatformExchange === '是'">
                <el-form-item label="商品类型">
                  <el-radio-group v-model="form.productType" disabled>
                    <el-radio label="券码"></el-radio>
                    <el-radio label="微信立减金"></el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="form.isPlatformExchange === '是' && form.productType === '微信立减金'">
                <el-form-item label="选择权益">
                  <el-input :value="form.rongshuProduct" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="form.isPlatformExchange === '是' && form.productType === '微信立减金' && form.rongshuSkuNo">
                <el-form-item label="SKU编号">
                  <el-input :value="form.rongshuSkuNo" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="form.isPlatformExchange === '是' && form.productType === '券码'">
                <el-form-item label="商户名称">
                  <el-input :value="form.merchantName" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8" v-if="form.isPlatformExchange === '否'">
                <el-form-item label="外部权益链接">
                  <el-select v-model="form.externalLink" placeholder="请选择外部权益链接" disabled>
                    <el-option label="太古地产" value="太古地产"></el-option>
                    <el-option label="龙腾" value="龙腾"></el-option>
                    <el-option label="h5链接" value="h5链接"></el-option>
                    <el-option label="小程序链接" value="小程序链接"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="form.isPlatformExchange === '否' && form.externalLink === 'h5链接'" :gutter="20">
                <el-form-item label="h5链接">
                  <el-input v-model="form.customLink" placeholder="请输入h5链接" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" v-if="form.isPlatformExchange === '否'">
                <el-form-item label-width="140px">
                  <template #label>
                    <span style="white-space: nowrap;">是否有详情页<el-tooltip content="没有详情页时直接从首页/列表页/组装页直接跳转" placement="top"><el-icon class="tip-icon"><QuestionFilled /></el-icon></el-tooltip></span>
                  </template>
                  <el-radio-group v-model="form.externalJumpMethod" disabled>
                    <el-radio-button label="没有"></el-radio-button>
                    <el-radio-button label="有"></el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" v-if="form.isPlatformExchange === '否' && form.externalLink === '小程序链接'">
              <el-col :span="8">
                <el-form-item label="小程序appid">
                  <el-input v-model="form.miniAppId" readonly></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="小程序页面地址" label-width="140px">
                  <el-input v-model="form.miniAppPath" readonly></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <template v-if="form.isPlatformExchange === '是'">
              <el-row :gutter="20" v-if="form.productType === '微信立减金'">
                <el-col :span="8">
                  <el-form-item label="库存数">
                    <el-input :value="form.stockCount" readonly></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="权益名称">
                    <el-input v-model="form.equityName" readonly></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item>
                    <template #label>
                      <span>权益图标
                        <el-tooltip content="展示在权益首页和权益列表页" placement="top">
                          <el-icon class="tip-icon"><QuestionFilled /></el-icon>
                        </el-tooltip>
                      </span>
                    </template>
                    <div v-if="form.listIcon && form.listIcon.length" class="image-preview">
                      <img :src="form.listIcon[0]" class="preview-img" />
                    </div>
                    <span v-else class="no-data">暂无图片</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>

            <template v-else-if="form.isPlatformExchange === '否'">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="权益名称">
                    <el-input v-model="form.equityName" readonly></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" v-if="form.externalJumpMethod === '没有'">
                <el-col :span="8">
                  <el-form-item>
                    <template #label>
                      <span>权益图标
                        <el-tooltip content="展示在权益首页和权益列表页" placement="top">
                          <el-icon class="tip-icon"><QuestionFilled /></el-icon>
                        </el-tooltip>
                      </span>
                    </template>
                    <div v-if="form.listIcon && form.listIcon.length" class="image-preview">
                      <img :src="form.listIcon[0]" class="preview-img" />
                    </div>
                    <span v-else class="no-data">暂无图片</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="form.externalJumpMethod === '有'" :gutter="20">
                <el-col :span="8">
                  <el-form-item>
                    <template #label>
                      <span>权益图标
                        <el-tooltip content="展示在权益首页和权益列表页" placement="top">
                          <el-icon class="tip-icon"><QuestionFilled /></el-icon>
                        </el-tooltip>
                      </span>
                    </template>
                    <div v-if="form.listIcon && form.listIcon.length" class="image-preview">
                      <img :src="form.listIcon[0]" class="preview-img" />
                    </div>
                    <span v-else class="no-data">暂无图片</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>

          </el-form>
        </el-card>

        <!-- 详情信息 -->
        <el-card v-if="shouldShowDetailCard" shadow="never" class="section-card">
          <template #header>
            <div class="section-title">详情信息</div>
          </template>
          <el-form :model="form" label-width="120px" label-position="left">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="权益主图">
                  <div v-if="form.mainImage && form.mainImage.length" class="image-preview">
                    <img :src="form.mainImage[0]" class="preview-img" />
                  </div>
                  <span v-else class="no-data">暂无图片</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="权益介绍">
                  <el-input
                    v-model="form.introduction"
                    type="textarea"
                    :rows="4"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="领取有效期">
                  <el-input
                    :value="form.claimStartTime && form.claimEndTime ? `${form.claimStartTime} 至 ${form.claimEndTime}` : '-'"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="使用有效期">
                  <el-input
                    :value="validityDisplay"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="权益内容">
                  <div class="rich-text-view" v-html="form.overview || '暂无内容'"></div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="权益说明">
                  <div class="rich-text-view" v-html="form.details || '暂无内容'"></div>
                </el-form-item>
              </el-col>
            </el-row>
            <template v-if="form.isPlatformExchange === '是'">
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="下单成功短信">
                    <el-switch v-model="form.smsEnabled" disabled></el-switch>
                    <template v-if="form.smsEnabled">
                      <div style="max-width: 600px;background: #f1f2f5;padding: 20px;margin-top: 10px;flex-basis: 100%;">
                        <el-select
                          v-model="form.smsTemplateId"
                          placeholder="请选择短信模板"
                          style="width: 100%"
                          disabled
                        >
                          <el-option
                            v-for="item in smsTemplateOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                        <div v-if="form.smsTemplate" class="sms-template-preview">{{ form.smsTemplate }}</div>
                      </div>
                    </template>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20" v-if="form.productType === '券码'">
                <el-col :span="8">
                  <el-form-item label="领取成功按钮">
                    <el-input :value="form.successButtonText" readonly></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </el-form>
        </el-card>

      </div>

      <div v-show="activeStep === 1">
        <!-- 设置规则 -->
        <el-card shadow="never" class="section-card">
          <template #header>
            <div class="section-title">设置规则</div>
          </template>

          <!-- 展示规则 -->
          <div class="rule-section">
            <h4>展示规则</h4>
            <el-form :model="form" label-width="120px" label-position="left">
              <el-form-item label="展示时间限制">
                <el-switch v-model="form.showTimeEnabled" disabled></el-switch>
                <template v-if="form.showTimeEnabled">
                  <div style="display: flex;max-width: 600px;background: #f1f2f5;padding: 20px;margin-top: 10px;flex-basis: 100%;">
                    <el-input :value="form.showStartTime" readonly style="width: 100%"></el-input>
                    <div style="width: 50px;text-align: center;">-</div>
                    <el-input :value="form.showEndTime" readonly style="width: 100%"></el-input>
                  </div>
                </template>
              </el-form-item>
              <el-form-item label="展示客群限制">
                <el-switch v-model="form.showGroupEnabled" disabled></el-switch>
                <template v-if="form.showGroupEnabled">
                  <div style="display: flex;max-width: 600px;background: #f1f2f5;padding: 20px;margin-top: 10px;flex-basis: 100%;">
                    <el-input :value="showGroupLabels" readonly></el-input>
                  </div>
                </template>
              </el-form-item>
            </el-form>
          </div>

          <!-- 领取规则 -->
          <div class="rule-section">
            <h4>领取规则</h4>
            <el-form :model="form" label-width="120px" label-position="left">
              <el-form-item label="领取客群限制">
                <el-switch v-model="form.claimGroupEnabled" disabled></el-switch>
                <template v-if="form.claimGroupEnabled">
                  <div style="max-width: 600px;background: #f1f2f5;padding: 20px;margin-top: 10px;flex-basis: 100%;">
                    <el-alert
                      title="需在【发放计划】中选择权益发放，未发放的权益移动端不展示"
                      type="info"
                      :closable="false"
                      show-icon
                      style="margin-bottom: 12px;"
                    ></el-alert>
                    <div style="font-size: 14px;color: #606266;margin-bottom: 8px;font-weight: 500;">不满足提示</div>
                    <el-form-item label="提示内容" label-width="80px" style="margin-bottom: 12px;">
                      <el-input :value="form.claimDenyMessage" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="跳转按钮文案" label-width="100px" style="margin-bottom: 12px;">
                      <el-input :value="form.claimDenyButtonText" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="跳转按钮链接" label-width="100px" style="margin-bottom: 0;">
                      <el-input :value="form.claimDenyButtonLink" readonly></el-input>
                    </el-form-item>
                  </div>
                </template>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </div>

      <div v-show="activeStep === 2">
        <!-- 显示页面 -->
        <el-card shadow="never" class="section-card">
          <template #header>
            <div class="section-title">显示页面</div>
          </template>
          <el-form :model="form" label-width="120px" label-position="left">
            <el-form-item label="权益首页">
              <el-radio-group v-model="form.showOnHome" disabled>
                <el-radio label="显示">显示</el-radio>
                <el-radio label="不显示">不显示</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="组装页">
              <el-radio-group v-model="form.showOnAssembly" disabled>
                <el-radio label="显示">显示</el-radio>
                <el-radio label="不显示">不显示</el-radio>
              </el-radio-group>
              <div
                v-if="form.showOnAssembly === '显示'"
                style="max-width: 600px;background: #f1f2f5;padding: 20px;margin-top: 10px;flex-basis: 100%;"
              >
                <el-input :value="form.assemblyPages.join('，')" readonly></el-input>
              </div>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 分享设置 -->
        <el-card shadow="never" class="section-card">
          <template #header>
            <div class="section-title">分享设置</div>
          </template>
          <el-form :model="form" label-width="120px" label-position="left">
            <el-form-item label="是否支持分享">
              <el-switch v-model="form.shareEnabled" disabled></el-switch>
              <template v-if="form.shareEnabled">
                <div style="max-width: 600px;background: #f1f2f5;padding: 20px;margin-top: 10px;flex-basis: 100%;">
                  <el-form-item label="分享名称" label-width="100px" style="margin-bottom: 16px;">
                    <el-input :value="form.shareName" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="分享图片" label-width="100px" style="margin-bottom: 0;">
                    <div v-if="form.shareImage && form.shareImage.length" class="image-preview">
                      <img :src="(form.shareImage[0] && form.shareImage[0].url) || ''" class="preview-img" />
                    </div>
                    <span v-else class="no-data">暂无图片</span>
                  </el-form-item>
                </div>
              </template>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!-- 操作日志 -->
      <el-card shadow="never" class="section-card operation-log-card">
        <template #header>
          <div class="section-title">操作日志</div>
        </template>
        <el-table :data="operationLogs" border style="width: 100%" empty-text="暂无操作日志">
          <el-table-column prop="operator" label="操作人" width="160"></el-table-column>
          <el-table-column prop="operateTime" label="操作日期" width="200"></el-table-column>
          <el-table-column prop="action" label="操作">
            <template #default="scope">
              <el-tag :type="actionTagType(scope.row.action)" size="small">{{ scope.row.action }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 操作栏 -->
      <div class="action-bar">
        <div class="action-left">
          <el-button
            v-if="activeStep > 0"
            @click="prevStep"
          >
            <el-icon><ArrowLeft /></el-icon>上一步
          </el-button>
        </div>
        <div class="action-center">
          <template v-if="activeStep === 2">
            <el-button @click="goBack">返回</el-button>
            <el-button
              v-if="canRequestOffshelf"
              type="danger"
              plain
              @click="handleOffshelf"
            >下架</el-button>
          </template>
        </div>
        <div class="action-right">
          <el-button
            v-if="activeStep < 2"
            type="primary"
            @click="nextStep"
          >下一步<el-icon class="el-icon--right"><ArrowRight /></el-icon></el-button>
        </div>
      </div>
    </el-card>

  </div>
</template>

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

export default {
  name: 'ViewEquityProduct',
  data() {
    return {
      activeStep: 0,
      currentShelfStatus: '',
      currentAuditStatus: '',
      smsTemplateOptions: [
        { id: 'SMS_TPL_001', name: '通用权益支付成功模板', content: '【银行】您购买的${productName}已支付成功，卡号：${exchangeNum}，卡密：${exchangePwd}，有效期至${expireDate}，详情：${qrCodeDownPaths}' },
        { id: 'SMS_TPL_002', name: '券码类短信模板', content: '【银行】尊敬的客户，您的${productName}购买成功，券码为${exchangeNum}，请于${expireDate}前使用。' },
        { id: 'SMS_TPL_003', name: '实物类短信模板', content: '【银行】您购买的${productName}已受理，我们将尽快安排发货，感谢您的支持。' }
      ],
      form: {
        isPlatformExchange: '是',
        source: '银行自有',
        rongshuProduct: '',
        rongshuSkuNo: '',
        productType: '券码',
        faceValueThreshold: null,
        faceValueDiscount: null,
        stockCount: null,
        shareEnabled: false,
        shareImage: [],
        shareName: '',
        externalJumpMethod: '没有',
        externalLink: '太古地产',
        customLink: '',
        miniAppId: '',
        miniAppPath: '',
        skuNo: '',
        equityName: '',
        productId: '',
        merchantName: '',
        subTitle: '',
        listIcon: [],
        mainImage: [],
        introduction: '',
        validityType: 'fixed',
        validityText: '',
        overview: '',
        details: '',
        smsEnabled: false,
        smsTemplateId: '',
        smsTemplate: '',
        successButtonText: '',
        showTimeEnabled: false,
        showStartTime: '',
        showEndTime: '',
        showGroupEnabled: false,
        showGroupTagIds: [],
        claimTimeEnabled: false,
        claimStartTime: '',
        claimEndTime: '',
        claimGroupEnabled: false,
        claimGroupIsPotential: false,
        claimGroupTagId: '',
        claimDenyMessage: '很抱歉，您暂不符合领取条件。',
        claimDenyButtonText: '返回',
        claimDenyButtonLink: '权益首页',
        showOnHome: '显示',
        showOnAssembly: '不显示',
        assemblyPages: []
      },
      operationLogs: []
    }
  },
  computed: {
    validityDisplay() {
      if (this.form.validityType === 'relative') {
        return `领取后${this.form.validityDays || '-'}天`
      }
      if (Array.isArray(this.form.validityRange) && this.form.validityRange.length === 2) {
        return `${this.form.validityRange[0]} 至 ${this.form.validityRange[1]}`
      }
      return this.form.validityText || '-'
    },
    showGroupLabels() {
      const ids = this.form.showGroupTagIds || []
      return ids.map(id => {
        const m = crowdTaskStore.list.find(i => i.id === id)
        return m ? `${m.name} (${m.id})` : id
      }).join('、')
    },
    mappedSource() {
      if (this.form.isPlatformExchange === '否') return '第三方'
      if (this.form.productType === '微信立减金') return '荣数商品'
      return '银行自有'
    },
    shouldShowDetailCard() {
      if (this.form.isPlatformExchange === '是') return true
      if (this.form.isPlatformExchange === '否' && this.form.externalJumpMethod === '有') return true
      return false
    },
    canRequestOffshelf() {
      return this.currentShelfStatus === '已上架' && this.currentAuditStatus === '审核通过'
    }
  },
  created() {
    this.loadData()
    this.loadStatus()
  },
  methods: {
    loadData() {
      const id = this.$route.params.id
      // TODO: 根据 id 从接口获取数据，这里用 mock 数据示例
      const mockMap = {
        'Q100001': {
          source: '银行自有',
          isPlatformExchange: '是',
          productType: '券码',
          externalJumpMethod: '',
          externalLink: '',
          customLink: '',
        miniAppId: '',
        miniAppPath: '',
          skuNo: 'SKU001',
          equityName: '权益A',
          subTitle: '副标题示例',
          listIcon: [],
          mainImage: [],
          overview: '<p>权益内容内容</p>',
          details: '<p>权益说明内容</p>',
          smsEnabled: true,
          smsTemplateId: 'SMS_TPL_001',
          smsTemplate: '【银行】您购买的${productName}已支付成功，卡号：${exchangeNum}，卡密：${exchangePwd}，有效期至${expireDate}，详情：${qrCodeDownPaths}',
          successButtonText: '马上去使用',
          showTimeEnabled: true,
          showStartTime: '2026-01-01 00:00:00',
          showEndTime: '2026-12-31 23:59:59',
          showGroupEnabled: false,
          showGroupTagIds: [],
          claimTimeEnabled: true,
          claimStartTime: '2026-01-01 00:00:00',
          claimEndTime: '2026-12-31 23:59:59',
          claimGroupEnabled: false,
          claimGroupTagId: '',
          claimDenyMessage: '很抱歉，您暂不符合领取条件。',
          claimDenyButtonText: '返回',
          claimDenyButtonLink: '权益首页'
        },
        'Q100002': {
          source: '第三方',
          isPlatformExchange: '否',
          productType: '',
          externalJumpMethod: '没有',
          externalLink: '太古地产',
          customLink: '',
        miniAppId: '',
        miniAppPath: '',
          skuNo: 'SKU002',
          equityName: '权益B',
          subTitle: '外部列表页副标题',
          listIcon: [],
          mainImage: [],
          overview: '',
          details: '',
          smsEnabled: false,
          smsTemplateId: '',
          smsTemplate: '',
          successButtonText: '',
          showTimeEnabled: false,
          showStartTime: '',
          showEndTime: '',
          showGroupEnabled: true,
          showGroupTagIds: ['00000120251224'],
          claimTimeEnabled: true,
          claimStartTime: '2026-02-01 00:00:00',
          claimEndTime: '2026-11-30 23:59:59',
          claimGroupEnabled: true,
          claimGroupIsPotential: false,
          claimGroupTagId: '客群奖励活动A',
          claimDenyMessage: '很抱歉，您暂不符合领取条件。',
          claimDenyButtonText: '返回',
          claimDenyButtonLink: '权益首页'
        },
        'Q100003': {
          source: '第三方',
          isPlatformExchange: '否',
          productType: '',
          externalJumpMethod: '有',
          externalLink: '龙腾',
          customLink: '',
        miniAppId: '',
        miniAppPath: '',
          skuNo: 'SKU003',
          equityName: '权益C',
          subTitle: '外部详情页副标题',
          listIcon: [],
          mainImage: [],
          overview: '<p>外部详情页权益内容</p>',
          details: '<p>外部详情页权益说明</p>',
          smsEnabled: false,
          smsTemplateId: '',
          smsTemplate: '',
          successButtonText: '',
          showTimeEnabled: false,
          showStartTime: '',
          showEndTime: '',
          showGroupEnabled: false,
          showGroupTagIds: [],
          claimTimeEnabled: false,
          claimStartTime: '',
          claimEndTime: '',
          claimGroupEnabled: false,
          claimGroupTagId: '',
          claimDenyMessage: '很抱歉，您暂不符合领取条件。',
          claimDenyButtonText: '返回',
          claimDenyButtonLink: '权益首页'
        },
        'Q100004': {
          source: '第三方',
          isPlatformExchange: '否',
          productType: '',
          externalJumpMethod: '有',
          externalLink: 'h5链接',
          customLink: 'https://example.com/custom',
          skuNo: 'SKU004',
          equityName: '权益D',
          subTitle: '外部自定义链接副标题',
          listIcon: [],
          mainImage: [],
          overview: '<p>自定义链接权益内容</p>',
          details: '<p>自定义链接权益说明</p>',
          smsEnabled: false,
          smsTemplateId: '',
          smsTemplate: '',
          successButtonText: '',
          showTimeEnabled: false,
          showStartTime: '',
          showEndTime: '',
          showGroupEnabled: false,
          showGroupTagIds: [],
          claimTimeEnabled: false,
          claimStartTime: '',
          claimEndTime: '',
          claimGroupEnabled: false,
          claimGroupTagId: '',
          claimDenyMessage: '很抱歉，您暂不符合领取条件。',
          claimDenyButtonText: '返回',
          claimDenyButtonLink: '权益首页'
        },
        'Q100007': {
          source: '荣数商品',
          isPlatformExchange: '是',
          productType: '微信立减金',
          externalJumpMethod: '',
          externalLink: '',
          customLink: '',
          miniAppId: '',
          miniAppPath: '',
          skuNo: 'V0000003900000801',
          rongshuProduct: '微信立减金 5元（满10减5）',
          rongshuSkuNo: 'V0000003900000801',
          equityName: '微信立减金 5元（满10减5）',
          merchantName: '微信支付',
          stockCount: 2000,
          subTitle: '',
          listIcon: [],
          mainImage: [{ name: 'wx-5.png', url: 'https://placehold.co/200x200/07c160/ffffff?text=%C2%A55' }],
          overview: '<p>微信立减金权益内容</p>',
          details: '<p>微信立减金权益说明</p>',
          introduction: '满10减5',
          smsEnabled: true,
          smsTemplateId: 'SMS_TPL_002',
          smsTemplate: '【银行】尊敬的客户，您的${productName}购买成功，券码为${exchangeNum}，请于${expireDate}前使用。',
          successButtonText: '',
          validityType: 'fixed',
          validityText: '',
          showTimeEnabled: false,
          showStartTime: '',
          showEndTime: '',
          showGroupEnabled: false,
          showGroupTagIds: [],
          claimTimeEnabled: false,
          claimStartTime: '',
          claimEndTime: '',
          claimGroupEnabled: false,
          claimGroupTagId: '',
          claimDenyMessage: '很抱歉，您暂不符合领取条件。',
          claimDenyButtonText: '返回',
          claimDenyButtonLink: '权益首页'
        }
      }
      if (id && mockMap[id]) {
        Object.assign(this.form, mockMap[id])
      } else if (id) {
        Object.assign(this.form, mockMap['Q100001'])
      }
      // 根据接口返回的 source 推算 isPlatformExchange 和 productType
      if (!this.form.isPlatformExchange) {
        if (this.form.source === '第三方') this.form.isPlatformExchange = '否'
        else this.form.isPlatformExchange = '是'
      }
      if (this.form.isPlatformExchange === '是' && !this.form.productType) {
        this.form.productType = this.form.source === '荣数商品' ? '微信立减金' : '券码'
      }
      if (this.form.isPlatformExchange === '否') {
        this.form.productType = ''
      }

      const logsMap = {
        'Q100001': [
          { operator: '张三', operateTime: '2026-01-10 09:32:15', action: '创建' },
          { operator: '李四', operateTime: '2026-01-10 14:08:42', action: '审核' },
          { operator: '赵六', operateTime: '2026-03-01 16:45:30', action: '下架' }
        ],
        'Q100002': [
          { operator: '张三', operateTime: '2026-01-12 10:15:00', action: '创建' },
          { operator: '李四', operateTime: '2026-01-12 15:22:18', action: '审核' }
        ],
        'Q100003': [
          { operator: '钱七', operateTime: '2026-01-15 11:03:27', action: '创建' },
          { operator: '李四', operateTime: '2026-01-15 17:30:09', action: '审核' }
        ],
        'Q100004': [
          { operator: '钱七', operateTime: '2026-02-01 09:48:12', action: '创建' },
          { operator: '李四', operateTime: '2026-02-01 14:11:36', action: '审核' },
          { operator: '赵六', operateTime: '2026-04-05 18:22:47', action: '下架' }
        ],
        'Q100007': [
          { operator: '张三', operateTime: '2026-05-20 10:00:00', action: '创建' },
          { operator: '李四', operateTime: '2026-05-22 15:30:00', action: '审核' }
        ]
      }
      this.operationLogs = (id && logsMap[id]) ? logsMap[id] : (id ? logsMap['Q100001'] : [])
    },
    actionTagType(action) {
      const map = {
        '创建': 'success',
        '审核': 'primary',
        '下架': 'danger'
      }
      return map[action] || 'info'
    },
    loadStatus() {
      const id = this.$route.params.id
      if (!id) return
      request.get(`/api/equity/detail?id=${id}`).then(res => {
        if (res.data) {
          this.currentShelfStatus = res.data.shelfStatus || ''
          this.currentAuditStatus = res.data.auditStatus || ''
          if (res.data.equityName) this.form.equityName = res.data.equityName
        }
      }).catch(() => {})
    },
    handleOffshelf() {
      ElMessageBox.confirm(`确定提交"${this.form.equityName}"的下架审核吗？审核通过后才会下架。`, '提示', {
        confirmButtonText: '提交',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.post('/api/equity/request-offshelf', {
          productId: this.$route.params.id
        }).then(() => {
          ElMessage.success('已提交下架审核')
          this.$router.push('/customization/hsbc/equity-products')
        }).catch(() => {})
      }).catch(() => {})
    },
    nextStep() {
      if (this.activeStep < 2) {
        this.activeStep++
      }
    },
    prevStep() {
      if (this.activeStep > 0) {
        this.activeStep--
      }
    },
    goBack() {
      this.$router.push('/customization/hsbc/equity-products')
    }
  }
}
</script>

<style scoped>
.view-equity-product {
  padding: 20px;
}
.tip-icon {
  color: #909399;
  cursor: pointer;
  font-size: 14px;
}
.header-title {
  font-size: 18px;
  font-weight: 500;
}
.section-card {
  margin-bottom: 16px;
  border: none;
}
.operation-log-card {
  margin-top: 8px;
}
.section-card >>> .el-card__header {
  padding: 12px 20px;
  background: #fafafa;
  border-bottom: 1px solid #ebeef5;
}
.section-card >>> .el-form-item__content {
  display: block;
}
.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}
.rule-section {
  margin-bottom: 24px;
}
.rule-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: #606266;
  margin-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 8px;
}
.action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}
.action-left, .action-right {
  width: 120px;
}
.action-center {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.image-preview {
  width: 80px;
  height: 80px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow: hidden;
}
.preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-data {
  color: #c0c4cc;
  font-size: 13px;
}
.rich-text-view {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 8px 12px;
  min-height: 80px;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
}
.sms-template-preview {
  margin-top: 12px;
  padding: 12px;
  background: #fff;
  border: 1px dashed #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}
</style>
