<!-- 公共订单组件 -->
<template>

  <div v-if="formData != null" style="text-align: center;margin-top: 50px;font-size: 14px;">
    暂无订单
  </div>
  <div v-else class="order-container">
    <h3 class="rating-title">{{ formData.spuName }}</h3>
    <div class="content">
      <div class="content-image">
        <div class="image">
          <img :src="formData.picUrl" />
        </div>
      </div>
      <div class="details">
        <p class="product-model">￥{{ fenToYuan(formData.price) }}</p>
        <p class="first-order">{{ formData.status }}</p>
        <p class="first-order">原由：{{ formData.name }}</p>
        <p class="order-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({
  obj:{
    type:Object,
    default:()=>{}
  },
  openSource: {
    type: String,
    default: ''
  }
})
const formData = ref<TradeOrderApi.OrderVO>({
  logs: []
})

const getOrderorder = async () => {
  if (props.obj.id) {
    const res = (await TradeOrderApi.getOrderorder(props.obj.id))
    // 没有表单信息则关闭页面返回
    if (!res) {
      message.error('交易订单不存在')
      close()
    }
    formData.value = res
  }
}

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


onMounted(async () => {
  // 如果是从消费者过来的，要查什么接口，做什么处理
  if(props.openSource == 'MemberUser'){
    // 做相应的处理
  }else {
    getOrderorder()
  }
  

})
</script>
<style src="@/styles/PcComponents.css"  lang="scss" scoped></style>

<style lang="scss" scoped>
.image {
  display: flex;
  justify-content: center; /* 水平居中图片 */
  align-items: center; /* 垂直居中图片 */
  overflow: hidden; /* 隐藏超出部分 */
}

.image img {
  display: block; /* 防止图片下方有空隙 */
  max-width: 100%; /* 最大宽度为容器宽度，保持原始比例 */
  max-height: 100%; /* 最大高度为容器高度，保持原始比例 */
  object-fit: contain; /* 保证图片按比例缩放填充，可能会有空白 */
}
.details{
  flex: 2;
}
.details p {
    margin: 5px 0;
}
.comment{
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.rating-title {
    font-weight: bold;
    margin-bottom: 10px;
}
.content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  align-items: stretch;
}

.content-image {
  border-radius: 4px;
  border: 1px solid #ebeef5;
  margin-right: 10px;
  align-items: center;
  display: flex;
  overflow: hidden; /* 防止图片溢出容器 */
  flex: 1;
}


@media screen and (max-width: 768px) {
  .order-container{
    width: 84% !important;
  }
}
 .order-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 355px;
  border: 1px solid #ebeef5;
  padding: 0 16px 16px;
  border-radius: 4px;
  float: left;
  margin: 10px;
  background: white;

}
.order-comment{
  margin-top:12px !important;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

}
</style>