<template>
  <div class="app-container computing-resource">

    <div class="top-banner-list flex-justify-center">
      <div class="banner-item flex-align-center">
        <img src="@/assets/images/superior-performance.png" alt="">
        <div>
          <h3>性能优越</h3>
          <p>
            提供多种产品配置
            <br>
            满足个性化需求</p>
        </div>
      </div>

      <div class="banner-item flex-align-center">
        <img src="@/assets/images/intelligent-computing.png" alt="">
        <div>
          <h3>智能计算</h3>
          <p>
            提供多种产品配置
            <br>
            满足个性化需求</p>
        </div>
      </div>

      <div class="banner-item flex-align-center">
        <img src="@/assets/images/innovative-design.png" alt="">
        <div>
          <h3>创新设计</h3>
          <p>
            提供多种产品配置
            <br>
            满足个性化需求</p>
        </div>
      </div>
    </div>

    <div class="info-content">
      <div class="switch-display" @click="showVersion = (showVersion === 1 ? 2 : 1)">
        <svg-icon v-show="showVersion === 2" color="#2E77E3" icon-class="list-1"/>
        <svg-icon v-show="showVersion === 1" color="#2E77E3" icon-class="table"/>
      </div>
      <el-tabs v-model="tabActive" @tab-change="tabChange">
        <el-tab-pane label="大模型词元（Token）服务" :name="999">
          <!-- 标签筛选 -->
          <div v-if="allTags.length > 0" class="tag-filter">
            <span class="tag-filter-label">标签筛选：</span>
            <el-checkbox-group v-model="selectedTags" size="small">
              <el-checkbox
                  v-for="tag in allTags"
                  :key="tag"
                  :label="tag"
                  border
              >{{ tag }}</el-checkbox>
            </el-checkbox-group>
            <el-button v-if="selectedTags.length > 0" link type="primary" size="small" @click="selectedTags = []">
              清空筛选
            </el-button>
          </div>
          <div v-if="showVersion === 1" class="version-1" style="padding-bottom: 90px;">
            <el-table v-if="filteredModels.length !== 0" :data="filteredModels" :max-height="490" style="width: 100%">
              <el-table-column prop="modelName" label="模型名" width="190px"/>
              <el-table-column label="收费方式">
                <template #default="{ row }">
                  {{ billingTagText(row) }}
                </template>
              </el-table-column>
              <el-table-column label="标签">
                <template #default="{ row }">
                  <el-text 
                    class="mx-1"
                    v-for="(tag, index) in modelTags(row)"
                    :key="tag"
                    :type="tagColors[index % tagColors.length]"
                   >{{tag}}</el-text>
                </template>
              </el-table-column>
              <el-table-column label="描述">
                <template #default="{ row }">
                  <el-text truncated>
                    {{ row.description }}
                  </el-text>
                </template>
              </el-table-column>
              <el-table-column label="输入价格">
                <template #default="{ row }">
                  <div v-if="Number(row?.quotaType) === 1">-</div>
                  <div v-else-if="row?.billingMode === 'tiered_expr' && row?.tiers && row.tiers.length > 0">
                    <b>¥{{ formatPrice(row.tiers[0].inputRatio) }} / 1M</b>
                  </div>
                  <div v-else>
                    <b>¥{{ formatPrice(row.inputPrice) }} / 1M</b>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="输出价格">
                <template #default="{ row }">
                  <div v-if="Number(row?.quotaType) === 1">-</div>
                  <div v-else-if="row?.billingMode === 'tiered_expr' && row?.tiers && row.tiers.length > 0">
                    <b>¥{{ formatPrice(row.tiers[0].outputRatio) }} / 1M</b>
                  </div>
                  <div v-else>
                    <b>¥{{ formatPrice(row.outputPrice) }} / 1M</b>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="单次价格">
                <template #default="{ row }">
                  <div v-if="Number(row?.quotaType) === 1">
                    <b>¥{{ formatPrice(row.inputPrice) }}</b>
                  </div>
                  <div v-else>-</div>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="{row}">
                  <el-button type="primary" class="action-button" @click="openModelDetail(row)">详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-empty v-if="filteredModels.length === 0" description="暂无模型"/>
          </div>
          <div v-else class="model-list">
            <model-card v-for="m in filteredModels" :key="m.modelName" :model="m" @click="openModelDetail(m)" />
          </div>
        </el-tab-pane>
        <el-tab-pane
            v-for="productType in productTypes"
            :key="productType.id"
            :label="productType.name"
            :name="productType.id">
          <div v-if="showVersion === 1" class="version-1">
            <el-table v-if="tableData.length !== 0" :data="tableData" :max-height="490" style="width: 100%">
              <el-table-column prop="name" label="型号" width="190px" sortable/>
              <el-table-column prop="cpu" label="CPU" sortable/>
              <el-table-column prop="gpu" label="GPU" sortable/>
              <el-table-column prop="ram" label="内存" sortable/>
              <el-table-column prop="storage" label="存储" sortable/>
              <el-table-column prop="location" label="所在地" sortable/>
              <!-- 新增的价格列（醒目字体） -->
              <el-table-column label="价格" width="200px">
                <template #default="{ row }">
                  <span style="font-weight: 600; font-size: 16px; color: #FF9811;">
                    ￥{{ row.price ? (row.price / 100).toFixed(2) : '-' }}
                  </span>
                                <span style="margin-left: 4px; font-size: 14px; color: #606266;">
                    /{{ row.feeInfo }}
                  </span>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="204px">
                <template #default="{row}">
                  <!--                  <el-button class="action-button" @click="selectedProduct(1,row.id)">加入购物车</el-button>-->
                  <el-button type="primary" class="action-button" @click="selectedProduct(2,row.id)">立即购买
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-empty v-if="tableData.length === 0" description="暂无资源"/>
          </div>
          <!--卡片形式-->
          <div v-if="showVersion === 2" class="version-2">
            <el-row :gutter="24" v-if="tableData.length !== 0">
              <el-col v-for="(item,index) in tableData" :key="index" :span="6">
                <div class="product-card">
                  <div class="top-info">
                    <div class="title">{{ item.name }}</div>
                    <!--                    <div class="title">{{ item.term }}</div>-->
                    <div class="tag">
                      <!--<el-tag type="warning" effect="dark">性价比</el-tag>-->
                      <!--<el-tag type="info" effect="plain">专家推荐</el-tag>-->
                    </div>
                    <div class="desc">{{ item.remark }}</div>
                  </div>
                  <div class="bottom-info">
                    <el-row>
                      <el-col>
                        <div class="parameter-item">
                          <div class="label">CPU</div>
                          <div class="value">{{ item.cpu || '-' }}</div>
                        </div>
                      </el-col>
                      <el-col>
                        <div class="parameter-item">
                          <div class="label">GPU</div>
                          <div class="value">{{ item.gpu || '-' }}</div>
                        </div>
                      </el-col>
                      <el-col>
                        <div class="parameter-item">
                          <div class="label">内存</div>
                          <div class="value">{{ item.ram || '-' }}</div>
                        </div>
                      </el-col>
                      <el-col>
                        <div class="parameter-item">
                          <div class="label">存储</div>
                          <div class="value">{{ item.storage || '-' }}</div>
                        </div>
                      </el-col>
                      <el-col>
                        <div class="parameter-item">
                          <div class="label">所在地</div>
                          <div class="value">{{ item.location || '-' }}</div>
                        </div>
                      </el-col>

                    </el-row>
                    <el-divider></el-divider>
                    <div class="flex-justify-end price">
                      ￥{{ item.price ? (item.price / 100).toFixed(2) : '-' }}/{{ item.feeInfo }}
                    </div>
                    <!--<div class="flex-justify-end month-expenses">约￥15/月</div>-->
                    <el-divider></el-divider>
                    <div class="footer-action flex">
                      <!--                      <el-button class="action-button" @click="selectedProduct(1,item.id)">加入购物车</el-button>-->
                      <el-button type="primary" class="action-button" @click="selectedProduct(2,item.id)">立即购买
                      </el-button>
                    </div>
                  </div>

                </div>
              </el-col>
            </el-row>
            <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="pageNo"
                v-model:limit="pageSize"
                @pagination="getList"/>
            <el-empty v-if="tableData.length === 0" description="暂无资源"/>
          </div>

        </el-tab-pane>
      </el-tabs>
    </div>

    <el-drawer v-model="showDrawer" class="drawer" direction="rtl" :size="694" title="订单详情">
      <template #default>
        <div class="info-block">
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">类别</div>
            <div class="value">{{ productDetail.name }}</div>
          </div>

          <div class="info-item  flex-align-center flex-space-between">
            <div class="label">型号</div>
            <div class="value">{{ productDetail.name }}</div>
          </div>

        </div>

        <div class="info-block">
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">CPU</div>
            <div class="value">{{ productDetail.cpu || '-' }}</div>
          </div>
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">GPU</div>
            <div class="value">{{ productDetail.gpu || '-' }}</div>
          </div>
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">内存</div>
            <div class="value">{{ productDetail.ram || '-' }}</div>
          </div>
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">存储</div>
            <div class="value">{{ productDetail.storage || '-' }}</div>
          </div>
          <!-- 服务器IP已隐藏 -->
          <!-- <div class="info-item flex-align-center flex-space-between">
            <div class="label">服务器IP</div>
            <div class="value">{{ productDetail.ip || '-' }}</div>
          </div> -->
          <div class="info-item flex-align-center flex-space-between">
            <div class="label">服务器所在地</div>
            <div class="value">{{ productDetail.location || '-' }}</div>
          </div>
        </div>

        <div class="info-block">

          <div class="info-item flex-align-center flex-space-between">
            <div class="label">使用数量（个）</div>
            <div class="value">
              <el-input-number v-model="form.num" :min="0" @change="orderComputerPrice" style="width: 110px" disabled/>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="checkbox-info">
          <el-checkbox v-model="checkbox" :value="true" size="large">
            <template #default>
              我已阅读和理解上述
            </template>
          </el-checkbox>
          <span class="link" @click="handleCheckProtocol">《购买协议》</span>
        </div>
        <el-divider style="margin: 0 !important;"/>
        <div class="drawer-footer flex-space-between flex-align-center">
          <div>应付配置费用</div>

          <div class="flex-align-center">
            <div class="mr20">
              <div class="price">￥{{ orderPrice / 100 }}</div>
            </div>
            <el-button type="primary" @click="create" :disabled="!checkbox">
              {{ selectedType === 1 ? '加入购物车' : '立即购买' }}
            </el-button>
          </div>
        </div>
      </template>
    </el-drawer>

    <!--    <div class="shopping-trolley" @click="$router.push('/computingResource/shoppingCart')">-->
    <!--      <el-icon size="24px">-->
    <!--        <ShoppingTrolley/>-->
    <!--      </el-icon>-->
    <!--      <div>购</div>-->
    <!--      <div>物</div>-->
    <!--      <div>车</div>-->
    <!--    </div>-->
    <el-dialog
        :title="qrCode.title"
        v-model="qrCode.visible"
        width="385px"
        append-to-body
        :align-center="true"
        :close-on-click-modal="false"
        @closed="clearQueryInterval"
    >
      <img :src="qrCode.url" alt=""/>
    </el-dialog>

    <el-dialog
        title="购买协议"
        v-model="protocol"
        width="800px"
        append-to-body
        :align-center="true"
        :close-on-click-modal="false"
        @closed="clearProtocol"
    >
      <div class="pdf-box">
        <!--        <div id="pdf-container" style="width: 100%; height: 100%;"></div>-->
        <iframe
            v-if="pdfUrl"
            :src="pdfUrl"
            style="width:100%; height:80vh;"
        ></iframe>
      </div>
    </el-dialog>

    <!-- 底部固定：未登录或未获取令牌时显示 -->
    <transition name="el-fade-in" v-if="tabActive === 999">
      <!-- 未获取令牌:引导用户获取 -->
      <div v-if="!hasToken" class="bottom-cta">
        <div class="cta-card">
          <div class="cta-text">
            <div class="cta-title">{{ ctaTitle }}</div>
            <div class="cta-subtitle">{{ ctaSubtitle }}</div>
          </div>
          <el-button
              type="primary"
              size="large"
              class="cta-btn"
              :loading="ctaLoading"
              @click="handleGetTokenCta"
          >{{ ctaButtonText }}</el-button>
        </div>
      </div>
      <!-- 已有令牌:提示可在个人中心查看 -->
      <div v-else class="bottom-cta">
        <div class="cta-card cta-card--info">
          <div class="cta-text">
            <div class="cta-title">已获取 API 令牌</div>
            <div class="cta-subtitle">控制台个人中心可查看令牌</div>
          </div>
          <el-button
              size="large"
              class="cta-btn"
              @click="$router.push('/console/overview')"
          >前往查看</el-button>
        </div>
      </div>
    </transition>

    <!-- 模型详情侧边栏 -->
    <el-drawer v-model="showModelDrawer" direction="rtl" :size="500" title="模型详情">
      <template #default>
        <div v-if="selectedModel" class="model-detail">
          <!-- 图标和模型名 -->
          <div class="model-detail-header">
            <div class="model-detail-icon">
              <LobeIcon
                  :name="selectedModelIcon.name"
                  :variant="selectedModelIcon.variant"
                  :size="36"
              />
            </div>
            <div class="model-detail-name">{{ selectedModel.modelName }}</div>
          </div>

          <!-- 基本信息 -->
          <div class="model-detail-section">
            <div class="section-title">基本信息</div>
            <div class="section-desc">模型的详细描述和基本特性</div>
          </div>

          <!-- 描述 -->
          <div class="model-detail-desc">
            {{ selectedModel.description || '暂无描述' }}
          </div>

          <!-- 标签 -->
          <div v-if="selectedModelTags.length > 0" class="model-detail-tags">
            <el-tag
                v-for="(tag, index) in selectedModelTags"
                :key="tag"
                size="small"
                :type="tagColors[index % tagColors.length]"
                effect="plain"
            >{{ tag }}</el-tag>
          </div>

          <!-- 价格信息 -->
          <div v-if="selectedModelBillingMode === 'tiered_expr'" class="model-detail-section">
            <div class="section-title">动态计费</div>
            <div class="section-desc">价格根据用量档位和请求条件动态调整</div>
          </div>

          <!-- 按次计费 -->
          <div v-if="selectedModelIsPerCall" class="price-item">
            <span class="price-label">单次价格</span>
            <span class="price-value">¥{{ formatModelPrice(selectedModel.inputPrice) }}</span>
          </div>

          <!-- 分档计费表格 -->
          <template v-else-if="selectedModelBillingMode === 'tiered_expr' && selectedModel.tiers">
            <div class="tier-table-wrapper">
              <div class="tier-table">
                <div class="tier-header">
                  <div class="tier-cell header-cell">
                    <div class="header-label">档位</div>
                  </div>
                  <div class="tier-cell header-cell">
                    <div class="header-label">输入</div>
                    <div class="header-unit">(¥/1M tokens)</div>
                  </div>
                  <div class="tier-cell header-cell">
                    <div class="header-label">输出</div>
                    <div class="header-unit">(¥/1M tokens)</div>
                  </div>
                  <div v-for="col in tierExtraPriceColumns" :key="col.key" class="tier-cell header-cell">
                    <div class="header-label">{{ col.label }}</div>
                    <div class="header-unit">(¥/1M tokens)</div>
                  </div>
                </div>
                <div v-for="(tier, index) in selectedModel.tiers" :key="index" class="tier-row">
                  <div class="tier-cell">
                    <div class="tier-name">{{ tier.name }}</div>
                    <div v-if="tier.conditionDesc" class="tier-condition">{{ tier.conditionDesc }}</div>
                  </div>
                  <div class="tier-cell price-cell">{{ formatModelPrice(tier.inputRatio) }}</div>
                  <div class="tier-cell price-cell">{{ formatModelPrice(tier.outputRatio) }}</div>
                  <div v-for="col in tierExtraPriceColumns" :key="col.key" class="tier-cell price-cell">
                    {{ tier[col.key] != null && tier[col.key] > 0 ? formatModelPrice(tier[col.key]) : '-' }}
                  </div>
                </div>
              </div>
            </div>
          </template>

          <!-- 条件乘数 -->
          <template v-if="selectedModelBillingMode === 'tiered_expr' && selectedModel.conditionMultipliers && selectedModel.conditionMultipliers.length > 0">
            <div class="model-detail-section">
              <div class="section-title">条件乘数</div>
              <div class="section-desc">满足条件时，整单价格乘以相应倍率</div>
            </div>
            <div class="condition-multipliers">
              <div v-for="(cm, index) in selectedModel.conditionMultipliers" :key="index" class="condition-item">
                <div class="condition-desc">{{ formatConditionDesc(cm.description) }}</div>
                <div class="condition-multiplier">{{ cm.multiplier }}x</div>
              </div>
            </div>
          </template>

          <!-- 按量计费 -->
          <template v-else-if="selectedModelBillingMode !== 'tiered_expr'">
            <div class="price-item">
              <span class="price-label">输入价格</span>
              <span class="price-value">¥{{ formatModelPrice(selectedModel.inputPrice) }} / 1M tokens</span>
            </div>
            <div class="price-item">
              <span class="price-label">输出价格</span>
              <span class="price-value">¥{{ formatModelPrice(selectedModel.outputPrice) }} / 1M tokens</span>
            </div>
            <div v-if="selectedModelCacheReadPrice > 0" class="price-item">
              <span class="price-label">缓存读取</span>
              <span class="price-value">¥{{ formatModelPrice(selectedModelCacheReadPrice) }} / 1M tokens</span>
            </div>
            <div v-if="selectedModelCacheCreatePrice > 0" class="price-item">
              <span class="price-label">缓存创建</span>
              <span class="price-value">¥{{ formatModelPrice(selectedModelCacheCreatePrice) }} / 1M tokens</span>
            </div>
            <div v-if="selectedModel.imageInputPrice > 0" class="price-item">
              <span class="price-label">图片输入价格</span>
              <span class="price-value">¥{{ formatModelPrice(selectedModel.imageInputPrice) }} / 1M tokens</span>
            </div>
            <div v-if="selectedModel.audioInputPrice > 0" class="price-item">
              <span class="price-label">音频输入价格</span>
              <span class="price-value">¥{{ formatModelPrice(selectedModel.audioInputPrice) }} / 1M tokens</span>
            </div>
            <div v-if="selectedModel.audioCompletionPrice > 0" class="price-item">
              <span class="price-label">音频补全价格</span>
              <span class="price-value">¥{{ formatModelPrice(selectedModel.audioCompletionPrice) }} / 1M tokens</span>
            </div>
          </template>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script name="ResourceList" setup>
