<!-- 订单查看 - 评论 -->
<template>
  <div v-if="!formData.total" style="text-align: center;margin-top: 50px;font-size: 14px;">
    该订单暂无评论
  </div>
  
  <div v-else class="container" v-for="item in formData.list" :key="item">
    <h3 class="rating-title">{{ item.descriptionScores }}星</h3>
    <div class="content">
      
      <div class="content-image" v-if="item.picUrls!='' &&  item.picUrls!=null" >
          <!-- 只显示一张 -->
          <el-image  :src="item.picUrls[0]" class="image"
            @click="imagePreview(item.picUrls)" style="width: 100%;height: 100%;"/>
      </div>
      <div class="details">
        <p class="product-model">型号：{{ item.spuName }}-<span v-for="skuItem in item.skuProperties"
            :key="skuItem.propertyId">{{ skuItem.propertyName }}-{{ skuItem.valueName }}</span></p>
        <p class="first-review">首评</p>
        <p class="comment" :title="item.content">评语：{{ item.content || '无' }}</p>
      </div>
    </div>
  </div>

</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import * as TradeOrderApi from '@/api/mall/trade/order'
import { useAppStore } from '@/store/modules/app'
import { createImageViewer } from '@/components/ImageViewer'
import { isArray } from '@/utils/is'
const appStore = useAppStore()
const mobile = computed(() => appStore.getMobile)
/** 图片预览 */
const imagePreview = (args) => {
  const urlList = []
  if (isArray(args)) {
    args.forEach((item) => {
      urlList.push(item)
    })
  } else {
    urlList.push(args)
  }
  createImageViewer({
    urlList,
    zIndex: 2050
  })
}
const props = defineProps({
  id: propTypes.number.def(undefined), // 订单ID
  showPickUp: propTypes.bool.def(true) // 显示核销按钮
})
const formData = ref<TradeOrderApi.OrderVO>({
  logs: []
})
const id = props.id
const getOrderComment = async () => {

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

}

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


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