<template>
  <view class="card-wrapper" @tap="emits('click')">
    <view class="img-box" :style="{ backgroundColor: payImg(wayCodeType).bgColor }">
      <image :src="payImg(wayCodeType).imgUrl" mode="scaleToFill" />
    </view>
    <view class="card-info">
      <view class="card-title">
        <view class="title">收款</view>
        <view class="num">+{{ (amount / 100).toFixed(2) }}</view>
      </view>
      <view class="order-number">
        <view class="order-title">订单编号：</view>
        {{ payOrderId }}
      </view>
      <view class="card-time">
        <view class="created-time">{{ createdAt }}</view>
        <view class="card-state" :style="{ backgroundColor: payState(state).color }">{{ payState(state).text }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
const emits = defineEmits(['click'])
const props = defineProps({
  payOrderId: { type: String }, //订单编号
  createdAt: { type: String }, //创建 时间
  amount: { type: [String, Number] }, //收款金额
  wayCodeType: { type: String }, // 支付方式
  state: { type: [String, Number] }, // 状态
})
const payImg = uni.$J.dataMap.payImg
const payState = uni.$J.dataMap.payStateMap
</script>

<style lang="scss" scoped>
.card-wrapper {
  display: flex;

  margin: 30rpx;
  padding: 20rpx 0 20rpx 20rpx;
  background-color: #fff;
  border-radius: 15rpx;

  .img-box {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 30rpx;
    width: 20%;
    border-radius: 14rpx;

    image {
      width: 80%;
      height: 80%;
    }
  }

  .card-info {
    flex: 1;

    .card-title {
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;
      font-weight: 600;

      .num {
        margin-right: 20rpx;
        color: rgba(45, 218, 119, 1);
      }
    }

    .order-number {
      display: flex;
      margin: 20rpx 0;
      font-size: 18rpx;
      color: rgba(102, 102, 102, 1);
    }

    .card-time {
      display: flex;
      justify-content: space-between;

      .created-time {
        font-size: 18rpx;
        color: rgba(179, 179, 179, 1);
      }

      .card-state {
        padding: 8rpx 30rpx;
        background-color: rgba(45, 218, 119, 1);
        border-radius: 20rpx 0 0 20rpx;
        font-size: 12rpx;
        color: #fff;
        letter-spacing: 2rpx;
      }
    }
  }
}
</style>