import {ref, watch, nextTick, computed} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import SvgIcon from '@/components/SvgIcon/index.vue'
import {
  getRListByCategory,
  getRDetail,
  categoryMenuNew,
  createOrderSubmit,
  createOrderSubmitWpgj,
  createPay,
  modelsWithPricing
} from '@/api/computingResource.js'
import { getTokenInfo, getToken } from '@/api/console.js'
import useUserStore from '@/store/modules/user'
import {useRoute, useRouter} from 'vue-router'
import QRCode from 'qrcode'
import request from '@/utils/request'
import {PayOrderStatusEnum} from "@/utils/constants.js";
import PDFObject from 'pdfobject';
import axios from "axios";
import ModelCard from '@/views/console/components/model-card.vue'
import LobeIcon from '@/components/LobeIcon/index.vue'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const showVersion = ref(2)
const tabActive = ref()
const total = ref(0)
const pageNo = ref(1)
const pageSize = ref(10)

const productTypes = ref([])
const tableData = ref([])
const interval = ref(undefined)
const checkbox = ref(false)
const protocol = ref(false)
const pdfBlobUrl = ref('');
const pdfUrl = ref(import.meta.env.VITE_APP_BASE_API+'/infra/file/preview?url=https://luhu-ltx.oss-cn-shenzhen.aliyuncs.com/20250918/buy_1758208746972.pdf')

