<template>
  <div class="audit-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-button label="是"></el-radio-button>
                    <el-radio-button label="否"></el-radio-button>
                  </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-button label="券码"></el-radio-button>
                    <el-radio-button label="微信立减金"></el-radio-button>
                  </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 === '券码'">
                <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">
                <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="(form.showGroupTagIds || []).join('、')" 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>

      <!-- 步骤导航 -->
      <div class="step-navigation">
        <el-button
          v-if="activeStep > 0"
          @click="prevStep"
        ><el-icon><ArrowLeft /></el-icon>上一步</el-button>
        <el-button
          v-if="activeStep < 2"
          type="primary"
          @click="nextStep"
          style="margin-left: auto;"
        ><el-icon><ArrowRight /></el-icon>下一步</el-button>
      </div>

      <div class="action-footer">
        <el-button @click="goBack">返回</el-button>
        <template v-if="activeStep === 2">
          <el-button type="danger" @click="handleReject">审核拒绝</el-button>
          <el-button type="primary" @click="handleApprove">审核通过</el-button>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'AuditEquityProduct',
  data() {
    return {
      activeStep: 0,
      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: '',
        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: []
      }
    }
  },
  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 || '-'
    },
    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
    }
  },
  created() {
    this.loadData()
  },
  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: ['客群A'],
          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: true,
          showStartTime: '2026-03-01 00:00:00',
          showEndTime: '2026-10-31 23:59:59',
          showGroupEnabled: false,
          showGroupTagIds: [],
          claimTimeEnabled: false,
          claimStartTime: '',
          claimEndTime: '',
          claimGroupEnabled: false,
          claimGroupTagId: '',
          claimDenyMessage: '很抱歉，您暂不符合领取条件。',
          claimDenyButtonText: '返回',
          claimDenyButtonLink: '权益首页'
        },
        'Q100004': {
          source: '第三方',
          isPlatformExchange: '否',
          productType: '',
          externalJumpMethod: '有',
          externalLink: 'h5链接',
          customLink: 'https://custom-link.com',
          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: '权益首页'
        }
      }
      if (mockMap[id]) {
        const merged = { ...mockMap[id] }
        // 根据接口返回的 source 推算 isPlatformExchange 和 productType
        if (!merged.isPlatformExchange) {
          if (merged.source === '第三方') merged.isPlatformExchange = '否'
          else merged.isPlatformExchange = '是'
        }
        if (merged.isPlatformExchange === '是' && !merged.productType) {
          merged.productType = merged.source === '荣数商品' ? '微信立减金' : '券码'
        }
        if (merged.isPlatformExchange === '否') {
          merged.productType = ''
        }
        this.form = { ...this.form, ...merged }
      }
    },
    goBack() {
      this.$router.go(-1)
    },
    handleReject() {
      ElMessageBox.confirm('确定要审核拒绝吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ElMessage.success('审核拒绝成功')
        this.$router.push('/customization/hsbc/equity-products')
      }).catch(() => {
        ElMessage.info('已取消审核拒绝')
      })
    },
    nextStep() {
      if (this.activeStep < 2) {
        this.activeStep++
      }
    },
    prevStep() {
      if (this.activeStep > 0) {
        this.activeStep--
      }
    },
    handleApprove() {
      ElMessageBox.confirm('确定要审核通过吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        ElMessage.success('审核通过成功')
        this.$router.push('/customization/hsbc/equity-products')
      }).catch(() => {
        ElMessage.info('已取消审核通过')
      })
    }
  }
}
</script>

<style scoped>
.audit-equity-product {
  padding: 20px;
}
.tip-icon {
  color: #909399;
  cursor: pointer;
  font-size: 14px;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
}

.section-card {
  margin-top: 20px;
}
.section-card >>> .el-form-item__content {
  display: block;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
}

.image-preview {
  display: inline-block;
}

.preview-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 1px solid #ddd;
}

.no-data {
  color: #999;
  font-style: italic;
}

.rich-text-view {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  min-height: 100px;
  background-color: #f9f9f9;
}

.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;
}

.step-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.action-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.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>