<template>
  <JHeaderTitle title="订单详情" bgColor="#f2f2f2" />
  <view class="page-wrapper global-wrapper bgF2">
    <view class="o-header bdr-after border-f2 bdr-before bgF bdR20">
      <image :src="imgObj[orderInfo.wayCodeType]" mode="scaleToFill" />
      <view class="h-info">
        <view class="h-top"><text>￥</text>{{ (orderInfo.amount / 100).toFixed(2) }}</view>
        <view class="h-num">
          {{ orderInfo.payOrderId }}<text class="bdR10" @tap="copy(orderInfo.payOrderId)">复制</text></view>
      </view>
    </view>
    <view class="o-info bdr-after bdr-before border-f2 bgF">
      <view>
        <view class="title">交易状态</view>
        <text>{{
          orderInfo.state == 2 && orderInfo.refundState
          ? refundStateList[orderInfo.refundState]?.text
          : stateList[orderInfo.state]?.text
        }}</text>
      </view>
      <view style="margin: 30rpx 0">
        <view class="title">商户名</view> <text>{{ orderInfo.mchName }}</text>
      </view>
      <view style="margin-bottom: 30rpx">
        <view class="title">支付方式</view>
        <text>{{ pay[orderInfo.wayCodeType] }}</text>
      </view>
      <view style="margin-bottom: 30rpx">
        <view class="title">顾客备注</view> <text>{{ orderInfo.buyerRemark }}</text>
      </view>
      <view>
        <view class="title">创建时间</view> <text>{{ orderInfo.createdAt?.split("-").join("/") }}</text>
      </view>
    </view>
    <view class="o-num bdr-after bdr-before border-f2 bgF">
      <view style="margin-bottom: 30rpx">
        <view class="title">商户订单号</view> <text>{{ orderInfo.mchOrderNo }}</text>
      </view>
      <view>
        <view class="title">支付订单号</view> <text>{{ orderInfo.payOrderId }}</text>
      </view>
    </view>
    <view class="o-price bdR20 bgF" :class="{
      'bdr-after': orderInfo.state == 2 && orderInfo.refundState,
      'bdr-before': orderInfo.state == 2 && orderInfo.refundState,
      'border-f2': orderInfo.state == 2 && orderInfo.refundState,
    }">
      <view>
        <view class="title">订单金额</view> <text>{{ (orderInfo.amount / 100).toFixed(2) }}</text>
      </view>
      <view style="margin: 30rpx 0">
        <view class="title">商户手续费</view> <text>{{ (orderInfo.mchFeeAmount / 100).toFixed(2) }}</text>
      </view>
      <view>
        <view class="title">我的佣金</view>
        <text>{{ orderInfo?.profitAmount ? (orderInfo?.profitAmount / 100).toFixed(2) : "0.00" }}</text>
      </view>
    </view>
    <view class="o-refund bdR20" v-if="orderInfo.state == 2 && orderInfo.refundState">
      <view>
        <view class="r-title">退款金额（元）</view>
        {{ (orderInfo.refundAmount / 100).toFixed(2) }}
      </view>
      <view>
        <view class="r-title">剩余金额（元）</view>
        {{ ((orderInfo.amount - orderInfo.refundAmount) / 100).toFixed(2) }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue"
import { onBackPress, onLoad } from "@dcloudio/uni-app"
import { $getPayOrder } from "@/http/apiManager.js"
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue" //自定义导航栏
onLoad((option) => {
  if (option.payOrderId) return getOrderDetail(option.payOrderId)
})
const orderInfo = ref({})
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",
  },
])

const pay = reactive({
  WECHAT: "微信支付",
  ALIPAY: "支付宝",
  YSFPAY: "云闪付",
  UNIONPAY: "银联",
  OTHER: "其他",
})
const copy = (val) => {
  uni.setClipboardData({
    data: val,
  })
}
const getOrderDetail = (payOrderId) => {
  $getPayOrder(payOrderId).then(({ bizData }) => {
    orderInfo.value = bizData
  })
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  padding: 0 30rpx;
  padding-bottom: 130rpx;

  .o-header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 50rpx;

    image {
      width: 93rpx;
      height: 93rpx;
      margin-right: 30rpx;
      border-radius: 16rpx;
    }

    .h-info {
      .h-top {
        font-size: 33rpx;
        font-weight: 700;

        text {
          font-size: 23rpx;
        }
      }

      .h-num {
        font-size: 25rpx;
        color: #8c8c8c;

        text {
          display: inline-block;
          padding: 13rpx 19rpx;
          margin-left: 20rpx;
          border: 1rpx solid rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  .o-info,
  .o-num,
  .o-price {
    position: relative;
    padding: 50rpx;

    view {
      display: flex;
      font-size: 30rpx;
      color: #8c8c8c;

      .title {
        width: 160rpx;
      }

      text {
        flex: 1;
        margin-left: 48rpx;
        color: #000;
      }
    }
  }

  .o-refund {
    display: flex;
    padding: 50rpx;
    background-color: #f7392f;

    view {
      flex: 1;
      color: #fff;
      font-size: 33rpx;
      font-weight: 700;

      .r-title {
        margin-bottom: 20rpx;
        color: rgba(255, 255, 255, 0.6);
        font-size: 25rpx;
        font-weight: 500;
      }
    }
  }
}

.border-f2 {
  border-bottom: 2px dashed #f2f2f2;
}

.bdr-after::after,
.bdr-before::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -25rpx;
  z-index: 99;
  width: 50rpx;
  height: 50rpx;
  background-color: #f2f2f2;
  border-radius: 50%;
}

.bdr-after::after {
  left: -25rpx;
}

.bdr-before::before {
  right: -25rpx;
}</style>