const qrCode = ref({
  url: '',
  title: '请使用微信或支付宝扫码支付',
  visible: false
})

// 模型详情侧边栏
const showModelDrawer = ref(false)
const selectedModel = ref(null)

function openModelDetail(model) {
  selectedModel.value = model
  showModelDrawer.value = true
}

const selectedModelIcon = computed(() => {
  if (selectedModel.value?.icon) {
    const [name, variant] = selectedModel.value.icon.split('.')
    return { name, variant: variant || 'Color' }
  }
  return { name: '', variant: 'Color' }
})

const selectedModelIsPerCall = computed(() => Number(selectedModel.value?.quotaType) === 1)

const selectedModelBillingMode = computed(() => {
  const mode = selectedModel.value?.billingMode || ''
  return mode
})

const selectedModelTags = computed(() => {
  if (!selectedModel.value?.tags) return []
  return selectedModel.value.tags.split(',').map(t => t.trim()).filter(t => t)
})

const selectedModelCacheReadPrice = computed(() => selectedModel.value?.cacheReadPrice || 0)
const selectedModelCacheCreatePrice = computed(() => selectedModel.value?.cacheCreatePrice || 0)

function formatModelPrice(price) {
  if (price === null || price === undefined) return '-'
  const num = Number(price)
  if (Number.isNaN(num)) return '-'
  return num.toFixed(4)
}

