<template>
  <view class='card-view' @click.stop='goPath("/pages/mine/subs/order/order-detail")'>
    <view class='goods-info-view c-flex-row'>
      <image class='goods-image' :src='assetsUrl("test_bg.png")' />
      <view class='c-flex-column' style='flex: 1;'>
        <view class='c-flex-row'>
          <text class='goods-name'>女童夏装套装洋气装短袖阔腿裤子夏装套装</text>
          <text class='status'>未支付</text>
        </view>
        <view class='bottom-view c-flex-row'>
          <text>
            均色，120cm
          </text>
          <text>
            共1件
          </text>
          <text>23.20元</text>
        </view>
      </view>
    </view>
    <view class='action-view c-flex-row'>
      <view class='countdown c-flex-row'>
        <image :src='assetsUrl("ic_time.png")' />
        <text class='primary-text-color'>支付剩余时间
          <text class='accent-text-color'>05:23</text>
        </text>
      </view>

      <view class='c-flex-row'>
        <text class='secondary-text-color'>加入购物车</text>
        <text class='accent-text-color'>立即支付</text>
      </view>
    </view>
  </view>
</template>

<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
import { goPath } from '@/utils';

defineProps({
  item: Object
});
</script>

<style lang='scss' scoped>
.card-view {
  padding: 30rpx 20rpx 20rpx 30rpx;
  margin: 20rpx 24rpx;
}

.goods-info-view {
  display: flex;
  flex-direction: row;
  position: relative;

  .goods-image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 10rpx;
    margin-right: 20rpx;
  }

  .goods-name {
    font-size: 30rpx;
    font-weight: 400;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-right: 20rpx;
    color: #333333;
    flex: 1;
  }

  .status {
    font-size: 26rpx;
    font-weight: 400;
    color: #F32B2B;
    right: 0;
  }

  .bottom-view {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;

    text:nth-of-type(1) {
      font-size: 26rpx;
      font-weight: 400;
      flex: 1;
      color: #999999;
    }

    text:nth-of-type(2) {
      font-size: 24rpx;
      color: #333333;
      margin-right: 5rpx;
    }

    text:nth-of-type(3) {
      font-size: 34rpx;
      color: #333333;
      font-weight: bold;
    }
  }
}

.action-view {
  margin-top: 37rpx;

  .countdown {
    flex: 1;

    image {
      width: 37rpx;
      height: 37rpx;
      margin-right: 5rpx;
    }

    text {
      font-size: 26rpx;
      font-weight: 400;
    }
  }

  view:nth-of-type(2) {
    text {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 12rpx 28rpx;
      font-size: 26rpx;
      border-radius: 34rpx;
    }

    text:nth-of-type(1) {
      border: 1rpx solid #ACACAC;
    }

    text:nth-of-type(2) {
      border: 1rpx solid #F32B2B;
      margin-left: 20rpx;
    }
  }
}
</style>
