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

    <div class="custom-main-w detail-content">
      <!-- 左侧内容区 -->
      <div class="left-section">
        <div class="product-info">
          <!-- 商品基本信息 -->
          <div class="line-item">
            <div class="lable">
              <img
                  class="product-icon"
                  :src="productData.coverImage"
                  alt="API服务"
              />
            </div>
            <div class="value product-meta">
              <div class="product-title-row">
                <h1 class="product-title">
                  {{ productData.name || "应用详情" }}
                </h1>
<!--                <el-tag size="small" type="warning" effect="dark"-->
<!--                >官方自营</el-tag>-->
              </div>
              <p class="product-desc">{{ productData.description }}</p>
              <div class="product-tags">
                <el-tag effect="plain" v-if="productData.categoryName">{{
                    productData.categoryName
                  }}</el-tag>
              </div>
              <div class="vendor-card">
                <div class="vendor-left">
                  <el-icon class="vendor-icon"><OfficeBuilding /></el-icon>
                  <span class="vendor-label">API供应商</span>
                  <span class="vendor-name">{{ productData.vendor || '—' }}</span>
                </div>
                <div class="vendor-right" v-if="productData.vendorContact">
                  <el-icon class="vendor-icon"><Phone /></el-icon>
                  <span class="vendor-label">联系方式</span>
                  <el-link class="vendor-contact-link" :underline="false" @click="handleContactClick(productData.vendorContact)">
                    {{ productData.vendorContact }}
                  </el-link>
                  <el-button link class="copy-btn" @click="copyContact(productData.vendorContact)">
                    复制
                  </el-button>
                </div>
              </div>
              <div class="main-price-card">
                <div class="price-left">
                  <div class="main-amount">￥{{ currentPrice }}</div>
                  <div class="main-currency">{{ currentTimes }}</div>
                </div>
                <div class="main-period">{{ currentValidDays }}</div>
              </div>

            </div>
          </div>
          <!-- 价格主卡片 -->

          <!-- 资源包规格区块 -->
          <div class="line-item">
            <div class="lable">资源包规格：</div>
            <div class="spec-list value">
              <div
                  v-for="(spec, idx) in specs"
                  :key="spec.id"
                  class="spec-card"
                  :class="{ active: selectedSpec === idx, annual: spec.annual }"
                  @click="selectSpec(idx)"
              >
                <el-tag v-if="spec.annual" type="danger" class="spec-tag">
                  包年套餐</el-tag
                >
                <div class="spec-info">
                  <div class="spec-name">{{ spec.name }}</div>
                  <div class="spec-price">￥{{ spec.price }}</div>
                  <div class="spec-count">{{ spec.count }}</div>
                </div>
                <div class="spec-desc">约{{ spec.unitPrice }}元/次</div>
              </div>
            </div>
          </div>
          <!-- 数量选择器 -->
          <!-- <div class="line-item">
            <div class="lable">数量：</div>
            <el-button
              size="small"
              @click="decreaseQty"
              :disabled="quantity <= 1"
              >-</el-button
            >
            <span class="qty">{{ quantity }}</span>
            <el-button size="small" @click="increaseQty">+</el-button>
          </div> -->
          <!-- 操作按钮 -->
          <div class="line-item action-btns">
            <div class="lable"></div>
            <el-button type="primary" size="large" @click="goOrderConfirm"
            >立即购买</el-button
            >
            <!-- <el-button size="large" plain>在线测试</el-button> -->
          </div>
        </div>

        <!-- 详情Tab区块 -->
        <div class="detail-tabs">
          <el-tabs v-model="mainTab" class="main-tabs">
            <el-tab-pane label="应用说明" name="detail"></el-tab-pane>
            <el-tab-pane label="接口文档" name="doc"></el-tab-pane>
          </el-tabs>

          <div class="tab-content-area">
            <!-- 应用说明 tab -->
            <div v-if="mainTab === 'detail'" class="main-content" v-html="currentHtml"></div>

            <!-- 接口文档 tab -->
            <div v-else-if="mainTab === 'doc'" class="main-content">
              <!-- 接口 + 行业应用卡片 -->
              <div class="api-endpoints">
                <h2 class="section-title">接口列表</h2>
                <div
                    v-for="endpoint in productData.apiEndPoints"
                    :key="endpoint.id"
                    class="endpoint-card"
                >
                  <div class="endpoint-header">
                    <span class="endpoint-name">{{ endpoint.name }}</span>
                    <el-tag size="small" type="info">{{ endpoint.method }}</el-tag>
                    <span class="endpoint-path">{{ endpoint.path }}</span>
                  </div>
                  <!-- 行业应用 -->
                  <div v-if="endpoint.industryApplications?.length" class="applications">
                    <span class="label">行业应用：</span>
                    <el-tag
                        v-for="app in endpoint.industryApplications"
                        :key="app.id"
                        size="small"
                        type="success"
                        effect="light"
                        class="application-item"
                        @click="goToIndustryApplication(app.id)"
                    >
                      {{ app.title }}
                    </el-tag>
                  </div>

                </div>
              </div>

              <!-- 接口文档 HTML -->
              <div class="doc-content" v-html="productData.doc"></div>
            </div>
          </div>
        </div>

      </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">{{ productData.name }}</div>
            </div>
            <div class="info-item  flex-align-center flex-space-between">
              <div class="label">资源包名称</div>
              <div class="value">{{ currentPackageName }}</div>
            </div>
            <div class="info-item  flex-align-center flex-space-between">
              <div class="label">资源包次数</div>
              <div class="value">{{ currentTimes }}</div>
            </div>
            <div class="info-item  flex-align-center flex-space-between">
              <div class="label">有效期</div>
              <div class="value">{{ orderValidDays }}</div>
            </div>
            <div class="info-item flex-align-center flex-space-between">
              <div class="label">apiId</div>
              <div class="value">{{ productData.id }}</div>
            </div>
            <div class="info-item  flex-align-center flex-space-between">
              <div class="label">资源包Id</div>
              <div class="value">{{ currentPackageId }}</div>
            </div>

          </div>

          <div class="info-block">

            <div class="info-item flex-align-center flex-space-between">
              <div class="label">购买数量（个）</div>
              <div class="value">{{ form.num }}</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">￥{{ currentPrice}}</div>
              </div>
              <el-button type="primary" @click="create" :disabled="!checkbox">
                立即购买
              </el-button>
            </div>
          </div>
        </template>
      </el-drawer>
      <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>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  //getMerchantInfo,
  getAppRecommendList,
  //getAppCategoryList,
  getAppInfoDetail, createApiOrderSubmit,createPay, createApiOrderSubmitWpgj, getWpgjOrder
} from "../../api/marketplace";
import {ElMessage, ElMessageBox} from "element-plus";
import { OfficeBuilding, Phone } from '@element-plus/icons-vue'
import QRCode from "qrcode";
import {PayOrderStatusEnum} from "@/utils/constants.js";
import request from "@/utils/request.js";

