<template>
  <view class="order-item">
    <view class="item-title"
      >券码：{{
        item.packagePickupVo ? item.packagePickupVo.verificationCode : "--"
      }}</view
    >
    <view class="item-content">
      <view class="goods-list">
        <view
          class="goods-item u-flex-center"
          v-for="(v, index) in item.packageItems || []"
          :key="index"
        >
          <image
            class="goods-img"
            v-if="v.productCover"
            :src="v.productCover"
            mode=""
          ></image>
          <view class="goods-info">
            <view class="goods-name two-row">{{ v.productTitle }}</view>
            <view class="goods-spec">{{ v.skuSetName }}</view>
            <view class="goods-price u-flex-center-sb">
              <view class="goods-price-text">
                <text class="goods-price-symbol">￥</text>
                <text>
                  {{ v.paymentAmount || 0 }}
                </text>
              </view>
              <view class="goods-price-num"> x {{ v.number || 0 }} </view>
            </view>
          </view>
        </view>
      </view>
      <view class="item-footer" v-if="item.packagePickupVo">
        <view class="item-footer-content u-flex-center-sb">
          <view class="label">核销时间：</view>
          <view class="value">{{
            item.packagePickupVo.verificationTime || "--"
          }}</view>
        </view>
        <view class="item-footer-content u-flex-center-sb">
          <view class="label">核销员：</view>
          <view class="value">{{
            item.packagePickupVo.verifierName || "--"
          }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup name="orderItem">
import { ref, watch } from "vue";

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
});

const item = ref(props.item || {});

watch(
  () => props.item,
  (newValue) => {
    console.log(newValue);
    item.value = newValue;
  }
);
</script>

<style lang="scss" scoped>
.order-item {
  box-sizing: border-box;
  padding: 22rpx 0;
  background-color: #fff;
  border-radius: 24rpx;
  margin-bottom: 20rpx;
  .item-title {
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    font-size: 36rpx;
    font-weight: 700;
  }
  .item-content {
    padding: 0 30rpx 20rpx 30rpx;
    .goods-list {
      padding: 10rpx 0 30rpx 0;
      border-bottom: 1rpx solid #f0f0f0;
      margin-bottom: 10rpx;
      .goods-item {
        padding-top: 30rpx;
        .goods-img {
          width: 146rpx;
          height: 146rpx;
          border-radius: 14rpx;
          flex-shrink: 0;
          margin-right: 30rpx;
        }
        .goods-info {
          flex: 1;
          .goods-name {
            font-size: 28rpx;
            font-weight: 700;
          }
          .goods-spec {
            font-size: 24rpx;
            color: #666666;
            margin: 8rpx 0;
          }
          .goods-price {
            .goods-price-text {
              font-size: 34rpx;
              color: #da4f4f;
              font-weight: 700;
              .goods-price-symbol {
                font-size: 24rpx;
                font-weight: 400;
              }
            }
            .goods-price-num {
              color: #666666;
              font-size: 28rpx;
            }
          }
        }
      }
    }
    .item-footer {
      .item-footer-content {
        padding-top: 20rpx;
        .label {
          font-size: 28rpx;
          color: #999999;
          flex-shrink: 0;
          margin-right: 10rpx;
        }
        .value {
          font-size: 28rpx;
          color: #1a1a1a;
        }
      }
    }
  }
}
</style>
