<!--

  订单列表页面， 数据渲染 
   业务： 支付订单列表页 

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/23 16:57
-->
<template>
  <!-- 列表卡片循环渲染start -->
  <view class="order-card" hover-class="touch-hover" hover-stay-time="150" @tap="toDetail()">
    <view class="img-wrapper flex-center" :style="{ backgroundColor: datamap.payOrderImage(record?.wayCodeType)?.bgColor }">
      <image :src="datamap.payOrderImage(record?.wayCodeType)?.imgUrl" mode="scaleToFill"></image>
    </view>
    <view class="order-info">
      <view class="order-num">
        <view> <text class="icon-money">￥</text> {{ cal.cert2Dollar(props.record.amount) }} </view>
        <view class="order-state">
          {{ datamap.payOrderState(props.record.state).text }}
          <text class="order-spot" :style="{ backgroundColor: datamap.payOrderState(props.record.state).color }"></text>
        </view>
      </view>
      <view class="order-time">{{ props.record.createdAt }}</view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import cal from '@/commons/utils/cal.js'
import go from '@/commons/utils/go.js'
import datamap from '@/commons/utils/datamap.js'

// 跳转详情页
function toDetail() {
  go.to('PAGES_PAY_ORDER_DETAIL', { payOrderId: props.record.payOrderId })
}

// 定义传入属性
const props = defineProps({
  record: { type: Object, default: () => {} }, // 渲染对象
})
</script>

<style lang="scss" scoped>
.store-name {
  display: flex;
  align-items: center;
  font-size: 33rpx;
  font-weight: 500;
  image {
    width: 44rpx;
    height: 44rpx;
    margin-left: 5rpx;
    transform: rotate(180deg);
  }
}
.input-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  padding-top: 22rpx;
  height: 110rpx;
  background-color: $J-bg-ff;
  .input-main {
    flex: 1;
    display: flex;
    align-items: center;
    height: 70rpx;
    background: $J-bg-f5;
    border-radius: $J-b-r12;
    image {
      padding: 22rpx;
      width: 26rpx;
      height: 26rpx;
    }
    input {
      flex: 1;
      font-size: 27rpx;
    }
  }
  .screen-wrapper {
    margin: 0 12rpx 0 20rpx;
    font-size: 32rpx;
    color: $J-color-t99;
    image {
      width: 28rpx;
      height: 26rpx;
      padding: 0 21rpx;
    }
  }
}
.order-card {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  height: 170rpx;
  background-color: $J-bg-ff;
  .img-wrapper {
    margin-right: 30rpx;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .order-info {
    flex: 1;
    .order-num {
      display: flex;
      justify-content: space-between;
      font-size: 30rpx;
      font-weight: 500;
      .icon-money {
        font-size: 23rpx;
      }
      .order-state {
        display: flex;
        align-items: center;
        color: $J-color-t80;
        .order-spot {
          display: block;
          margin: 0 10rpx 0 20rpx;
          width: 20rpx;
          height: 20rpx;
          border-radius: 50%;
        }
      }
    }
    .order-time {
      margin-top: 16rpx;
      font-size: 26rpx;
      color: $J-color-t99;
    }
  }
}
</style>