// 格式化条件描述
function formatConditionDesc(desc) {
  if (!desc) return ''

  let result = desc

  // 转换时间范围: (小时 ≥ 20 或 小时 < 8) -> 小时 20:00~8:00
  result = result.replace(/\(小时\s*≥\s*(\d+)\s*或\s*小时\s*<\s*(\d+)\)/g, (_, h1, h2) => {
    return `小时 ${h1}:00~${h2}:00`
  })
  result = result.replace(/\(分钟\s*≥\s*(\d+)\s*或\s*分钟\s*<\s*(\d+)\)/g, (_, m1, m2) => {
    return `分钟 ${m1}:00~${m2}:00`
  })

  // 转换星期范围: (星期 ≥ X 或 星期 < Y) -> 星期 X~Y
  result = result.replace(/\(星期\s*≥\s*(\d+)\s*或\s*星期\s*<\s*(\d+)\)/g, (_, w1, w2) => {
    return `星期 ${w1}~${w2}`
  })

  // 转换月份范围: (月份 ≥ X 或 月份 < Y) -> 月份 X~Y
  result = result.replace(/\(月份\s*≥\s*(\d+)\s*或\s*月份\s*<\s*(\d+)\)/g, (_, m1, m2) => {
    return `月份 ${m1}~${m2}`
  })

  // 转换日期范围: (日期 ≥ X 或 日期 < Y) -> 日期 X~Y
  result = result.replace(/\(日期\s*≥\s*(\d+)\s*或\s*日期\s*<\s*(\d+)\)/g, (_, d1, d2) => {
    return `日期 ${d1}~${d2}`
  })

  // 转换 ≠ nil 为 "存在"
  result = result.replace(/请求参数\s+(\w+)\s*≠\s*nil/g, '请求参数 $1 存在')
  result = result.replace(/请求头\s+(\w+)\s*≠\s*nil/g, '请求头 $1 存在')
  result = result.replace(/请求头\s+(\w+)\s*≠\s*""/g, '请求头 $1 存在')

  // 转换 ≠ "" 为 "存在"
  result = result.replace(/请求头\s+(\w+)\s*≠\s*""/g, '请求头 $1 存在')

  return result
}

