<template>
  <view class="card-wrapper" @tap="emits('toDetails', rid)">
    <view class="c-left">
      <view class="c-price"><text>￥</text>{{ (applyAmount / 100).toFixed(2) }}</view>
      <view class="c-time">{{ createdAt.split("-").join("/") }}</view>
    </view>
    <view class="c-right"><image :src="stateList[state]?.img" mode="scaleToFill" /> {{ stateList[state]?.text }}</view>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue"
const props = defineProps({
  state: { type: Number }, //提现状态
  createdAt: { type: String }, //创建时间
  applyAmount: { type: Number }, //申请金额
  rid: { type: String }, //申请金额
})
const emits = defineEmits(["toDetails"])
const stateList = reactive([
  {}, //站位 状态码 1 - 5
  { text: "审核中", img: "/static/iconImg/icon-apply-examine.svg" },
  { text: "审核失败", img: "/static/iconImg/icon-apply-error.svg" },
  { text: "结算中", img: "/static/iconImg/icon-apply-examine.svg" },
  { text: "提现成功", img: "/static/iconImg/icon-success-wh.svg" },
  { text: "结算失败", img: "/static/iconImg/icon-apply-error.svg" },
])
</script>

<style lang="scss" scoped>
.card-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  background-color: #fff;
  .c-left {
    .c-price {
      font-size: 33rpx;
      font-weight: 900;
      text {
        font-size: 23rpx;
      }
    }
    .c-time {
      margin-top: 15rpx;
      font-size: 25rpx;
      color: #8c8c8c;
    }
  }
  .c-right {
    color: #666666;
    font-size: 30rpx;
    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
      vertical-align: top;
    }
  }
}
</style>
