<template>
  <div class="order-detail-order">
    <div class="order-detail_order-info">
      <div class="order-detail_order-info--title title">订单详情</div>
      <div class="order-detail_order-info--content">
        <div class="order-detail_order-info--content-item flex">
          <span class="order-detail_order-info__label label">主单号:</span>
          <span class="order-detail_order-info__value value flex-1">{{
            orderDetailData.factoryOrderNumber || '--'
          }}</span>
        </div>

        <div class="order-detail_order-info--content-item flex">
          <span class="order-detail_order-info__label label">工厂:</span>
          <span class="order-detail_order-info__value value flex-1">{{
            orderDetailData.factoryNo || '--'
          }}</span>
        </div>
        <div class="order-detail_order-info--content-item flex">
          <span class="order-detail_order-info__label label">收货人:</span>
          <span class="order-detail_order-info__value value flex-1">{{
            orderDetailData.lanshouName || '--'
          }}</span>
        </div>
        <div class="order-detail_order-info--content-item flex">
          <span class="order-detail_order-info__label label">收货人电话:</span>
          <span class="order-detail_order-info__value value flex-1">{{
            orderDetailData.lanshouPhone || '--'
          }}</span>
        </div>
        <div class="order-detail_order-info--content-item flex">
          <span class="order-detail_order-info__label label">邮编:</span>
          <span class="order-detail_order-info__value value flex-1">{{
            orderDetailData.lanshouPost || '--'
          }}</span>
        </div>
        <div class="order-detail_order-info--content-item flex">
          <span style="white-space: nowrap;" class="order-detail_order-info__label label">收货地址:</span>
          <span
            style="white-space: nowrap;"
            :title="orderDetailData.lanshouAddress"
            >{{ orderDetailData.lanshouAddress || '--' }}</span
          >
        </div>
      </div>
    </div>
    <div class="order-detail_price-info">
      <div class="order-detail_price-info--title title">实付款</div>
      <div class="order-detail_price-info--content">
        <div class="order-detail_price-info--content-item flex">
          <span class="order-detail_price-info__label label">商品价:</span>
          <span class="order-detail_price-info__value label flex-1">{{
            orderDetailData.thirdProductAmount || '--'
          }}</span>
        </div>
        <div class="order-detail_price-info--content-item flex">
          <span class="order-detail_price-info__label label">运费￥:</span>
          <span class="order-detail_price-info__value value flex-1">{{
            orderDetailData.carriageAmount || '--'
          }}</span>
        </div>
        <div class="order-detail_price-info--content-item flex">
          <span class="order-detail_price-info__label label">小计￥:</span>
          <span class="order-detail_price-info__value value flex-1">{{
            orderDetailData.totalAmount || '--'
          }}</span>
        </div>
      </div>
    </div>
    <div class="order-detail_goods-info">
      <div class="order-detail_goods-info--title title">商品详情</div>
      <div class="order-detail_goods-info--content">
        <ProductInfo
          :is-detail="true"
          :row="orderDetailData"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { OrderData } from '@/types/api/order'
import { PropType } from 'vue'
import ProductInfo from './ProductInfo.vue'

defineProps({
  orderDetailData: {
    type: Object as PropType<OrderData>,
    default: () => {},
  },
})
</script>

<style lang="scss" scoped>
.order-detail-order {
  .title {
    font-size: 18px;
    font-weight: 500;
  }
}

.order-detail_order-info--content,
.order-detail_price-info--content {
  padding: 10px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  font-size: 14px;

  .label {
    color: #606266;
    margin-right: 6px;
  }
  .value {
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.order-detail_goods-info--content {
  padding: 10px 0;
  font-size: 14px;
  :deep(.order-list-expand_item) {
    padding: 10px 0;
  }
}
</style>