// 判断分档表格需要显示哪些扩展价格列
const tierExtraPriceColumns = computed(() => {
  if (!selectedModel.value?.tiers || selectedModel.value.tiers.length === 0) {
    return []
  }
  const columns = []
  const tiers = selectedModel.value.tiers

  // 检查缓存读取 (cr)
  if (tiers.some(t => t.cacheReadRatio != null && t.cacheReadRatio > 0)) {
    columns.push({ key: 'cacheReadRatio', label: '缓存读取' })
  }
  // 检查缓存创建5分钟 (cc)
  if (tiers.some(t => t.cacheCreateRatio != null && t.cacheCreateRatio > 0)) {
    columns.push({ key: 'cacheCreateRatio', label: '缓存创建' })
  }
  // 检查1小时缓存创建 (cc1h)
  if (tiers.some(t => t.cacheCreate1hRatio != null && t.cacheCreate1hRatio > 0)) {
    columns.push({ key: 'cacheCreate1hRatio', label: '1h缓存创建' })
  }
  // 检查图片输入 (img)
  if (tiers.some(t => t.imageInputRatio != null && t.imageInputRatio > 0)) {
    columns.push({ key: 'imageInputRatio', label: '图片输入' })
  }
  // 检查图片输出 (img_o)
  if (tiers.some(t => t.imageOutputRatio != null && t.imageOutputRatio > 0)) {
    columns.push({ key: 'imageOutputRatio', label: '图片输出' })
  }
  // 检查音频输入 (ai)
  if (tiers.some(t => t.audioInputRatio != null && t.audioInputRatio > 0)) {
    columns.push({ key: 'audioInputRatio', label: '音频输入' })
  }
  // 检查音频输出 (ao)
  if (tiers.some(t => t.audioOutputRatio != null && t.audioOutputRatio > 0)) {
    columns.push({ key: 'audioOutputRatio', label: '音频输出' })
  }

  return columns
})

const tagColors = ['primary', 'success', 'warning', 'danger', '']


function getTypeData() {
  categoryMenuNew().then(res => {
    productTypes.value = res.data
    if (route.query.type) {
      tabActive.value = Number(route.query.type)
    } else {
      tabActive.value = Number(res.data[0].id)
    }
    getList()
  })
}

getTypeData()

watch(() => route.query.type, (value, oldValue) => {
  if (value) {
    tabActive.value = Number(value)
  }
})

async function handleCheckProtocol() {
  protocol.value = true
  // nextTick(() => {
  //   PDFObject.embed("https://luhu-ltx.oss-cn-shenzhen.aliyuncs.com/20250828/文字文稿1_1756349853834.pdf", "#pdf-container", {
  //     height: "100%",
  //     pdfOpenParams: {
  //       view: "FitH",  // 页面适配
  //       pagemode: "none" // 隐藏侧边栏
  //     }
  //   });
  // })
  // try {
  //   // 这里用服务器给你的 PDF 地址
  //   const res = await axios.get(pdfUrl, {
  //     responseType: "blob",
  //   });
  //   console.log(res, 'res')
  //   if (res.headers["content-type"].includes("pdf")) {
  //     pdfBlobUrl.value = URL.createObjectURL(
  //         new Blob([res.data], {type: "application/pdf"})
  //     );
  //   } else {
  //     console.error("返回的不是 PDF 文件");
  //   }
  //   // pdfBlobUrl.value = URL.createObjectURL(
  //   //     new Blob([res.data], {type: "application/pdf"})
  //   // );
  // } catch (e) {
  //   console.error("加载PDF失败", e);
  // }
}

function tabChange() {
  pageNo.value = 1
  getList()
}

function getList() {
  if(tabActive.value === 999) {
    return
  }
  getRListByCategory({categoryId: tabActive.value, pageNo: pageNo.value, pageSize: pageSize.value}).then(res => {
    total.value = res.data.total
    tableData.value = res.data.list
  })
}

const showDrawer = ref(false)
const form = ref({
  num: 1
})

const selectedType = ref()
const selectedId = ref()
const productDetail = ref({})

function selectedProduct(type, id) {
  selectedType.value = type
  selectedId.value = id
  getRDetail({id}).then(res => {
    productDetail.value = res.data
    orderPrice.value = res.data.price;
    showDrawer.value = true
  })
}

const orderPrice = ref(0)

function orderComputerPrice() {
  orderComputer(initSubmitData()).then(res => {
    orderPrice.value = res.data.totalPulicPrice
  })
}

function getCreateData() {
  return {
    skuId: selectedId.value,
  }
}

