<template>
  <view class="details-header-card">
    <view class="order-num">
      <view class="img-box" :style="{ backgroundColor: payModel(vdata.wayCodeType).bgColor }">
        <image :src="payModel(vdata.wayCodeType).imgUrl" mode="scaleToFill" />
      </view>
      <view class="payment">￥{{ (vdata.amount / 100).toFixed(2) }}</view>
    </view>
    <view class="card-text">收款金额</view>
    <view class="refund" v-if="vdata.refundState != 2" @tap="toRefund">退款</view>
  </view>
  <view class="line" style="height: 20rpx"></view>
  <view class="order-info">
    <view class="title">订单金额</view>
    <view class="info">￥{{ (vdata.amount / 100).toFixed(2) }}</view>
  </view>
  <view class="order-info">
    <view class="title">退款金额</view>
    <view class="info">￥{{ (vdata.refundAmount / 100).toFixed(2) }}</view>
  </view>
  <view class="order-info">
    <view class="title">订单号</view>
    <view class="info">{{ vdata.payOrderId }}</view>
  </view>
  <view class="order-info">
    <view class="title">订单时间</view>
    <view class="info">{{ vdata.createdAt }}</view>
  </view>
  <view class="line"></view>
  <view class="order-info">
    <view class="title">支付方式</view>
    <view class="info">{{ payModel(vdata.wayCodeType).title }}</view>
  </view>
  <view class="order-info">
    <view class="title">订单状态</view>
    <view class="info">{{ payState(vdata.state).text }}</view>
  </view>
  <view class="line"></view>
  <view class="order-info">
    <view class="title">门店名称</view>
    <view class="info">{{ vdata.storeName }}</view>
  </view>
  <view class="order-info">
    <view class="title">操作员名称</view>
    <view class="info">{{ vdata.storeUserName }}</view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import { req, API_URL_PAY_ORDER_LIST } from '@/http/apiManager.js'
onLoad((options) => {
  getDetails(options.orderId)
})
const vdata = reactive({})
const payModel = uni.$J.dataMap.payImg
const payState = uni.$J.dataMap.payStateMap
const getDetails = (id) => {
  req.getById(API_URL_PAY_ORDER_LIST, id).then(({ bizData }) => {
    Object.assign(vdata, bizData)
  })
}
const toRefund = (oderId) => uni.navigateTo({ url: '/pages/orderRefund/orderRefund?orderId=' + vdata.payOrderId })
uni.$on('ORDER_DETAILS', (data) => {
  getDetails(vdata.payOrderId)
})
onUnload(() => {
  uni.$off('ORDER_DETAILS')
})
</script>

<style lang="scss" scoped>
.details-header-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 280rpx;
  .order-num {
    display: flex;
    align-items: center;
    .img-box {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 20rpx;
      width: 80rpx;
      height: 80rpx;
      border-radius: 14rpx;
      image {
        width: 80%;
        height: 80%;
      }
    }
    .payment {
      display: flex;
      justify-content: center;
      text-align: center;
      font-size: 40rpx;
      font-weight: 700;
      color: rgba(45, 218, 119, 1);
    }
  }
  .card-text {
    margin-top: 30rpx;
    color: #666;
    font-size: 24rpx;
  }
}
.line {
  width: 100%;
  height: 2rpx;
  background-color: #ededed;
}
.order-info {
  display: flex;
  justify-content: space-between;
  margin: 30rpx 20rpx;
  font-size: 22rpx;
  .info {
    color: #666;
  }
}
.refund {
  padding: 15rpx 30rpx;
  background-color: tomato;
  margin-top: 30rpx;
  border-radius: 14rpx;
  color: rgba($color: #fff, $alpha: 0.7);
  font-size: 20rpx;
}
</style>
