<!-- 订单查看 - 售后 -->
<template>

  <div v-if="formData != null" style="text-align: center;margin-top: 50px;font-size: 14px;">
    该订单暂无售后记录
  </div>
  <div v-else class="aftersale-container">
    <h3 class="rating-title">{{formData.spuName}}</h3>
    <div class="content">
        <div class="content-image">
          <div class="image">
              <img :src="formData.picUrl" alt="商品主图" />
          </div>
        </div>
        <div class="details">
            <p class="product-model">{{formData.status}}</p>
            <p class="first-aftersale">退款：{{fenToYuan(formData.refundPrice)}}元</p>
            <p class="first-aftersale">原由：{{formData.applyReason || "无"}}</p>
            <p class="aftersale-comment" :title="formData.applyDescription">描述：{{formData.applyDescription || "无"}}</p>
        </div>
    </div>
  </div>
  
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import * as TradeOrderApi from '@/api/mall/trade/order'
import { fenToYuan } from '@/utils'

const props = defineProps({
  id: propTypes.number.def(undefined), // 订单ID
})
const formData = ref<TradeOrderApi.OrderVO>({
  logs: []
})
const id = props.id
const getOrderAfterSale = async () => {
  if (id) {
    const res = (await TradeOrderApi.getOrderAfterSale(id))
    // 没有表单信息则关闭页面返回
    if (!res) {
      message.error('交易订单不存在')
      close()
    }
    formData.value = res
  }
}

const message = useMessage() // 消息弹窗


onMounted(async () => {
  getOrderAfterSale()
})
</script>
<style src="./OrderComponents.css"  lang="scss" scoped></style>