function create() {
  // 用户点击"确认"时执行
  const createData = getCreateData();

  // 创建订单（使用旺铺聚合支付）
  createOrderSubmitWpgj(createData).then(res => {
    console.log('WPGJ支付响应数据:', res.data);
    // 直接弹出确认对话框（WPGJ接口调用成功就显示）
    ElMessageBox.confirm(
        '确定购买吗？',  // 对话框提示文字
        '购买确认',       // 对话框标题
        {
          confirmButtonText: '确认',  // 确认按钮文字
          cancelButtonText: '取消',   // 取消按钮文字
          type: 'warning'             // 对话框类型（警告样式）
        }
    )
        .then(() => {
          // WPGJ聚合支付处理 - 后端现在直接返回AppPayOrderSubmitRespVO
          if (res.data.displayContent) {
            // 使用displayContent字段生成二维码，使用WPGJ订单ID进行轮询
            getCode(res.data.displayContent, res.data.id);
          } else {
            ElMessage.error('获取支付信息失败');
          }
          showDrawer.value = false;
        })
        .catch(() => {
          ElMessageBox.confirm(
              '订单已创建，请前往控制台-我的订单查看',
              '提示',
              {
                confirmButtonText: '确认',
                showCancelButton: false,
                type: 'success'
              }
          ).then(() => {
            showDrawer.value = false;
          })
        });
  }).catch(err => {
    console.error('创建订单失败:', err);
    ElMessage.error('创建订单失败，请重试');
  });

  // 原有支付方式代码（已注释）
  /*
  createOrderSubmit(createData).then(res => {
    if (res.data.payOrderId) {
      // 弹出确认对话框
      ElMessageBox.confirm(
          '确定购买吗？',  // 对话框提示文字
          '购买确认',       // 对话框标题
          {
            confirmButtonText: '确认',  // 确认按钮文字
            cancelButtonText: '取消',   // 取消按钮文字
            type: 'warning'             // 对话框类型（警告样式）
          }
      )
          .then(() => {
            createPay({id: res.data.payOrderId, channelCode: 'wx_native'}).then(i => {
              if (i.code === 0) {
                getCode(i.data.displayContent, res.data.payOrderId)
              }
            })
            // showDrawer.value = false;
          })
          .catch(() => {
            ElMessageBox.confirm(
                '订单已创建，请前往控制台-我的订单查看',
                '提示',
                {
                  confirmButtonText: '确认',
                  showCancelButton: false,
                  type: 'success'
                }
            ).then(() => {
              showDrawer.value = false;
            })
          });
    }
  }).catch(err => {
    // 接口调用失败的处理（如提示错误）
  });
  */
}

function getCode(value, payOrderId) {
  QRCode.toDataURL(value, {errorCorrectionLevel: 'L', margin: 2, width: 350}, (err, url) => {
        if (err) throw err
        qrCode.value = {
          url: url,
          title: '请使用微信、支付宝或云闪付“扫一扫”扫码支付',
          visible: true
        }
      }
  )
  createQueryInterval(payOrderId)
}

/** 轮询查询任务 - WPGJ支付 */
const createQueryInterval = (id) => {
  if (interval.value) {
    return
  }
  interval.value = setInterval(async () => {
    const res = await getWpgjOrder(id)
    console.log(res, 'WPGJ轮询结果')
    // 已支付
    if (res.data.orderStatus === '1') {
      clearQueryInterval()
      // ElMessage.success('支付成功！')
      ElMessageBox.confirm(
          '支付成功',
          '请前往控制台-我的订单查看',
          {
            confirmButtonText: '确认',
            showCancelButton: false,
            type: 'success'
          }
      ).then(() => {
      })
    }
    // 已取消或失败
    if (res.data.orderStatus === '2') {
      clearQueryInterval()
      ElMessage.error('支付已关闭！')
    }
  }, 1000 * 2)
}

/** 轮询查询任务 - 老代码（已注释） */
/*
const createQueryInterval = (id) => {
  if (interval.value) {
    return
  }
  interval.value = setInterval(async () => {
    const res = await getOrder(id)
    console.log(res, 'res')
    // 已支付
    if (res.data.status === PayOrderStatusEnum.SUCCESS.status) {
      clearQueryInterval()
      // ElMessage.success('支付成功！')
      ElMessageBox.confirm(
          '支付成功',
          '请前往控制台-我的订单查看',
          {
            confirmButtonText: '确认',
            showCancelButton: false,
            type: 'success'
          }
      ).then(() => {
      })
    }
    // 已取消
    if (res.data.status === PayOrderStatusEnum.CLOSED.status) {
      clearQueryInterval()
      ElMessage.error('支付已关闭！')
    }
  }, 1000 * 2)
}
*/

// 查询详情支付订单 - 老代码（已注释）
/*
const getOrder = async (id, sync) => {
  return await request({
    url: '/pay/order/get',
    method: 'get',
    params: {
      id,
      sync
    }
  })
}
*/

// WPGJ旺铺聚合支付订单查询
const getWpgjOrder = async (id) => {
  return await request({
    url: '/pay/order/wpgj-get',
    method: 'get',
    params: {
      id
    }
  })
}

/** 清空查询任务 */
const clearQueryInterval = () => {
  // 清空各种弹窗
  qrCode.value = {
    title: '',
    url: '请使用微信“扫一扫”扫码支付',
    visible: false
  }
  showDrawer.value = false
  // 清空任务
  clearInterval(interval.value)
  interval.value = undefined
}

const clearProtocol = () => {
  protocol.value = true
}

const models = ref([])
const selectedTags = ref([])

function getModelList() {
  modelsWithPricing().then(res => {
    models.value = res.data || []
  })
}

// 所有唯一标签
const allTags = computed(() => {
  const tagSet = new Set()
  models.value.forEach(m => {
    if (m.tags) {
      m.tags.split(',').forEach(tag => {
        const trimmed = tag.trim()
        if (trimmed) tagSet.add(trimmed)
      })
    }
  })
  return Array.from(tagSet).sort()
})

// 根据选中标签过滤后的模型列表
const filteredModels = computed(() => {
  if (selectedTags.value.length === 0) {
    return models.value
  }
  return models.value.filter(m => {
    if (!m.tags) return false
    const modelTags = m.tags.split(',').map(t => t.trim())
    return selectedTags.value.some(tag => modelTags.includes(tag))
  })
})

// 底部"获取令牌"按钮相关
const hasToken = ref(true) // 默认认为有 token，未登录时保持 true 不显示
const ctaLoading = ref(false)

const ctaTitle = computed(() =>
    userStore.token ? '尚未获取 API 令牌' : '解锁全部 AI 模型'
)
const ctaSubtitle = computed(() =>
    userStore.token ? '获取令牌后即可调用 OpenAI、DeepSeek 等数百款模型' : '登录后即可一键获取 API 令牌，立即体验'
)
const ctaButtonText = computed(() =>
    userStore.token ? '立即获取' : '登录并获取'
)

