<template>
  <view class="evaluation-container">
    <!-- 评价内容区域 -->
    <view class="evaluation-content">
      <!-- 订单头部信息 -->
      <view class="order-header">
        <text class="order-name">{{ orderInfo.orderName }}</text>
        <text class="order-number">{{ orderInfo.orderNumber }}</text>
      </view>

      <view class="evaluation-area">
        <text class="evaluation-text">{{ evaluationInfo.content }}</text>
        <!-- 评价图片区域 -->
        <view class="image-list">
          <view
            class="image-item"
            v-for="(img, index) in evaluationInfo.images"
            :key="index"
          >
            <image :src="img.url" mode="aspectFill"></image>
            <text class="image-text">{{ img.text }}</text>
          </view>
        </view>
        <text class="order-date">{{ orderInfo.date }}</text>
      </view>

      <!-- 商品信息区域 -->
      <view class="product-info">
        <view class="product-img">
          <image :src="productInfo.imageUrl" mode="aspectFit"></image>
          <view
            class="tag"
            v-for="(tag, index) in productInfo.tags"
            :key="index"
            >{{ tag }}</view
          >
        </view>
        <view class="product-details">
          <text class="product-name">{{ productInfo.name }}</text>
          <text class="product-spec">{{ productInfo.spec }}</text>
          <text class="product-unit">{{ productInfo.unit }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderInfo: {
        orderName: "衡水商贸国际公司",
        orderNumber: "4534534255",
        date: "2025-07-21",
      },
      evaluationInfo: {
        content: "评价文字内容",
        images: [
          { url: "http://localhost:8080/eval1.png", text: "评价图片" },
          { url: "http://localhost:8080/eval2.png", text: "评价图片" },
          { url: "http://localhost:8080/eval3.png", text: "评价图片" },
        ],
      },
      productInfo: {
        imageUrl: "http://localhost:8080/product.png",
        tags: ["当日达", "当日达"],
        name: "货品名称",
        spec: "货品规格",
        unit: "货品单位",
      },
    };
  },
};
</script>

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