const router = useRouter();
const route = useRoute();

const baseUrl = import.meta.env?.VITE_APP_BASE_API || "";
const withBaseUrl = (p) => {
  if (!p) return "";
  if (/^https?:\/\//.test(p)) return p;
  return `${baseUrl}${p}`;
};

const showDrawer = ref(false)
const form = ref({
  num: 1
})
const checkbox = ref(false)
const protocol = ref(false)
const interval = ref(undefined)



// 分类
const categoryList = ref([]);
const categoryName = computed(() => {
  const id = productData.value.categoryId;
  const m = categoryList.value.find(
      (c) => c.categoryId === id || c.id === id
  );
  console.log(id);
  console.log(categoryList);
  return m ? m.categoryName || m.name : "";
});

const specs = ref([]);
const selectedSpec = ref(0);
const selectSpec = (idx) => {
  selectedSpec.value = idx;
};


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 productData = ref({
  createTime: "",
  remark: null,
  id: undefined,
  categoryId: undefined,
  categoryName: "",
  vendor: undefined,
  vendorContact: undefined,
  name: "",
  description: "",
  coverImage: "",
  datail: "",
  doc: "",
  apiPackages: [],
});

// 获取详情
const detailAbort = ref(null)

const fetchDetail = async () => {
  const id = route.query.id || route.params?.id;
  if (!id) return;
  try {
    // 取消上一次未完成的请求，避免离开页面后回调运行
    if (detailAbort.value) {
      try { detailAbort.value.abort() } catch (e) {}
    }
    detailAbort.value = new AbortController()
    const res = await getAppInfoDetail({ id }, { signal: detailAbort.value.signal });
    const d = res?.data;
    if (!d) return;
    productData.value = { ...productData.value, ...d };

    specs.value = Array.isArray(d.apiPackages)
        ? d.apiPackages.map((p) => ({
          id: p.id,
          name: p.name,
          price: p.price/100,
          times: `${p.times}次`,
          validDays: p.validDays,
          unitPrice: p.price && p.times ? (p.price/100 / p.times).toFixed(4) : "-",
        }))
        : [];

    selectedSpec.value = specs.value.length ? 0 : -1;
  } catch (e) {
    // 静默捕获，避免控制台未捕获或噪声
  }
  //fetchRelatedApis();
};

//获取分类列表
const fetchCategories = async () => {
  const res = await getAppCategoryList({});
  categoryList.value = Array.isArray(res?.data) ? res.data : [];
};

// 商家信息
// const merchantInfo = ref({ image: "", phone: "", merchant: "", email: "" });
// const fetchDetailMerchant = async () => {
//   const res = await getMerchantInfo({});
//   const d = res?.data || {};
//   merchantInfo.value = {
//     image: d.image,
//     phone: d.phone || "",
//     merchant: d.merchant || "",
//     email: d.email || "",
//   };
// };

// 相关API
const relatedApis = ref([]);
const fetchRelatedApis = async () => {
  if (!productData.value.categoryId) return;
  try {
    const res = await getAppRecommendList({
      categoryId: productData.value.categoryId,
    });
    const list = Array.isArray(res?.data) ? res.data : [];
    relatedApis.value = list.map((item) => ({
      id: item.appId,
      name: item.appName,
      description: item.appIntro,
      image: withBaseUrl(item.appImage),
    }));
  } catch (e) {
  }
};

onMounted(() => {
  fetchDetail();
  //fetchDetailMerchant();
  //fetchCategories();
});

onUnmounted(() => {
  // 防止离开页面后仍在轮询导致未捕获异常
  try { clearQueryInterval() } catch (e) {}
  try { detailAbort.value && detailAbort.value.abort() } catch (e) {}
})

// 监听路由变化
watch(
    () => route.query.id,
    (newId) => {
      if (newId) {
        fetchDetail();
      }
    }
);



const currentPackageName = computed(() => {
  const s = specs.value[selectedSpec.value];
  return s ? s.name : "-";
});

const currentPackageId = computed(() => {
  const s = specs.value[selectedSpec.value];
  return s ? s.id : "-";
});
const currentTimes = computed(() => {
  const s = specs.value[selectedSpec.value];
  return s ? s.times : "-";
});
const currentPrice = computed(() => {
  const s = specs.value[selectedSpec.value];
  return s ? s.price : "-";
});
const currentValidDays = computed(() => {
  const s = specs.value[selectedSpec.value];
  return s && s.validDays
      ? `（自购买起有限期为${s.validDays}天）`
      : "";
});

const orderValidDays = computed(() => {
  const s = specs.value[selectedSpec.value];
  return s && s.validDays
      ? `${s.validDays}天`
      : "";
});

// mainTab 切换
const mainTab = ref("detail");
const currentHtml = computed(() => {
  if (mainTab.value === "detail") return productData.value.detail;
  if (mainTab.value === "doc") return productData.value.doc;
  return "";
});


// 联系方式点击与复制
function isUrl(v) {
  return /^https?:\/\//i.test(v)
}
function isEmail(v) {
  return /^[\w.+-]+@[\w.-]+\.[A-Za-z]{2,}$/i.test(v)
}
function isPhone(v) {
  return /^\+?[\d\s-]{6,}$/.test(v)
}
function handleContactClick(v) {
  const c = (v || '').trim()
  if (!c) return
  if (isUrl(c)) {
    window.open(c, '_blank')
    return
  }
  if (isEmail(c)) {
    window.location.href = `mailto:${c}`
    return
  }
  if (isPhone(c)) {
    const tel = c.replace(/\s+/g, '')
    window.location.href = `tel:${tel}`
    return
  }
  copyContact(c)
  ElMessage.success('已复制联系方式')
}
async function copyContact(text) {
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('已复制')
  } catch (e) {
    const ta = document.createElement('textarea')
    ta.value = text
    document.body.appendChild(ta)
    ta.select()
    document.execCommand('copy')
    document.body.removeChild(ta)
    ElMessage.success('已复制')
  }
}