function checkTokenStatus() {
  if (!userStore.token) {
    // 未登录：显示按钮
    hasToken.value = false
    return
  }
  // 已登录：调接口查 token 状态
  getTokenInfo().then(res => {
    if (res && res.hasToken) {
      hasToken.value = true
    } else {
      hasToken.value = false
    }
  }).catch(() => {
    // 接口失败：保守显示按钮
    hasToken.value = false
  })
}

function handleGetTokenCta() {
  if (!userStore.token) {
    // 未登录：跳转到登录页，回跳到本页
    const currentPath = route.fullPath
    router.push({ path: '/login', query: { redirect: currentPath } })
    return
  }
  // 已登录：调 getToken 创建 New API 账号 + 获取 apiKey
  ctaLoading.value = true
  getToken().then(res => {
    ctaLoading.value = false
    if (res && res.success && res.apiKey) {
      ElMessage.success('令牌获取成功，正在跳转到个人中心...')
      hasToken.value = true
      router.push('/console/overview')
    } else {
      ElMessage.error(res?.message || '获取令牌失败')
    }
  }).catch(err => {
    ctaLoading.value = false
    ElMessage.error('获取令牌失败: ' + (err.message || '未知错误'))
  })
}

function formatPrice(price) {
  if (price === null || price === undefined) return '-'
  const num = Number(price)
  if (Number.isNaN(num)) return '-'
  return num.toFixed(4).replace(/\.?0+$/, '')
}

function billingTagText(model) {
  if (Number(model?.quotaType) === 1) return '按次收费'
  if (model?.billingMode === 'tiered_expr') return '动态计费'
  return '按量收费'
}

function modelTags(model) {
  if (!model?.tags) return []
  return model.tags.split(',').map(t => t.trim()).filter(t => t)
}

onMounted(() => {
  getModelList()
  checkTokenStatus()
})
</script>

<style scoped lang="scss">
.app-container {
  padding-top: 20px;
  padding-left: 0;
  padding-right: 0;
}

.top-banner-list {
  margin-top: 84px;

  .banner-item {
    width: 360px;
    height: 144px;
    background: linear-gradient(180deg, #DEEBFF 0%, rgba(222, 235, 255, 0) 100%), #FFFFFF;
    box-shadow: 0 9px 28px 8px rgba(46, 119, 227, 0.02), 0 6px 16px 0 rgba(46, 119, 227, 0.04), 0 3px 6px -4px rgba(46, 119, 227, 0.06);
    border-radius: 15px;
    border: 2px solid #FFFFFF;

    &:nth-child(2) {
      margin: 0 24px;
    }

    img {
      margin-right: 24px;
      width: 96px;
      height: 96px;
      object-fit: contain;
    }

    h3 {
      margin: 0 0 6px;
      font-weight: bold;
      font-size: 16px;
      color: #303233;
    }

    p {
      margin: 0;
      font-weight: 400;
      font-size: 14px;
      color: #626566;
      line-height: 22px;
    }
  }
}

.info-content {
  width: 1280px;
  margin: 40px auto 0 auto;
  position: relative;

  .switch-display {
    position: absolute;
    cursor: pointer;
    right: 0;
    top: 12px;
    z-index: 99;
    font-size: 24px;
  }

  .el-tabs {
    --el-border-color-light: #2E77E3;
    --el-tabs-header-height: 48px;

    :deep(.el-tabs__content) {
      overflow: visible
    }

    :deep(.el-tabs__active-bar) {
      display: none;
    }

    :deep(.el-tabs__item) {
      --el-font-size-base: 16px;
      padding-left: 24px !important;
      padding-right: 24px !important;

      &.is-active {
        color: #ffffff;
        background-color: #2E77E3;
      }
    }
  }

  .version-2 {
    height: 1000px;
    margin: 0 -12px;
    overflow-x: auto;

    .el-row {
      margin: 0 !important;
    }
  }
}

.el-table {
  font-size: 14px;

  :deep(.el-table__header-wrapper th) {
    font-size: 14px;
  }

  .action-button {
    padding-left: 8px;
    padding-right: 8px;
    height: 24px;
  }
}

.product-card {
  margin-bottom: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  //box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.08);
  box-shadow: 0 5px 10px 2px rgba(0, 0, 0, 0.08);
  border-radius: 15px;

  &:hover {
    border: 1px solid #2E77E3;
    box-sizing: border-box;
  }

  .top-info {
    padding: 18px 20px 12px 20px;
    border-radius: 15px 15px 0 0;
    background: linear-gradient(153deg, rgba(255, 175, 175, 0) 0%, #FDE7E7 100%), linear-gradient(145deg, #EDFCFF 0%, rgba(97, 227, 255, 0) 100%), #F0F6FF;

    .title {
      font-weight: bold;
      font-size: 20px;
      color: #303233;
      margin-bottom: 6px;
    }

    .tag {
      margin-bottom: 8px;

      .el-tag {
        margin-right: 5px;
      }
    }

    .desc {
      font-weight: 400;
      font-size: 14px;
      color: #949899;
    }
  }

  .bottom-info {
    padding: 12px 24px 20px 24px;

    .el-divider {
      margin: 12px 0;
    }
  }

  .el-col {
    &:nth-child(even) {
      display: flex;
      justify-content: space-between;
    }
  }

  .parameter-item:first-child {
    margin-bottom: 15px;
  }

  .label {
    font-weight: 500;
    font-size: 14px;
    color: #626566;
    margin-bottom: 2px;
  }

  .value {
    font-weight: bold;
    font-size: 16px;
    color: #303233;
  }

  .price {
    font-weight: bold;
    font-size: 24px;
    color: #FF9811;
  }

  .month-expenses {
    font-weight: 400;
    font-size: 14px;
    color: #949899;
  }

  .footer-action {
    .el-button {
      flex: 1
    }
  }
}

.shopping-trolley {
  cursor: pointer;
  color: #FFFFFF;
  position: absolute;
  right: 20px;
  bottom: 270px;
  padding: 16px 8px;
  background-color: #2E77E3;
  font-size: 16px;
  text-align: center;
}

:deep(.drawer) {
  .el-drawer__header {
    margin: 0;
    padding-bottom: 20px;
  }

  .el-drawer__title {
    font-weight: bold;
    font-size: 32px;
    color: #303233;
  }

  .el-drawer__body {
    padding-top: 12px;
    background-color: #F7F8F9;
  }
}

.info-block {
  background-color: #ffffff;
  padding: 4px 0;
  margin-bottom: 14px;
}

.info-item {
  padding: 12px 48px;

  .label {
    font-weight: 400;
    font-size: 14px;
    color: #626566;
  }

  .value {
    font-weight: bold;
    font-size: 14px;
    color: #303233;
  }
}

.drawer-footer {
  padding: 20px 48px 10px 48px;

  .price {
    font-weight: bold;
    font-size: 24px;
    color: #FF9811;

    & + div {
      font-weight: 400;
      font-size: 14px;
      color: #949899;
      text-align: right;
    }
  }

  .el-button {
    width: 180px;
    height: 46px;
    font-size: 20px;
    border-radius: 2px 2px 2px 2px;
  }
}

.checkbox-info {
  display: flex;
  align-items: center;
  background: #ffffff;
  padding-left: 48px;
  padding-bottom: 10px;

  .link {
    color: #409eff;
    cursor: pointer;
  }
}

#pdf-container {
  width: 100%; /* 设置容器宽度 */
  height: 600px; /* 设置容器高度 */
  border: 1px solid #ccc; /* 可选：添加边框 */
}

.pdf-box {
  height: 600px;
  //overflow: hidden;
  overflow-y: auto;
}

.model-list { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
  padding-bottom: 45px;
}

/* 标签筛选 */
.tag-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
  :deep(.el-checkbox-group) .el-checkbox {
    margin-right: 5px;
    margin-top: 3px;
  }
}

