<template>
  <div
    class="order-tree-node"
    :class="`level-${orderData.currentLevel || 1}`"
    :style="{ marginLeft: ((orderData.currentLevel || 1) - 1) * 24 + 'px' }"
  >
    <el-card class="node-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-tag :type="levelTagType(orderData.currentLevel || 1)" size="small">
            {{ levelLabel(orderData.currentLevel || 1) }}
          </el-tag>
          <span class="order-no">{{ orderData.orderNo }}</span>
          <dict-tag v-if="orderData.orderStatus" :options="orderStatusDict" :value="orderData.orderStatus" />
          <span v-if="orderData.totalAmount" class="amount">￥{{ orderData.totalAmount }}</span>
        </div>
      </template>

      <!-- 基本信息 -->
      <el-descriptions :column="2" border class="custom-descriptions" size="small">
        <el-descriptions-item label="订单编号">{{ orderData.orderNo }}</el-descriptions-item>
        <el-descriptions-item v-if="orderData.parentOrderNo" label="关联单号">{{ orderData.parentOrderNo }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <dict-tag :options="orderStatusDict" :value="orderData.orderStatus" />
        </el-descriptions-item>
        <el-descriptions-item label="订单金额">￥{{ orderData.totalAmount || '--' }}</el-descriptions-item>
        <el-descriptions-item label="运费">￥{{ (Number(orderData.shippingFee) || 0).toFixed(2) }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ orderData.orderTime || '--' }}</el-descriptions-item>
        <el-descriptions-item label="确认时间">{{ orderData.confirmTime || '--' }}</el-descriptions-item>
        <el-descriptions-item label="签收时间">{{ orderData.receivingTime || '--' }}</el-descriptions-item>
        <el-descriptions-item v-if="orderData.remark" label="备注">{{ orderData.remark }}</el-descriptions-item>
      </el-descriptions>

      <!-- 商品列表 -->
      <div v-if="orderData.productList && orderData.productList.length" class="section">
        <h4 class="section-title">商品明细（{{ orderData.productList.length }}种）</h4>
        <el-table :data="orderData.productList" border style="width: 100%" size="small">
          <el-table-column label="产品图片" width="100">
            <template #default="scope">
              <el-image v-if="scope.row.productImage" :src="scope.row.productImage" style="width: 60px; height: 60px" fit="cover" />
              <span v-else>暂无图片</span>
            </template>
          </el-table-column>
          <el-table-column prop="productNo" label="商品编号" />
          <el-table-column prop="productName" label="商品信息" min-width="150" />
          <el-table-column prop="productUnit" label="单位" />
          <el-table-column prop="orderPrice" label="含税单价" />
          <el-table-column prop="subtotal" label="小计" />
          <el-table-column prop="orderQuantity" label="采购数量" />
        </el-table>
      </div>

      <!-- 子订单 -->
      <div v-if="orderData.childOrders && orderData.childOrders.length" class="section child-orders-section">
        <h4 class="section-title">子订单（{{ orderData.childOrders.length }}个）</h4>
        <el-collapse v-model="activeChildNames">
          <el-collapse-item v-for="child in orderData.childOrders" :key="child.id" :name="String(child.id)">
            <template #title>
              <div class="collapse-title">
                <span>{{ child.orderNo }}</span>
                <dict-tag :options="orderStatusDict" :value="child.orderStatus" />
              </div>
            </template>
            <OrderTreeNode :order-data="child" />
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, inject } from 'vue';
import type { OrderTreeVo } from '@/api/order/orderMain/types';

defineOptions({ name: 'OrderTreeNode' });

defineProps<{
  orderData: OrderTreeVo;
}>();

const LEVEL_LABELS = ['', '一级订单', '二级订单', '三级订单', '四级订单', '五级订单'];
const LEVEL_TYPES = ['primary', 'success', 'warning', 'info', 'danger'] as const;

const orderStatusDict = inject<any[]>('orderStatusDict', []);

const activeChildNames = ref<string[]>([]);

function levelLabel(lv: number) {
  return lv <= 5 ? LEVEL_LABELS[lv] : `${lv}级订单`;
}

function levelTagType(lv: number) {
  return lv <= 5 ? LEVEL_TYPES[lv - 1] || 'primary' : 'info';
}
</script>

<style scoped lang="scss">
.order-tree-node {
  margin-bottom: 16px;

  .node-card {
    transition: box-shadow 0.3s;
  }

  &.level-1 :deep(.el-card) {
    border-left: 4px solid #409eff;
  }
  &.level-2 :deep(.el-card) {
    border-left: 4px solid #67c23a;
  }
  &.level-3 :deep(.el-card) {
    border-left: 4px solid #e6a23c;
  }
  &.level-4 :deep(.el-card) {
    border-left: 4px solid #909399;
  }
  &.level-5 :deep(.el-card) {
    border-left: 4px solid #f56c6c;
  }

  &.level-1 .node-card {
    background-color: #f0f9ff;
  }
  &.level-2 .node-card {
    background-color: #f0fdf4;
  }
  &.level-3 .node-card {
    background-color: #fffcf0;
  }

  .card-header {
    display: flex;
    align-items: center;
    gap: 12px;

    .order-no {
      font-weight: 600;
    }

    .amount {
      margin-left: auto;
      color: #f56c6c;
      font-weight: 600;
    }
  }

  .section {
    margin-top: 16px;
  }

  .section-title {
    font-size: 14px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 8px;
  }

  .child-orders-section {
    margin-top: 16px;
  }

  .collapse-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
  }

  :deep(.custom-descriptions .el-descriptions__label) {
    width: 140px;
    white-space: nowrap;
  }
}
</style>