async function handleCheckProtocol() {
  console.log('点击')
  protocol.value = true
}

// 去订单确认页// 详情页 goOrderConfirm
const goOrderConfirm = () => {
  showDrawer.value = true
  // router.push({
  //   name: "OrderConfirm",
  //   query: {
  //     id: productData.value.id,
  //     name: productData.value.name,
  //     price: currentPrice.value,
  //     validDays: specs.value[selectedSpec.value]?.validDays,
  //     times: specs.value[selectedSpec.value]?.times,
  //     quantity: quantity.value,
  //   },
  // });
};
function getCreateData(){

}

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

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

  // === 老的支付流程代码（注释掉以便回退） ===
  /*
  //创建订单
  createApiOrderSubmit(
      {
        apiId: productData.value.id,
        packageId:currentPackageId.value,
      }).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(
                '订单已创建，请前往控制台-api订单查看',
                '提示',
                {
                  confirmButtonText: '确认',
                  showCancelButton: false,
                  type: 'success'
                }
            ).then(() => {
              showDrawer.value = false;
            })
          });
    }
  }).catch(err => {
    // 接口调用失败的处理（如提示错误）
  });
  */
}




// === 新的WPGJ支付函数 ===
function getCodeWpgj(value, wpgjOrderId) {
  QRCode.toDataURL(value, {errorCorrectionLevel: 'L', margin: 2, width: 350}, (err, url) => {
        if (err) throw err
        qrCode.value = {
          url: url,
          title: '请使用微信或支付宝扫码支付',
          visible: true
        }
      }
  )
  createQueryIntervalWpgj(wpgjOrderId)
}

