<template>
  <view class="order-list">
    <view class="order-item" v-for="(item, index) in orderList" :key="index">
      <view class="order-header">
        <text class="order-name">{{ item.supplier_name }}</text>
        <text class="order-number">{{ item.order_no }}</text>
      </view>
      <view class="product-list">
        <view class="product-item" v-for="(product, pIndex) in item.commodity_order_item_list" :key="pIndex">
          <view class="product-info" @click="toDetail(item)">
            <view class="product-img">
              <image :src="product.commodity_pic"></image>
              <view class="tag" v-if="product.is_same_day === 1">当日达</view>
            </view>
            <view class="product-details">
              <text class="product-name">{{ product.goods_name }}</text>
              <text class="product-spec">{{ product.goods_spec }}</text>
              <text class="product-unit">{{ product.sales_price }}/{{ product.goods_unit }}</text>
            </view>
          </view>
          <button class="evaluate-btn" @click="evaluateOrder(item)">
            评价
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { request, NavgateTo } from "../../../utils";

export default {
  props: {
    orderData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      orderList: [],
    };
  },
  methods: {
    toDetail(item) {
      const goodId = item.commodity_order_item_list[0].goods_id
      const orderInfo = item
      NavgateTo(`/packages/myOrders/goodDetails/index?item=${JSON.stringify(orderInfo)} &goodId=${JSON.stringify(goodId)}`);
    },
    evaluateOrder(item) {
      NavgateTo(`../evaluate/index?item=${JSON.stringify(item)}`);
    },
  },
  mounted() {
    // 组件挂载时初始化数据
    this.orderList = this.orderData;
  },
  watch: {
    // 监听orderData的变化，确保子组件能响应父组件数据更新
    orderData: {
      handler(newVal) {
        this.orderList = newVal;
      },
      deep: true 
    }
  }
};
</script>

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