<template>
  <div class="custom-wrapper order-confirm-container">
    <div class="com-breadcrumb-1">
      <div class="custom-main-w">
        <el-breadcrumb separator=">">
        </el-breadcrumb>
      </div>
    </div>
    <div class="custom-main-w order-main">
      <h2 class="order-title">确认订单</h2>
      <div class="order-info-list">
<!--        <div class="order-info-item">-->
<!--          <span class="label">应付金额：</span><span class="amount">￥1</span>-->
<!--        </div>-->
        <div class="order-info-item">
          <span class="label">套餐金额：</span>￥{{orderInfo.price}}
        </div>
        <div class="order-info-item">
          <span class="label">有效期：</span>{{orderInfo.validDays}}
        </div>
        <div class="order-info-item">
          <span class="label">调用量：</span>{{orderInfo.times}}
        </div>
        <div class="order-info-item">
          <span class="label">购买数量：</span>{{orderInfo.quantity}}
        </div>
        <div class="order-info-item order-agreement">
          <el-checkbox v-model="checked"
            >同意并阅读《API服务购买协议》，并确保合法使用此数据。</el-checkbox
          >
        </div>
      </div>
      <div class="order-pay-btns">
        <el-button type="success">立即支付</el-button>
      </div>
      <div class="order-tips">
        <div class="tips-title">温馨提示：</div>
        <ul>
          <li>
            1、一个接口是一组接入点，每个接入点有自己的计费率；资源包过期或用完，会立即失效；
          </li>
          <li>2、可购买多个资源包，会自动递延生效联使用</li>
          <li>3、如需要更多的请求次数、更优惠的价格请与我们联系；</li>
          <li>
            4、您可以联系到我们的商务进行线下充值，确认到账后我们将会为您开通相应的数据技术服务；
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const checked = ref(false);

import { useRoute } from "vue-router";

const route = useRoute();
const orderInfo = computed(() => ({
  id: route.query.id,
  name: route.query.name,
  price: route.query.price,
  validityDays: route.query.validDays,
  times: route.query.times,
  quantity: route.query.quantity,
  amount: (route.query.price * route.query.quantity).toFixed(2),
}));

</script>
<style scoped lang="scss">
.order-confirm-container {
  min-height: 100vh;
}
.order-main {
  background: #fff;
  margin: 0 auto;
  box-shadow: 0 2px 12px #e6f0fa;
  padding: 50px 160px 100px;
}
.order-title {
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 32px;
}
.order-info-list {
  margin-bottom: 30px;
}
.order-info-item {
  font-size: 20px;
  color: #666;
  margin-bottom: 18px;
  .amount {
    color: #f56c6c;
    font-size: 22px;
    font-weight: bold;
  }
}
.order-info-item .label {
  min-width: 90px;
  font-size: 20px;
  color: #333;
  margin-right: 20px;
  display: inline-block;
}
.order-tips {
  border: 1px solid var(--el-color-primary);
  border-radius: 6px;
  background: #f6fbff;
  padding: 18px 24px;
  margin: 24px 0 35px 0;
}
.tips-title {
  color: var(--el-color-primary);
  font-weight: bold;
  margin-bottom: 8px;
}
.order-tips ul {
  font-size: 15px;
  padding-left: 18px;
}
.order-agreement {
  :deep .el-checkbox__label {
    font-size: 16px;
  }
}

.order-pay-btns {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding-top: 40px;
  border-top: 1px solid var(--el-border-color);
  :deep .el-button {
    height: 45px;
  }
}
.order-pay-btns .balance {
  color: #888;
  font-size: 20px;
  margin-left: 4px;
}
.order-pay-btns .recharge {
  color: #f56c6c;
  font-size: 20px;
  margin-left: 4px;
  cursor: pointer;
}
</style>
