<script setup lang="ts">
import DispatchOrderPanel from '@/order/DispatchOrderPanel.vue';
import { ref, computed } from 'vue';

defineOptions({
  name: 'DispatchOrder',
});

// 当前选中的派单类型
const activeOrderType = ref<'offline' | 'physical'>('offline');

// 订单面板
const panelRef = ref<InstanceType<typeof DispatchOrderPanel> | null>(null);

// 获取订单数量
const offlineCount = computed(() => panelRef.value?.offlineCount);
const onlineCount = computed(() => panelRef.value?.onlineCount);

</script>

<template>
  <div class="dispatch-order-page">
    <!-- 顶部tab -->
    <div class="main-tabs">
      <div class="main-tab" :class="{ active: activeOrderType === 'offline' }" @click="activeOrderType = 'offline'">
        线下服务 <span class="count">({{ offlineCount }})</span>
      </div>
      <div class="main-tab" :class="{ active: activeOrderType === 'physical' }" @click="activeOrderType = 'physical'">
        实体商品 <span class="count">({{ onlineCount }})</span>
      </div>
    </div>
    <!-- 派单 -->
    <div class="panel-wrapper">
      <DispatchOrderPanel ref="panelRef" :order-type="activeOrderType" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.dispatch-order-page {
  display: flex;
  flex-direction: column;
  height: var(--page-main-container, calc(100vh - 60px));
  max-height: var(--page-main-container, calc(100vh - 60px));
  padding: 24px;
  overflow: hidden;

  .main-tabs {
    display: inline-flex;
    gap: 0;
    margin-bottom: 16px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0; 

    .main-tab {
      padding: 10px 24px;
      cursor: pointer;
      transition: all 0.3s;
      font-size: 16px;
      font-weight: 500;
      position: relative;
      border: 1px solid #1890ff;

      &:first-child {
        border-radius: 4px 0 0 4px;
        border-right: none;

        &.active {
          background: #1890ff;
          color: #fff;
          z-index: 1;
        }

        &:not(.active) {
          background: #fff;
          color: #1890ff;

          .count {
            color: #ff4d4f;
          }
        }
      }

     
      &:last-child {
        border-radius: 0 4px 4px 0;

        &.active {
          background: #1890ff;
          color: #fff;
          z-index: 1;

          .count {
            color: #fff;
          }
        }

        &:not(.active) {
          background: #fff;
          color: #1890ff;

          .count {
            color: #ff4d4f;
          }
        }
      }

      .count {
        font-weight: 500;

      }

      &:hover {
        opacity: 0.9;
      }
    }
  }

  .panel-wrapper {
    flex: 1;
    min-height: 0; 
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
}
</style>
