<template>
  <!-- 订单商品 -->
  <view class="shop" v-for="(it, idx) in shop.goods_detail" :key="it.id">
    <view class="shopPhoto">
      <image :src="it.image" mode=""></image>
    </view>
    <view class="info">
      <view class="topBox">
        <view class="shopTitle ellipsis">{{ it.goods_name }}</view>
        <view class="desc ellipsis">{{ it.describe }}</view>
        <view class="num ellipsis" v-if="![2].includes(shop.order_status)">x{{ it.total_num }}</view>
      </view>
      <!-- 非积分商品 -->
      <view class="priceBox flexJ" v-if="it.goodstatus != 3">
        <view class="flexA">
          <text>￥{{ it.total_price }}</text>
          <text v-if="shop.goodstatus_text === 2" class="linePrice">122</text>
        </view>
        <view class="reality flexA">
          <view class="shi">{{ textHandler(shop.order_status) }}</view>
          <text>￥</text>
          <view class="price">{{ it.total_price }}</view>
        </view>
      </view>
      <!-- 积分商品 -->
      <view class="pointsShop" v-else>
        <!-- 待发货 -->
        <template v-if="[2].includes(shop.order_status)">
          <div class="flexJ" style="flex: 1">
            <view class="flexA">
              <image src="/static/shopCarIc/pointsIc.png" mode=""></image>
              <view class="pointsPrice">{{ shop.score }}</view>
            </view>

            <view class="num ellipsis">x{{ it.total_num }}</view>
          </div>
        </template>
        <template v-else>
          <text>{{ textHandler(shop.order_status) }}</text>
          <image src="/static/shopCarIc/pointsIc.png" mode=""></image>
          <view class="points">{{ it.coscore }}</view>
          <view class="pointsPrice">￥{{ it.diff_price }}</view>
        </template>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
const props = defineProps({
  shop: {
    type: Array,
    default: []
  }
})

const textHandler = orderStatus => ([1, 11].includes(orderStatus) ? '需付款：' : [2, 3, 4, 21].includes(orderStatus) ? '实付款：' : '')

onMounted(() => {
  nextTick(() => {
    console.log(props.shop, '订单数据是什么')
  })
})
</script>

<style lang="scss">
.shop {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32rpx;

  .shopPhoto {
    width: 180rpx;
    height: 180rpx;
    margin-right: 16rpx;

    image {
      width: 180rpx;
      height: 180rpx;
      border-radius: 8rpx;
    }
  }

  .info {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .shopTitle {
      color: #323233ff;
      font-size: 26rpx;
      font-weight: 700;
    }

    .desc {
      margin: 16rpx 0;
      color: #00000066;
      font-size: 20rpx;
    }

    .num {
      color: #757d8cff;
      font-size: 26rpx;
      text-align: right;
    }

    .priceBox {
      margin-top: 14rpx;

      text {
        color: #ff3d3dff;
        font-size: 28rpx;
      }

      .shi {
        color: #ff3d3dff;
        font-size: 28rpx;
        margin-top: 4rpx;
        margin-right: 2rpx;
      }

      .reality {
        color: #fc4338ff;
        font-size: 24rpx;

        text {
          color: #fc4338ff;
          font-size: 22rpx;
          font-weight: 700;
          margin-top: 10rpx;
        }

        .price {
          color: #fc4338ff;
          font-size: 40rpx;
          font-weight: 700;
        }
      }
    }

    .pointsShop {
      display: flex;
      justify-content: flex-end;
      margin-top: 14rpx;

      text {
        color: #fc4338ff;
        font-size: 24rpx;
      }

      image {
        width: 30rpx;
        height: 30rpx;
      }

      .points {
        margin: 0 28rpx 0 14rpx;
        color: #ee0a24ff;
        font-size: 28rpx;
        font-weight: 700;
      }

      .pointsPrice {
        color: #ff3d3dff;
        font-size: 26rpx;
      }
    }
  }
}
.linePrice {
  text-decoration: line-through;
  color: rgba($color: #000000, $alpha: 0.3) !important;
}
</style>