// === 老的支付函数（注释掉以便回退） ===
/*
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 createQueryIntervalWpgj = (id) => {
  if (interval.value) {
    return
  }
  interval.value = setInterval(async () => {
    try {
      const res = await getWpgjOrder(id)
      console.log(res, 'API WPGJ轮询结果')
      // 已支付
      if (res.data.orderStatus === '1') {
        clearQueryInterval()
        ElMessageBox.confirm(
            '支付成功',
            '请前往控制台-api订单查看',
            {
              confirmButtonText: '确认',
              showCancelButton: false,
              type: 'success'
            }
        ).then(() => {})
      }
      // 已取消或失败
      if (res.data.orderStatus === '2') {
        clearQueryInterval()
        ElMessage.error('支付已关闭！')
      }
    } catch (e) {
      // 静默捕获轮询异常
    }
  }, 1000 * 2)
}

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

// === 老的支付订单查询（注释掉以便回退） ===
/*
// 查询详情支付订单
const getOrder = async (id, sync) => {
  return await request({
    url: '/pay/order/get',
    method: 'get',
    params: {
      id,
      sync
    }
  })
}
*/

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

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


function handleSolution(id) {
  router.push(`/industryApplications/detail?id=${id}`)
}


// 暴露 goOrderConfirm 到模板
defineExpose({ goOrderConfirm });
</script>


<style scoped lang="scss">

.detail-content {
  display: block; // 或者直接删掉
}


.left-section {
  flex: none;          // 不要自适应拉伸
  width: 100%;
  max-width: 1300px;    // 你可以改成 800 / 1000 / 1200px
  margin: 0 auto;      // 居中
}


.product-info {
  background: #fff;
  padding: 40px 50px;
}

.right-section {
  display: none;
  width: 400px;
}

.line-item {
  display: flex;
  align-items: start;
  margin-bottom: 35px;
}

.lable {
  font-size: 16px;
  color: #666;
  width: 150px;
  margin-right: 40px;
  text-align: right;
}
.value {
  flex: 1;
}

.product-icon {
  width: 100px;
  height: auto;
  max-height: 100px;
  background: #fff;
  border-radius: 12px;
  padding: 2px;
  border: 1px solid #e4e7ed;
  object-fit: cover;
}

