﻿<template>
  <view class="page-orders">
    <view class="nav-bar" :style="{ top: statusBarHeight + 'px' }">
      <text class="nav-back" @tap="goBack">←</text>
      <text class="nav-title">我的订单</text>
      <text></text>
    </view>

    <scroll-view class="orders-body" scroll-y v-if="orders.length > 0">
      <OrderCard v-for="o in orders" :key="o.id" :order="o">
        <template #actions>
          <view class="card-actions">
            <button v-if="o.status===0" class="action-btn action-remind" @tap="onRemind(o.id)">🔔 催单</button>
            <button v-if="o.status!==3 && o.status!==2" class="action-btn action-chat" @tap="onChat">
              💬 联系调酒师
              <text v-if="card.unread > 0" class="unread-dot">{{ card.unread }}</text>
            </button>
          </view>
        </template>
      </OrderCard>
    </scroll-view>

    <view v-else class="empty-state">
      <text class="empty-icon">📋</text>
      <text class="empty-text">暂无订单</text>
      <button class="btn-back-menu" @tap="goMenu">去点酒 🍸</button>
    </view>
  </view>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { useCardStore } from '@/stores/card'
import { get, post } from '@/utils/request'
import { API } from '@/utils/constants'
import { startPoll, stopPoll } from '@/utils/poller'
import OrderCard from '@/components/OrderCard.vue'

export default {
  components: { OrderCard },
  setup() {
    const card = useCardStore()
    const orders = ref([])
    const statusBarHeight = ref(0)

    async function loadOrders() {
      try {
        const res = await get(API.ORDER_LIST, { card_no: card.cardNo })
        if (Array.isArray(res)) orders.value = res
      } catch (e) {}
    }
    async function checkUnread() {
      try {
        const res = await get(API.MESSAGE_LIST, { card_no: card.cardNo, since: 0 })
        if (Array.isArray(res)) {
          card.unread = res.filter(m => m.senderType === 'staff').length
        }
      } catch (e) {}
    }
    async function onRemind(id) {
      try {
        await post(API.ORDER_REMIND, { id, card_no: card.cardNo })
        uni.showToast({ title: '已催单 🔔', icon: 'none' })
        loadOrders()
      } catch (e) {}
    }

    function onChat() { uni.navigateTo({ url: '/pages/chat/chat' }) }
    function goBack() { uni.navigateBack() }
    function goMenu() { uni.navigateBack() }

    onMounted(() => {
      const systemInfo = uni.getSystemInfoSync()
      statusBarHeight.value = systemInfo.statusBarHeight
      loadOrders(); checkUnread(); startPoll('orders', loadOrders, 15000); startPoll('ordersUnread', checkUnread, 10000)
    })
    onUnmounted(() => { stopPoll('orders'); stopPoll('ordersUnread') })

    return { card, orders, statusBarHeight, onRemind, onChat, goBack, goMenu }
  }
}
</script>

<style scoped>
.page-orders{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);width:100%}
.nav-bar{height:100rpx;position:fixed;top:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:space-between;padding:0 28rpx;border-bottom:1px solid var(--border);width:100%}
.nav-back{font-size:36rpx;color:var(--text-dim)}
.nav-title{font-size:32rpx;font-weight:800;color:var(--gold)}
.orders-body{flex:1;padding:20rpx;margin-top:100rpx}
.card-actions{display:flex;gap:16rpx;padding-top:16rpx}
.action-btn{padding:12rpx 28rpx;border-radius:24rpx;font-size:24rpx;font-weight:600;border:none;position:relative}
.action-remind{background:rgba(255,59,59,.15);color:var(--red)}
.action-chat{background:rgba(74,144,217,.15);color:var(--blue)}
.unread-dot{margin-left:6rpx;background:var(--red);color:#fff;font-size:18rpx;min-width:32rpx;height:32rpx;border-radius:16rpx;display:inline-flex;align-items:center;justify-content:center;padding:0 8rpx;vertical-align:middle}
.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.empty-icon{font-size:112rpx;opacity:.3}
.empty-text{font-size:28rpx;color:var(--text-muted);margin:16rpx 0}
.btn-back-menu{margin-top:40rpx;padding:16rpx 48rpx;border-radius:40rpx;background:var(--gold);color:#1A1A1A;font-size:28rpx;font-weight:700;border:none}
</style>
