<template>
  <div class="checkout-container">
    <!-- 收货人信息 -->
    <div class="section">
      <h3>收货人信息</h3>
      <div class="address-info">
        <el-input
            v-model="addressName"
            placeholder="何昕泰 广东"
            class="name-input"
        ></el-input>
        <div class="address-detail">
          <span>{{ fullAddress }}</span>
          <span class="phone">{{ phone }}</span>
        </div>
        <el-button type="text" class="modify-btn">更多地址 ></el-button>
      </div>
    </div>

    <!-- 支付方式 -->
    <div class="section">
      <h3>支付方式</h3>
      <div class="payment-methods">
        <el-button type="primary" icon="el-icon-s-goods" @click="redirectToPayment('wechat')">微信支付</el-button>
        <el-button type="primary" icon="el-icon-s-finance" @click="redirectToPayment('alipay')">支付宝支付</el-button>
      </div>
    </div>

    <!-- 送货清单 -->
    <div class="section delivery-list">
      <h3>
        送货清单
        <span class="price-info">
          <el-link type="primary">价格说明</el-link>
          <el-link type="primary">返回修改购物车</el-link>
        </span>
      </h3>

      <div class="product-info">
        <div class="merchant">商家：京东自营</div>
        <el-card class="product-card">
          <div class="product-detail">
            <img src="/placeholder.svg?height=80&width=80" class="product-image" />
            <div class="product-desc">
              <div class="product-title">
                机械革命（MECHREVO）极光X 16英寸 酷睿i7HX 16核游戏本笔记本电脑(i7-12800HX 16G
              </div>
              <div class="product-specs">
                <span>颜色：RTX4070</span>
                <span>尺寸：【强劲性能】</span>
              </div>
              <div class="support-info">
                <i class="el-icon-info"></i>
                支持7天无理由退货（激活后不支持）
              </div>
            </div>
            <div class="product-price">
              <div class="price">¥ 6999.00</div>
              <div class="quantity">x1</div>
              <div class="stock">有货</div>
            </div>
          </div>
          <div class="delivery-time">
            <i class="el-icon-time"></i>
            标准达：预计 11月1日(周五) 09:00-15:00 送达
            <el-button type="text">修改</el-button>
          </div>
          <div class="weight">总重量：4.100kg</div>
        </el-card>
      </div>
    </div>

    <!-- 发票信息 -->
    <div class="section">
      <h3>发票信息</h3>
      <div class="invoice-info">
        <i class="el-icon-document"></i>
        开企业抬头发票须填写纳税人识别号，以免影响报销
        <div class="invoice-options">
          <el-radio-group v-model="invoiceType">
            <el-radio label="electronic">电子普通发票</el-radio>
            <el-radio label="personal">个人</el-radio>
            <el-radio label="details">商品明细</el-radio>
          </el-radio-group>
          <el-button type="text">修改</el-button>
        </div>
      </div>
    </div>

    <!-- 优惠券 -->
    <div class="section">
      <h3>使用优惠/礼品卡/抵用</h3>
      <el-button type="text">
        <i class="el-icon-arrow-down"></i>
      </el-button>
    </div>

    <!-- 总价 -->
    <div class="total-section">
      <div class="total-price">
        总商品金额：<span class="price">¥6999.00</span>
      </div>
      <el-button type="danger" size="large" class="submit-btn">提交订单</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addressName: '何昕泰 广东',
      fullAddress: '广东 深圳市 龙岗区 宝龙街道 嘉华金铂产教融合实践基地5楼',
      phone: '173****4093',
      invoiceType: 'electronic'
    }
  },
  methods: {
    redirectToPayment(method) {
      // In a real application, this would redirect to the appropriate payment gateway
      console.log(`Redirecting to ${method} payment gateway`);
      this.$message({
        message: `正在跳转到${method === 'wechat' ? '微信' : '支付宝'}支付页面...`,
        type: 'success'
      });
    }
  }
}
</script>

<style scoped>
.checkout-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
}

.section {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.section h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: bold;
}

.address-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.name-input {
  width: 200px;
}

.address-detail {
  flex: 1;
  color: #666;
}

.phone {
  margin-left: 20px;
}

.payment-methods {
  margin-top: 10px;
  display: flex;
  gap: 20px;
}

.delivery-list {
  background: #f8f8f8;
}

.price-info {
  float: right;
  font-size: 14px;
  font-weight: normal;
}

.price-info .el-link {
  margin-left: 15px;
}

.product-card {
  margin-top: 15px;
}

.product-detail {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.product-desc {
  flex: 1;
}

.product-title {
  font-size: 14px;
  margin-bottom: 10px;
}

.product-specs {
  color: #666;
  font-size: 12px;
}

.product-specs span {
  margin-right: 15px;
}

.support-info {
  margin-top: 10px;
  color: #999;
  font-size: 12px;
}

.product-price {
  text-align: right;
  min-width: 150px;
}

.price {
  color: #e4393c;
  font-size: 16px;
  font-weight: bold;
}

.quantity, .stock {
  color: #666;
  margin-top: 5px;
}

.delivery-time {
  color: #666;
  font-size: 12px;
  margin: 10px 0;
}

.weight {
  color: #999;
  font-size: 12px;
}

.invoice-info {
  color: #666;
  font-size: 14px;
}

.invoice-options {
  margin-top: 10px;
}

.total-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  text-align: right;
}

.total-price {
  display: inline-block;
  margin-right: 20px;
  font-size: 16px;
}

.submit-btn {
  width: 140px;
}

.modify-btn {
  color: #999;
}
</style>