.product-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-title {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
}
.product-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;   /* 最多两行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  white-space: normal;
  color: #666;
  font-size: 14px;
  line-height: 24px;
}


.product-tags {
  display: flex;
  margin: 0 0 20px;
  gap: 10px;
  .el-tag {
    height: 26px;
  }
}

.vendor-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  border: 1px solid #e9eef5;
  background: #f8fbff;
  border-radius: 10px;
  padding: 12px 16px;
  margin: 10px 0 16px;

  .vendor-left,
  .vendor-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .vendor-icon {
    color: var(--el-color-primary);
  }
  .vendor-label {
    color: #666;
  }
  .vendor-name {
    font-weight: 600;
    color: #303233;
  }
  .vendor-contact-link {
    color: var(--el-color-primary);
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .copy-btn {
    margin-left: 4px;
  }
  @media (max-width: 768px) {
    .vendor-left,
    .vendor-right {
      width: 100%;
      justify-content: flex-start;
    }
  }
}

.main-price-card {
  display: flex;
  align-items: baseline;
  gap: 16px;
  background: #fef6f6; // 淡粉色背景，突出价格
  border-radius: 8px;
  padding: 14px 24px;
  font-weight: bold;

  .price-left {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
  }

  .main-amount {
    font-size: 32px;
    color: #ff3b30; // 主色（红）
  }

  .main-currency {
    font-size: 14px;
    color: #999; // 灰色
    margin-top: 4px;
  }

  .main-period {
    font-size: 14px;
    color: #666;
    font-weight: normal;
  }
}


.spec-list {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.spec-card {
  border: 1px solid #e4e7ed;
  border-radius: 9px;
  border: 1px solid rgba(230, 230, 230, 1);
  min-width: 160px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  z-index: 1;
  .spec-name {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
    font-weight: bold;
  }
  .spec-price {
    font-size: 24px;
    color: rgba(255, 85, 82, 1);
    font-weight: bold;
    margin-bottom: 2px;
  }
  .spec-info {
    color: #666;
    padding: 30px 20px;
  }
  .spec-count {
    font-size: 14px;
    color: #333;
    margin-bottom: 2px;
  }
  .spec-desc {
    font-size: 14px;
    color: #666;
    padding: 15px 0;
    background: rgba(236, 237, 245, 1);
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  .spec-tag {
    position: absolute;
    top: 1px;
    z-index: 2;
    right: 0px;
  }
}

.spec-card.active {
  border-color: var(--el-color-primary);
  .spec-desc {
    color: #fff;
    background: var(--el-color-primary);
  }
  // background: #ecf5ff;
  // box-shadow: 0 2px 8px #256dff22;
}

.spec-card.annual {
  // border-color: #f56c6c;
}

.qty {
  display: inline-block;
  min-width: 32px;
  text-align: center;
  font-size: 16px;
}

.merchant-info,
.related-apis {
  background: #fff;
  padding: 40px;
  margin-bottom: 32px;
  .title {
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: bold;
  }
}

.preview-image {
  height: auto;
  background: #fff;
  overflow: hidden;
  max-width: 45%;
  max-height: 100px;
  object-fit: contain;
  margin: 0 auto;
}

.info-list {
  border-top: 1px dashed #eee;
  padding: 30px 10px 40px;
  margin-top: 30px;
  list-style: none;
}

.info-list li {
  margin-bottom: 10px;
  display: flex;
  color: #666;
  font-size: 18px;
}

.info-list .label {
  width: 60px;
}

.api-item {
  display: flex;
  margin-bottom: 15px;
}
.api-icon {
  width: 64px;
  height: auto;
  max-height: 64px;
  // padding: 20px;
  border: 1px solid #eee;
  object-fit: contain;
  // object-fit: cover;
}
.api-info {
  margin: 0 0 0 24px;
}
.api-title,
.api-desc {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: 30px;
  line-height: 30px;
}
.api-title {
  font-size: 18px;
  margin-bottom: 5px;
}
.api-desc {
  color: #666;
}

/* 详情Tab区块样式 */
.detail-tabs {
  margin-top: 32px;
  background: #fff;
  box-shadow: 0 2px 12px #e6f0fa;
}
.detail-tabs {
  :deep(.el-tabs__nav) {
    width: 100%;
    padding-left: 20px;
  }
  :deep(.el-tabs__item) {
    font-size: 18px;
    padding: 40px 20px 40px 30px !important;
    font-weight: 400;
    justify-content: flex-start;
  }
  :deep(.el-tabs__item.is-active) {
    color: var(--el-color-primary);
    font-weight: bold;
    position: relative;
  }
}

.tab-content-area {
  display: flex;
  min-height: 500px;
  padding: 20px 40px;
}

.side-menu {
  width: 160px;
  border-right: 1px solid #f0f0f0;
  padding: 24px 0;
}
.menu-item {
  padding: 10px 24px;
  cursor: pointer;
  color: #444;
  font-size: 15px;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}
.menu-item.active {
  color: #256dff;
  font-weight: bold;
  background: #f6fbff;
  border-left: 3px solid #256dff;
}
.main-content {
  flex: 1;
  min-width: 0;
}


: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 {
    width: 100px;
    font-weight: 400;
    font-size: 14px;
    color: #626566;
  }

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

    display: flex;       // 使用 flex
    justify-content: center; // 水平居中
    align-items: center;     // 垂直居中
  }
}

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


.api-endpoints {
  margin-bottom: 20px;

  .section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #333;
  }

  .endpoint-card {
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    background: #fafafa;

    .endpoint-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;

      .endpoint-name {
        font-weight: bold;
        font-size: 15px;
        color: #333;
      }

      .endpoint-path {
        color: #666;
        font-size: 14px;
      }
    }

    .applications {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    .application-item {
      cursor: pointer; /* 鼠标变成手型 */
      transition: all 0.3s; /* 平滑过渡 */
    }

    /* 鼠标悬停变色 */
    .application-item:hover {
      background-color: #67c23a !important; /* 可以自定义颜色 */
      color: white !important;
      border-color: #67c23a !important;
    }
  }
}

.doc-content {
  margin-top: 20px;
}


.app-container {
  padding-top: 90px;
}

</style>
