<!-- 公共售后组件 -->
<template>
  <div v-if="formData == null || formData == ''" style="text-align: center;margin-top: 50px;font-size: 14px;">
    暂无售后记录
  </div>
  <div v-else class="aftersale-container"  v-for="item in formData" :key="item">
    <h3 class="rating-title">{{ item?.spuName }}</h3>
    <div class="content">
      <div class="content-image">
        <div class="image">
          <img :src="item?.picUrl" />
        </div>
      </div>
      <div class="details">
        <p class="product-model">{{ getDictObj(DICT_TYPE.TRADE_AFTER_SALE_STATUS, item?.status)?.label }}</p>
        <p class="first-aftersale">退款：{{ fenToYuan(item?.refundPrice) }}元</p>
        <p class="first-aftersale">原由：{{ item?.applyReason || "无" }}</p>
        <p class="aftersale-comment" :title="item?.applyDescription">描述：{{ item?.applyDescription || "无" }}</p>
      </div>
    </div>
  </div>
  <div style="clear: both;margin-right: 20px;">
    <!-- 分页 -->
    <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
      @pagination="getList" />
  </div>
</template>
<script lang="ts" setup>
import { DICT_TYPE, getDictObj } from '@/utils/dict'
import * as TradeOrderApi from '@/api/mall/trade/order'
import * as AftersaleApi from '@/api/mall/trade/aftersale'
import { fenToYuan } from '@/utils'

const props = defineProps({
  obj:{
    type:Object,
    default:()=>{}
  },
  openSource: {
    type: String,
    default: ''
  },
  merId: {
    type: Number,
    default: undefined
  },
  productId:{
    type: Number,
    default: undefined
  },
  orderId:{
    type: Number,
    default: 0
  }
})

const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  merchantId: props.merId,
  spuId: props.productId
}) // 查询参数

const total = ref(0) // 列表的总页数
const getList = async () => {
  if (props.openSource == 'Merchant') {
    //商户
    getAfterSaleList(queryParams.value)
  } else if (props.openSource == 'Spu') {
    //商品
    getAfterSaleByPro(queryParams.value)
  }
}


const formData = ref({})

const getAfterSaleList = async (params) =>{
  let res = (await AftersaleApi.getAfterSaleList(params))
   // 处理返回数据，如果是对象，则转换为数组
   if(!Array.isArray(res) && res != null) res = [res]
  formData.value = res
  total.value = res.total
}
const getOrderAfterSale = async () => {
  let res = (await TradeOrderApi.getOrderAfterSale(props.orderId))
  // 处理返回数据，如果是对象，则转换为数组
  if(!Array.isArray(res) && res != null) res = [res]
  formData.value = res

}
const getAfterSaleByPro = async (params) => {
  let res = (await AftersaleApi.getAfterSaleByPro(params))
   // 处理返回数据，如果是对象，则转换为数组
   if(!Array.isArray(res) && res != null) res = [res]

  formData.value = res
}


// const message = useMessage() // 消息弹窗
onMounted(async () => {
  console.log("公共售后页面，进来的类型是:",props.openSource)
  if(props.openSource == 'MemberUser'){
    //消费者
    console.log("做相应的处理")
  }else if(props.openSource == 'Merchant'){
    //商户
    getList()
    console.log("商户")
  }else if(props.openSource == 'Spu'){
    //商品
    getList()
    console.log("商品")
  }else if(props.openSource == 'Order'){
    //订单
    console.log(props.orderId)
    getOrderAfterSale()
  }
  

})
</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) {
  .aftersale-container{
    width: 84% !important;
  }
}
 .aftersale-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 295px;
  border: 1px solid #ebeef5;
  padding: 0 16px 16px;
  border-radius: 4px;
  float: left;
  margin: 10px;
  background: white;

}
.aftersale-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>