<template>
  <!-- 产品信息：名称 / SKU / 国家 / 价格 / 4 列快捷信息 -->
  <view class="info-wrap">
    <!-- 产品名称 18px Bold #1A1A1A -->
    <text class="name">{{ info.name }}</text>

    <!-- SKU + 国家 同行 12px #979797，值黑色 -->
    <view class="meta-row">
      <view class="meta-item">
        <text class="meta-label">SKU: </text>
        <text class="meta-value">{{ info.sku }}</text>
      </view>
      <view class="meta-item">
        <text class="meta-label">国家: </text>
        <text class="meta-value">{{ info.country }}</text>
      </view>
    </view>

    <!-- 价格：￥ 和 .00 为 10px，整数 24px，全部红色 -->
    <view class="price-row">
      <text class="price-symbol">{{ info.price.symbol }}</text>
      <text class="price-integer">{{ info.price.integer }}</text>
      <text class="price-decimal">{{ info.price.decimal }}</text>
    </view>

    <!-- 分隔线 0.5px #F0F0F0 -->
    <view class="divider"></view>

    <!-- 4 列快捷信息：label 10px 灰，value 13px 黑 居中 -->
    <view class="quick-info">
      <view class="quick-col" v-for="(item, index) in info.quickInfo" :key="index">
        <text class="quick-label">{{ item.label }}</text>
        <text class="quick-value">{{ item.value }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProductInfo',
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style scoped>
.info-wrap {
  padding: 20rpx 20rpx 24rpx; /* 10px 10px 12px */
  background: #ffffff;
}

/* 产品名称 */
.name {
  display: block;
  font-size: 35rpx; /* 18px */
  font-weight: 700;
  color: #1a1a1a;
  line-height: 50rpx; /* 26px */
}

/* SKU / 国家 同行 */
.meta-row {
  display: flex;
  margin-top: 10rpx;
}
.meta-item {
  display: flex;
  align-items: center;
}
.meta-item + .meta-item {
  margin-left: 20rpx;
}
.meta-label {
  font-size: 23rpx; /* 12px */
  color: #979797;
  line-height: 33rpx;
}
.meta-value {
  font-size: 23rpx;
  color: #000000;
  line-height: 33rpx;
}

/* 价格 */
.price-row {
  display: flex;
  align-items: baseline;
  margin-top: 16rpx;
}
.price-symbol,
.price-decimal {
  font-size: 19rpx; /* 10px */
  color: #ff0000;
  font-weight: 700;
}
.price-integer {
  font-size: 46rpx; /* 24px */
  color: #ff0000;
  font-weight: 700;
  line-height: 1;
}

/* 分隔线 */
.divider {
  height: 1rpx; /* 0.5px */
  background: #f0f0f0;
  margin-top: 26rpx; /* 13px 间隙 */
}

/* 4 列快捷信息 */
.quick-info {
  display: flex;
  margin-top: 20rpx; /* 10px */
}
.quick-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}
.quick-label {
  font-size: 19rpx; /* 10px */
  color: #979797;
  line-height: 27rpx;
}
.quick-value {
  font-size: 25rpx; /* 13px */
  color: #000000;
  line-height: 33rpx;
}
</style>
