<template>
  <view class="evaluation-container">
    <!-- 评价内容区域 -->
    <view>
      <view v-for="(item, index) in orderList" :key="index">
        <view class="evaluation-content">
          <!-- 订单头部信息 -->
          <view class="order-header">
            <text class="order-name">{{ item.supplier_name }}</text>
            <text class="order-number">{{ item.order_no }}</text>
          </view>

          <view class="evaluation-area">
            <text class="evaluation-text">{{ item.evaluate_info.user_review }}</text>
            <!-- 评价图片区域 -->
            <view class="image-list" v-if="item.evaluate_info.review_image && item.evaluate_info.review_image.length > 0">
              <view class="image-item" v-for="(img, index) in parseReviewImages(item.evaluate_info.review_image)" :key="index">
                <image :src="img"></image>
              </view>
            </view>
            <text class="order-date">{{ item.evaluate_info.create_time }}</text>
          </view>

          <!-- 商品信息区域 -->
          <view class="product-info">
            <view class="product-img">
              <image :src="item.commodity_order_item_list[0].commodity_pic"></image>
              <view class="tag" v-if="item.commodity_order_item_list[0].is_same_day === 1" :key="index">当日达</view>
            </view>
            <view class="product-details">
              <text class="product-name">{{ item.commodity_order_item_list[0].goods_name }}</text>
              <text class="product-spec">{{ item.commodity_order_item_list[0].goods_spec }}</text>
              <text class="product-unit">{{ item.commodity_order_item_list[0].sales_price }}/{{ item.commodity_order_item_list[0].goods_unit }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    orderData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      orderList: [],
    };
  },
  methods: {
    // 解析评价图片格式
    parseReviewImages(reviewImage) {
      try {
        // 检查是否为字符串类型且包含有效内容
        if (typeof reviewImage === 'string' && reviewImage.trim()) {
          // 去除可能的引号和空格，然后尝试解析为数组
          const cleanStr = reviewImage.replace(/^"|"$/g, '').replace(/^'|'$/g, '').trim();
          let images = [];
          
          // 尝试使用JSON解析
          if (cleanStr.startsWith('[') && cleanStr.endsWith(']')) {
            images = JSON.parse(cleanStr);
          } else if (cleanStr.includes(',')) {
            // 如果是逗号分隔的字符串
            images = cleanStr.split(',').map(img => img.trim());
          }
          
          // 确保返回的是数组并且每个元素都是有效的URL
          return Array.isArray(images) ? images : [];
        }
        // 如果已经是数组则直接返回
        return Array.isArray(reviewImage) ? reviewImage : [];
      } catch (error) {
        console.error('解析评价图片失败:', error);
        return [];
      }
    }
  },
  mounted() {
    // 组件挂载时初始化数据
    this.orderList = this.orderData;
    console.log("🚀 ~ mounted ~ this.orderList:", this.orderList);
  },
  watch: {
    // 监听orderData的变化，确保子组件能响应父组件数据更新
    orderData: {
      handler(newVal) {
        this.orderList = newVal;
        console.log("🚀 ~ watch orderData ~ this.orderList:", this.orderList);
      },
      deep: true 
    }
  }
};
</script>

<style>
@import url("./rated.css");
</style>