<template>
  <div class="page orders">
    <header class="sub-hd">
      <h2 class="sub-hd__title">我的订单</h2>
    </header>

    <van-tabs
      v-model:active="active"
      sticky
      offset-top="0"
      line-width="20"
      color="#1677ff"
      title-active-color="#1677ff"
    >
      <van-tab v-for="t in tabs" :key="t.key" :title="t.text" :name="t.key" />
    </van-tabs>

    <div class="page__inner">
      <div v-if="loading" class="empty">
        <div class="empty__text muted">加载中…</div>
      </div>
      <div v-else-if="filtered.length === 0" class="empty">
        <div class="empty__icon">🗂️</div>
        <div class="empty__text muted">暂无相关订单</div>
        <van-button round type="primary" size="small" @click="$router.push('/order/create')">
          去发单
        </van-button>
      </div>

      <div v-for="o in filtered" :key="o.id" class="card order">
        <div class="order__hd">
          <span class="order__type">{{ o.type }}</span>
          <span class="order__status" :style="{ color: statusColor(o.status) }">
            {{ statusText(o.status) }}
          </span>
        </div>

        <div class="route">
          <div class="route__row"><i class="dotf"></i><span>{{ o.from }}</span></div>
          <div class="route__line"></div>
          <div class="route__row"><i class="dott"></i><span>{{ o.to }}</span></div>
        </div>

        <div class="order__note muted" v-if="o.note">备注：{{ o.note }}</div>

        <div class="order__ft">
          <div class="order__meta muted">
            <span>{{ o.id }}</span>
            <span>·</span>
            <span>{{ formatOrderTime(o.createdAt) }}</span>
          </div>
          <div class="order__pay">
            <span class="price">¥{{ Number(o.total).toFixed(2) }}</span>
            <span class="muted reward">含悬赏 ¥{{ o.reward }}</span>
          </div>
        </div>

        <div class="order__actions">
          <template v-if="o.status === 'waiting'">
            <van-button size="small" round plain @click="toast('已取消订单')">取消订单</van-button>
            <van-button size="small" round type="primary" @click="toast('已提高悬赏')">加价催单</van-button>
          </template>
          <template v-else-if="o.status === 'running'">
            <van-button size="small" round plain @click="toast('正在呼叫骑手')">联系骑手</van-button>
            <van-button size="small" round type="primary" @click="toast('查看实时位置')">查看进度</van-button>
          </template>
          <template v-else-if="o.status === 'done'">
            <van-button size="small" round plain @click="toast('再来一单')">再来一单</van-button>
            <van-button size="small" round type="primary" @click="toast('感谢评价')">去评价</van-button>
          </template>
          <template v-else>
            <van-button size="small" round plain @click="toast('已删除')">删除订单</van-button>
            <van-button size="small" round type="primary" @click="$router.push('/order/create')">重新下单</van-button>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onActivated } from 'vue'
import { showToast } from 'vant'
import { orderStatusMap } from '../data/mock.js'
import { api } from '../api/index.js'
import { ensureLogin } from '../store/session.js'
import { formatOrderTime } from '../utils/time.js'

const tabs = [
  { key: 'all', text: '全部' },
  { key: 'waiting', text: '待接单' },
  { key: 'running', text: '配送中' },
  { key: 'done', text: '已完成' },
  { key: 'canceled', text: '已取消' }
]
const active = ref('all')
const orders = ref([])
const loading = ref(true)

const filtered = computed(() =>
  active.value === 'all'
    ? orders.value
    : orders.value.filter((o) => o.status === active.value)
)

async function loadOrders() {
  loading.value = true
  try {
    const profile = await ensureLogin()
    const res = await api.getMyOrders(profile.id)
    orders.value = res.list
  } catch (e) {
    showToast(e.message || '加载失败')
  } finally {
    loading.value = false
  }
}
onMounted(loadOrders)
onActivated(loadOrders)

const statusText = (s) => orderStatusMap[s]?.text || ''
const statusColor = (s) => orderStatusMap[s]?.color || '#1677ff'
const toast = (m) => showToast(m)
</script>

<style scoped>
.orders {
  background: var(--brand-bg);
}
.sub-hd {
  background: linear-gradient(120deg, #1677ff, #0958d9);
  padding: calc(env(safe-area-inset-top) + 14px) 16px 14px;
}
.sub-hd__title {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
:deep(.van-tabs__wrap) {
  box-shadow: var(--brand-shadow-sm);
}

.order {
  padding: 14px;
  margin-bottom: 12px;
}
.order__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.order__type {
  font-weight: 700;
  font-size: 15px;
}
.order__status {
  font-size: 13px;
  font-weight: 600;
}
.route {
  margin: 12px 0 8px;
  position: relative;
}
.route__row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--brand-text-secondary);
}
.route__row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route__line {
  width: 1px;
  height: 12px;
  background: var(--brand-border);
  margin-left: 3.5px;
}
.dotf,
.dott {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
}
.dotf {
  background: #00b42a;
}
.dott {
  background: var(--brand-primary);
}
.order__note {
  font-size: 12px;
  background: var(--brand-bg);
  border-radius: 8px;
  padding: 7px 10px;
}
.order__ft {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--brand-border);
}
.order__meta {
  font-size: 11px;
  display: flex;
  gap: 6px;
}
.order__pay {
  text-align: right;
}
.order__pay .price {
  font-size: 17px;
}
.reward {
  display: block;
  font-size: 11px;
}
.order__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}
.order__actions :deep(.van-button--plain) {
  color: var(--brand-text-secondary);
  border: 1px solid var(--brand-border);
}

.empty {
  padding: 70px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.empty__icon {
  font-size: 46px;
}
</style>