.tag-filter-label {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  flex-shrink: 0;
}

:deep(.el-checkbox.is-bordered) {
  margin-right: 0;
  padding: 6px 14px;
  border-radius: 4px;
}

:deep(.el-checkbox__label) {
  font-size: 13px;
}

/* 底部固定"获取令牌"卡片 */
.bottom-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  padding: 0 24px 20px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.cta-card {
  pointer-events: auto;
  width: min(720px, 100%);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 20px 16px 24px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  box-shadow:
      0 -4px 24px rgba(0, 0, 0, 0.04),
      0 12px 32px rgba(46, 119, 227, 0.12),
      0 0 0 1px rgba(46, 119, 227, 0.05);
}

// 已有令牌:信息提示样式(弱化主按钮,降低视觉权重)
.cta-card--info {
  box-shadow:
      0 -2px 12px rgba(0, 0, 0, 0.03),
      0 6px 18px rgba(46, 119, 227, 0.06),
      0 0 0 1px rgba(46, 119, 227, 0.04);

  .cta-btn {
    color: var(--el-color-primary);
    background: #f0f5ff;
    border-color: #dbe5ff;
  }

  .cta-btn:hover {
    background: #e0ebff;
  }
}

.cta-text {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.cta-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2329;
  line-height: 1.4;
  margin-bottom: 4px;
}

.cta-subtitle {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.5;
}

.cta-btn {
  flex-shrink: 0;
  height: 44px;
  min-width: 140px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2E77E3 0%, #4e8ff7 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(46, 119, 227, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(46, 119, 227, 0.38);
  }

  &:active {
    transform: translateY(0);
  }
}

/* 模型详情侧边栏 */
.model-detail {
  padding: 0 4px;
}

.model-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 16px;
  border-bottom: 1px solid #eee;
  margin-bottom: 16px;
}

.model-detail-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #f5f6f8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.model-detail-name {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  word-break: break-word;
}

.model-detail-section {
  margin-bottom: 12px;
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #303233;
  margin-bottom: 4px;
}

.section-desc {
  font-size: 13px;
  color: #949899;
}

.model-detail-desc {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin-bottom: 16px;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
}

.model-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;

  .el-tag {
    margin: 0;
  }
}

.price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }
}

.price-label {
  font-size: 14px;
  color: #606266;
}

.price-value {
  font-size: 14px;
  color: #ee5a52;
  font-weight: 600;
}

/* 分档计费表格 */
.tier-table-wrapper {
  overflow-x: auto;
  margin-bottom: 16px;
}

.tier-table {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  /* 基础列(档位,输入,输出)+扩展价格列(最多7列)，每列最小100px */
  min-width: 1000px;
}

.tier-header {
  display: flex;
  background: #f5f7fa;
  font-weight: 600;
  font-size: 13px;
  color: #606266;
}

.tier-row {
  display: flex;
  border-top: 1px solid #ebeef5;
}

.tier-cell {
  flex: 1;
  padding: 10px 12px;
  font-size: 13px;
  color: #303233;
}

.tier-cell:first-child {
  flex: 1.3;
}

.price-cell {
  text-align: center;
  color: #303233;
  font-weight: 500;
}

.tier-header .tier-cell {
  text-align: center;
  /* 表头单元格内的文字竖向排列 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 50px;
}

.header-label {
  font-weight: 600;
}

.header-unit {
  font-size: 11px;
  color: #909399;
  margin-top: 4px;
}

.tier-name {
  display: inline-block;
  padding: 2px 8px;
  background: #e6f0ff;
  color: #2e77e3;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.tier-condition {
  font-size: 11px;
  color: #909399;
  margin-top: 4px;
}

/* 条件乘数 */
.condition-multipliers {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.condition-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
}

.condition-item:last-child {
  border-bottom: none;
}

.condition-desc {
  font-size: 13px;
  color: #303233;
  flex: 1;
}

.condition-multiplier {
  font-size: 14px;
  color: #ee5a52;
  font-weight: 600;
  margin-left: 16px;
}
</style>
