<template>
  <main class="delivery">
    <section class="delivery-hero">
      <div class="delivery-hero-mask">
        <div class="mx-auto max-w-screen-xl px-4 py-10">
          <a-breadcrumb class="delivery-breadcrumb">
            <a-breadcrumb-item>
              <NuxtLink to="/">首页</NuxtLink>
            </a-breadcrumb-item>
            <a-breadcrumb-item>配送</a-breadcrumb-item>
          </a-breadcrumb>

          <div class="delivery-hero-title">配送管理</div>
          <div class="delivery-hero-sub">
            配送区域划分、配送员自动派单/人工派单、工资统计与接单台（原型/规划页）
          </div>

          <div class="mt-4 flex flex-wrap items-center gap-2">
            <a-button type="primary" @click="navigateTo('/delivery/areas')">配送范围（地图划区）</a-button>
            <a-button @click="navigateTo('/delivery/couriers')">配送员</a-button>
            <a-button @click="navigateTo('/delivery/board')">接单台</a-button>
            <a-button @click="navigateTo('/delivery/settings')">设置</a-button>
          </div>
        </div>
      </div>
    </section>

    <section class="mx-auto max-w-screen-xl px-4 py-10">
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="12" :lg="6">
          <a-card :bordered="false" class="kpi-card">
            <a-statistic title="配送点" :value="kpi.points" />
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="12" :lg="6">
          <a-card :bordered="false" class="kpi-card">
            <a-statistic title="配送员" :value="kpi.couriers" />
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="12" :lg="6">
          <a-card :bordered="false" class="kpi-card">
            <a-statistic title="待派单" :value="kpi.pendingDispatch" />
          </a-card>
        </a-col>
        <a-col :xs="24" :sm="12" :lg="6">
          <a-card :bordered="false" class="kpi-card">
            <a-statistic title="今日配送单" :value="kpi.todayOrders" />
          </a-card>
        </a-col>
      </a-row>

      <a-alert
        class="mt-4"
        show-icon
        type="info"
        message="说明"
        description="当前页面用于梳理配送相关需求与页面入口，后续再逐步落地：地图划区、自动派单、工资统计、确认收货与接单台。"
      />

      <a-row class="mt-6" :gutter="[24, 24]">
        <a-col :xs="24" :lg="12">
          <a-card title="配送范围（配送点维度）" class="module-card" :bordered="false">
            <a-list size="small" :data-source="deliveryAreaItems">
              <template #renderItem="{ item }">
                <a-list-item>{{ item }}</a-list-item>
              </template>
            </a-list>
            <div class="mt-4 flex flex-wrap gap-2">
              <a-button type="primary" @click="navigateTo('/delivery/areas')">进入地图划区</a-button>
              <a-button @click="navigateTo('/delivery/settings')">配置配送点</a-button>
            </div>
          </a-card>
        </a-col>

        <a-col :xs="24" :lg="12">
          <a-card title="配送员（站点维度）" class="module-card" :bordered="false">
            <a-list size="small" :data-source="courierItems">
              <template #renderItem="{ item }">
                <a-list-item>{{ item }}</a-list-item>
              </template>
            </a-list>
            <div class="mt-4 flex flex-wrap gap-2">
              <a-button type="primary" @click="navigateTo('/delivery/couriers')">配送员管理</a-button>
              <a-button @click="navigateTo('/delivery/settings')">工资/自动确认设置</a-button>
            </div>
          </a-card>
        </a-col>

        <a-col :xs="24">
          <a-card title="接单台（配送员端）" class="module-card" :bordered="false">
            <a-row :gutter="[24, 24]">
              <a-col :xs="24" :lg="12">
                <a-list size="small" :data-source="boardItems">
                  <template #renderItem="{ item }">
                    <a-list-item>{{ item }}</a-list-item>
                  </template>
                </a-list>
                <div class="mt-4 flex flex-wrap gap-2">
                  <a-button type="primary" @click="navigateTo('/delivery/board')">进入接单台</a-button>
                  <a-button @click="navigateTo('/delivery/dispatch')">人工派单</a-button>
                </div>
              </a-col>

              <a-col :xs="24" :lg="12">
                <a-typography-title :level="5" class="!mb-3">配送完成链路（建议流程）</a-typography-title>
                <a-timeline>
                  <a-timeline-item>下单 → 生成配送订单</a-timeline-item>
                  <a-timeline-item>地址落点 → 判断配送点范围</a-timeline-item>
                  <a-timeline-item>若属于某配送员负责小区 → 自动派单</a-timeline-item>
                  <a-timeline-item>否则 → 配送点管理员人工派单（通知配送员端）</a-timeline-item>
                  <a-timeline-item>配送员接单 → 配送中</a-timeline-item>
                  <a-timeline-item>送达 → 可选拍照 → 配送员确认送达</a-timeline-item>
                  <a-timeline-item>客户确认收货；若未确认，按配置自动确认（默认 24h）</a-timeline-item>
                </a-timeline>
              </a-col>
            </a-row>
          </a-card>
        </a-col>
      </a-row>
    </section>
  </main>
</template>

<script setup lang="ts">
import { usePageSeo } from '@/composables/usePageSeo'

usePageSeo({
  title: '配送管理',
  description: '配送范围划区、配送员派单规则、工资统计与接单台需求梳理。',
  path: '/delivery'
})

const kpi = reactive({
  points: 0,
  couriers: 0,
  pendingDispatch: 0,
  todayOrders: 0
})

const deliveryAreaItems = [
  '每个配送点的配送范围可独立设置',
  '在地图上划分区域（多边形/多个区域/禁配送区等）',
  '订单地址落点后判断是否在范围内（点-in-多边形）'
]

const courierItems = [
  '每个配送点可配置 N 个配送员',
  '可设置配送员负责的小区；属于该小区的订单自动派给对应配送员',
  '收货地址不属于任何小区：配送点管理员人工派单（需同步到配送员端）',
  '工资统计：水按桶计提成；其它商品按金额/规则计提成；默认当月，可选时间段查询；线下结算',
  '第三方配送点：不计算配送员工资',
  '送达后：配送员可选拍照并确认送达；客户确认收货；未确认则按配置自动确认（默认 24h）'
]

const boardItems = [
  '配送员可查看所属站点的配送订单列表',
  '按配送时间降序排序',
  '按配送日期筛选查询可接订单',
  '超时订单也可接单，并显示“超时”标签提醒'
]
</script>

<style scoped>
.delivery {
  background: #f4f6f8;
}

.delivery-hero {
  background:
    radial-gradient(circle at 15% 20%, rgba(22, 163, 74, 0.22), transparent 60%),
    radial-gradient(circle at 85% 10%, rgba(59, 130, 246, 0.18), transparent 55%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.delivery-hero-mask {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.92));
}

.delivery-breadcrumb {
  color: rgba(0, 0, 0, 0.6);
}

.delivery-hero-title {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.88);
  line-height: 1.2;
}

.delivery-hero-sub {
  margin-top: 10px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.6;
}

.kpi-card,
.module-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}
</style>
