<template>
  <view class="o-c-wrapper">
    <image :src="imgObj[wayCodeType]" mode="scaleToFill" />
    <view class="o-c-info">
      <view class="i-top">
        ￥{{ (amount / 100).toFixed(2) }}
        <view class="t-state" v-if="refundState == 1 || refundState == 2"
          ><text class="s-spot" :style="{ backgroundColor: refundStateList[refundState].bgColor }"></text>
          {{ refundStateList[refundState].text }}</view
        >
        <view class="t-state" v-else
          ><text class="s-spot" :style="{ backgroundColor: stateList[state].bgColor }"></text>
          {{ stateList[state].text }}</view
        >
      </view>
      <view class="i-time">{{ createdAt.split("-").join("/") }}</view>
      <view class="i-refund" v-if="refundState == 1 || refundState == 2">
        <view>退款￥{{ (refundAmount / 100).toFixed(2) }}</view>
        <view class="i-last">剩余￥{{ ((amount - refundAmount) / 100).toFixed(2) }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue"
const props = defineProps({
  wayCodeType: { type: String }, //图片地址
  state: { type: Number }, //订单状态
  amount: { type: String }, //订单金额
  createdAt: { type: String }, //订单创建时间
  refundState: { type: String }, //退款状态 0 为退款 1部分退款 2全额退款
  refundAmount: { type: String }, //退款金额
})
const imgObj = reactive({
  WECHAT: "/static/orderImg/wechat.svg",
  ALIPAY: "/static/orderImg/zfb.svg",
  YSFPAY: "/static/orderImg/ysf.svg",
  UNIONPAY: "/static/orderImg/union-pay.svg",
  OTHER: "/static/orderImg/default-pay.svg",
})
const stateList = reactive([
  {
    text: "订单生成",
    bgColor: "#FFA900",
  },
  {
    text: "支付中",
    bgColor: "#FFA900",
  },
  {
    text: "支付成功",
    bgColor: "#175be6",
  },
  {
    text: "支付失败",
    bgColor: "#ff0000",
  },
  {
    text: "已撤销",
    bgColor: "",
  },
  {
    text: "已退款",
    bgColor: "",
  },
  {
    text: "订单关闭",
    bgColor: "#9EA5B3",
  },
])
const refundStateList = reactive([
  {},
  {
    text: "部分退款",
    bgColor: "#FD2821",
  },
  {
    text: "全额退款",
    bgColor: "#FD2821",
  },
])
</script>

<style lang="scss" scoped>
.o-c-wrapper {
  display: flex;
  padding: 30rpx 0 0 30rpx;
  image {
    width: 93rpx;
    height: 93rpx;
    margin-right: 20rpx;
    border-radius: 16rpx;
  }
  .o-c-info {
    flex: 1;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
    .i-top {
      display: flex;
      justify-content: space-between;
      font-size: 23rpx;
      font-weight: 900;
      .t-state {
        margin-right: 30rpx;
        font-size: 30rpx;
        font-weight: 500;
        .s-spot {
          display: inline-block;
          width: 10rpx;
          height: 10rpx;
          vertical-align: middle;
          margin-right: 10rpx;
          border-radius: 50%;
          background-color: #06c05f;
        }
      }
    }
    .i-time {
      margin: 25rpx 0;
      font-size: 25rpx;
      color: #8c8c8c;
    }
    .i-refund {
      display: flex;
      margin-bottom: 30rpx;
      font-size: 25rpx;
      .i-last {
        margin-left: 28rpx;
      }
    }
  }
}
</style>
