<template>
  <view class="order-info">
    <view class="title">订单明细</view>
    <view class="order-content">
      <view class="form">
        <text class="label">商品金额</text>
        <text class="value">¥ {{ orderInfo.goodPrice || 0 }}</text>
      </view>
      <view class="form">
        <text class="label">运费</text>
        <text class="value">¥ {{ orderInfo.postagePrice || 0 }}</text>
      </view>
      <view class="form" v-for="(item, index) in orderInfo.preferentialItems" :key="index">
        <text class="label">{{ item.name }}</text>
        <text class="value red">- ¥ {{ item.price }}</text>
      </view>
    </view>
    <view class="total black">
      总计:
      <text class="red" style="margin-left: 20rpx">¥{{ orderInfo.totalPrice || 0 }}</text>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      orderInfo: {
        type: Object,
        default: () => ({})
      }
    }
  }
</script>

<style lang="scss" scoped>
  .order-info {
    width: 100%;
    background-color: #fff;
    .title {
      padding: 24rpx;
      font-size: 30rpx;
      color: rgb(0, 0, 0);
      text-align: left;
      border-bottom: 1px solid rgb(221, 221, 221);
    }
    .order-content {
      padding: 32rpx 24rpx 0;
      .form {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32rpx;
        .label {
          font-size: 28rpx;
          color: rgb(51, 51, 51);
        }
        .value {
          font-size: 28rpx;
          color: rgb(51, 51, 51);
        }
        .red {
          color: rgb(255, 0, 0);
        }
      }
    }
    .total {
      width: 100%;
      padding: 24rpx;
      text-align: right;
      border-top: 1px solid rgb(238, 238, 238);
      font-size: 28rpx;

      .black {
        color: rgb(51, 51, 51);
      }
      .red {
        color: rgb(255, 0, 0);
      }
    }
  }
</style>
