<!-- 商品查看 - 评论 -->
<template>
  <div v-if="formData.list == ''" 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!=''">
          <div class="image">
            <el-image  :src="item.picUrls[0]" class="image"
            @click="imagePreview(item.picUrls)" style="width: 100%;height: 100%;"/>
          </div>
        </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 * as ProductSpuApi from '@/api/mall/product/spu'
import { createImageViewer } from '@/components/ImageViewer'
import { isArray } from '@/utils/is'
const imagePreview = (args) => {
  const urlList = []
  if (isArray(args)) {
    args.forEach((item) => {
      urlList.push(item)
    })
  } else {
    urlList.push(args)
  }
  createImageViewer({
    urlList,
    zIndex: 9999
  })
}
const props = defineProps({
  propFormData: {
    type: Object,
    default: () => ({})
  }
})
const formData = ref({
  logs: []
})
const id = props.propFormData.id

const getSpuComment = async () => {

  if (id) {
    const res = (await ProductSpuApi.getSpuComment({pageNo:1,pageSize:100,spuId:id}))
    // 没有表单信息则关闭页面返回
    if (!res) {
      message.error('交易商品不存在')
      // close()
    }
    formData.value.list = res.list
  }

}
const message = useMessage() // 消息弹窗
onMounted(async () => {
  console.log(props.propFormData)
  getSpuComment()
})
</script>
<style src="./Components.css"  lang="scss" scoped></style>
