<template>
  <view class="card_item">
    <!-- 订单详情 -->
    <view class="shop-info">
      <view class="item" v-for="item in nowCarts" :key="item.id">
        <view class="cover">
          <view class="limitDiscount" v-if="showLimitDiscount(item)"
            >限时折扣</view
          >

          <up-image
            width="76"
            height="76"
            radius="6"
            :src="item.productImg"
            v-if="item.productId != -999"
          ></up-image>
          <up-image
            width="76"
            height="76"
            radius="6"
            :src="'https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/table.png'"
            mode="heightFix"
            v-else
          ></up-image>
        </view>
        <view class="info">
          <text class="productName">{{ item.productName }}</text>
          <text class="productSkuName" v-if="item.skuName">{{
            item.skuName
          }}</text>
          <template v-if="showLimitDiscount(item)">
            <text
              class="limitDiscount-time"
              v-if="limitDiscount.useTimeType == 'all'"
            >
              限时折扣：00：00-24：00
            </text>
            <text
              class="limitDiscount-time"
              v-if="
                limitDiscount.useTimeType == 'custom' &&
                limitDiscount.useStartTime &&
                limitDiscount.useEndTime
              "
            >
              限时折扣：{{ limitDiscount.useStartTime }}-{{
                limitDiscount.useEndTime
              }}
            </text>
          </template>
        </view>

        <view class="price">
          <view class="priceAmount">
            ¥
            <goodsPrice
              :cart="item"
              :limitDiscount="limitDiscount"
              :shopUserInfo="shopUserInfo"
              :shopInfo="shopInfo"
              idKey="product_id"
            ></goodsPrice>
            <view class="old-price" v-if="showLimitDiscount(item)">¥{{ item.salePrice }}</view>
          </view>
          <view class="num">x{{ item.num }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  ref,
  reactive,
  defineProps,
  computed,
  defineEmits,
  watch,
  watchEffect,
  defineExpose,
  inject,
  onMounted,
} from "vue";
import goodsPrice from "@/components/goods-price.vue";
import * as orderUtils from "@/utils/order-utils.js";

const props = defineProps({
  changeFreeenable: {
    type: Boolean,
    default: false,
  },
  useVipPrice: {
    type: Boolean,
    default: false,
  },
  nowCarts: {
    type: Array,
    default: () => {
      return [];
    },
  },
  limitDiscount: {
    type: Object,
    default: () => {},
  },
});
const shopUserInfo = inject("shopUserInfo");
const shopInfo = inject("shopInfo");

function showLimitDiscount(item) {
  if (!props.limitDiscount || !props.li) {
    return false;
  }
  return orderUtils.canUseLimitTimeDiscount(
    item,
    props.limitDiscount,
    shopInfo.value,
    shopUserInfo.value,
    "id"
  );
}
onMounted(() => {
  console.log("props.nowCarts");
  console.log(props.nowCarts);
});

const showOldPrice = computed(() => {});
</script>

<style lang="scss" scoped>
.card_item {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0 34rpx;

  .head {
    display: flex;
    justify-content: space-between;
    // padding: 32rpx 0;

    .head_left {
      display: flex;
      align-items: center;

      .placeNum {
        font-weight: bold;
        font-size: 32rpx;
        color: #333333;
        margin-right: 32rpx;
        flex-shrink: 0;
      }

      .placeTime {
        font-weight: 400;
        font-size: 32rpx;
        color: #666666;
        flex-shrink: 0;
      }
    }
  }

  .shop-info {
    padding-top: 28rpx;

    .item:nth-child(1) {
      margin-top: 0;
    }

    .item {
      margin-bottom: 32rpx;
      display: flex;
      &:last-child {
        margin-bottom: 0;
      }
      .cover {
      }

      .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-left: 16upx;

        .productName {
          font-weight: bold;
          font-size: 28rpx;
          color: #333333;
          margin-top: 20rpx;
        }

        .productSkuName {
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .n {
          font-size: 24upx;
          color: #999;
        }
      }

      .price {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-left: 68rpx;

        .priceAmount {
          font-weight: 700;
          font-size: 28rpx;
          color: #333333;
          margin-top: 26rpx;
        }

        .num {
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          margin-top: 22rpx;
        }
      }
    }
  }

  .status {
    align-self: flex-end;
    width: 92rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    background: #999999;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    font-weight: 400;
    font-size: 22rpx;
    color: #ffffff;
    margin-top: 32rpx;
  }

  .totalAmount {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 32rpx 0;
    border-bottom: 2rpx dashed #e5e5e5;

    .label {
      font-weight: bold;
      font-size: 28rpx;
      color: #333333;
    }

    .price {
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
    }
  }

  .semicircle_icon {
    width: 100%;
    position: absolute;
    top: -22.5rpx;
    left: 0;
    display: flex;
    justify-content: space-between;

    .semicircle_left_icon {
      width: 45rpx;
      height: 45rpx;
      margin-left: -22.5rpx;
      background-color: #f9f9f9;
      border-radius: 50%;
      // box-shadow: inset -20rpx 0rpx 22rpx -20rpx rgba(87, 86, 86, 0.35);
    }

    .semicircle_right_icon {
      width: 45rpx;
      height: 45rpx;
      margin-right: -22.5rpx;
      background-color: #f9f9f9;
      border-radius: 50%;
      // box-shadow: inset 13rpx 0rpx 16rpx -9rpx rgba(87, 86, 86, 0.35);
    }
  }
}

.cell-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 34rpx 0 34rpx;

  .label {
    font-weight: bold;
    font-size: 32rpx;
    color: #333333;
    padding-bottom: 32rpx;
  }

  .val {
    display: flex;
    align-items: flex-end;
    padding-bottom: 32rpx;
    border-bottom: 2rpx dashed #e5e5e5;

    view:nth-child(1) {
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      margin-right: 42rpx;
    }

    view:nth-child(2) {
      display: flex;
      align-items: flex-end;
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
    }
  }

  .val.column {
    display: flex;
    flex-direction: column;

    .productCoupon {
      display: flex;
      align-items: flex-end;
      margin: 0 0 10rpx 0;

      .name {
        font-weight: 400;
        font-size: 26rpx;
        color: #999;
        margin: 0;
      }

      .num {
        font-weight: 400;
        font-size: 26rpx;
        color: #999;
        margin: 0 30rpx;
        line-height: 20rpx;
      }

      .amount {
        font-weight: bold;
        font-size: 26rpx;
        color: #333;
      }
    }
  }
}

.favorable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-sizing: border-box;
  padding-bottom: 26rpx;
  padding-top: 26rpx;
  border-bottom: 2rpx solid #e5e5e5;

  .favorable_left {
    display: flex;
    align-items: center;

    .icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 16rpx;
    }

    .name {
      font-size: 28rpx;
      font-weight: 400rpx;
      color: #333;
    }
  }

  .favorable_right {
    display: flex;
    align-items: center;

    .favorable_right_text {
      font-size: 24rpx;
      color: #999;
      font-weight: 400rpx;
    }
  }

  .favorable_right {
    .column {
      display: flex;
      flex-direction: column;
      align-items: flex-end;

      .favorable_right_text {
        margin-bottom: 10rpx;

        text:nth-child(1) {
          font-size: 26rpx;
          color: #999;
        }

        text:nth-child(2) {
          font-size: 26rpx;
          color: #999;
          margin: 0 30rpx;
        }

        text:nth-child(3) {
          font-size: 26rpx;
          color: #333;
        }
      }
    }
  }

  .favorable_right.column {
    align-items: flex-start;
  }
}

.favorable.column {
  align-items: flex-start;
}

.cell-item.column {
  align-items: flex-start;
}

.total-wrap {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0 34rpx;
  font-weight: bold;
  font-size: 28rpx;
  color: #333333;
  margin-top: 64rpx;

  .price {
    font-weight: bold;
    font-size: 36rpx;
  }
}

.order_footer {
  display: flex;
  flex-direction: column;
  padding: 34rpx;
  position: relative;
}

.fixedview {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  .flex-between {
    width: 100%;
    padding: 36rpx 54rpx 102rpx 54rpx;
    background: #ffffff;

    .fixedview_one {
      display: flex;
      align-items: flex-end;

      .fixedview_oneone {
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
      }

      .fixedview_onetow {
        font-weight: bold;
        font-size: 32rpx;
        color: #333333;

        text {
          font-size: 24rpx;
        }
      }
    }

    .fixedview_tow {
      width: 140rpx;
      height: 56rpx;
      line-height: 56rpx;
      text-align: center;
      background: #e3ad7f;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}

.cover {
  position: relative;
}

.limitDiscount {
  background-color: #cc5617;
  padding: 2rpx 10rpx;
  white-space: nowrap;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 400;
  font-size: 24rpx;
  color: #ffffff;
  border-radius: 20rpx 0rpx 20rpx 0rpx;
  z-index: 9;
  color: #fff;
}
.limitDiscount-time {
  color: #ff534b;
  font-size: 20rpx;
  line-height: 25rpx;
}
.old-price {
  font-size: 24rpx;
  color: #999;
  font-weight: 400;
  text-decoration: line-through;
  text-align: right;
}
</style>