﻿<template>
  <view class="page-staff-board">
    <view class="nav-bar">
      <view class="nav-left">
        <text class="nav-logo">🍸</text>
        <text class="nav-brand">纯瘾大</text>
      </view>
      <view class="nav-right">
        <text class="logout-btn" @tap="onLogout">退出</text>
      </view>
    </view>

    <view class="staff-info">🧑‍🍳 {{ staff.nickname }} — 别摸鱼了！<text v-if="staff.unread > 0" style="color:var(--red);margin-left:16rpx">💬 {{ staff.unread }}条新消息</text></view>

    <view class="board-tabs">
      <view v-for="t in tabs" :key="t.status" class="board-tab" :class="{ active: activeTab === t.status }" @tap="switchTab(t.status)">
        {{ t.label }}
        <text class="tab-count">{{ counts[t.status] || 0 }}</text>
      </view>
    </view>

    <scroll-view class="board-body" scroll-y v-if="orders.length > 0">
      <OrderCard v-for="o in orders" :key="o.id" :order="o">
        <template #actions>
          <view class="board-actions">
            <button class="ba-btn ba-gold" @tap="onDetail(o)">📖 详情</button>
            <button v-if="o.status!==3" class="ba-btn ba-blue" @tap="onChat(o)">💬 聊天</button>
            <button v-if="o.status===0" class="ba-btn ba-gold" @tap="onConfirm(o.id)">✅ 接单</button>
            <button v-if="o.status===0" class="ba-btn ba-red" @tap="onCancel(o.id)">❌ 拒单</button>
            <button v-if="o.status===1" class="ba-btn ba-gold" @tap="onDone(o.id)">✔ 结单</button>
          </view>
        </template>
      </OrderCard>
    </scroll-view>

    <view v-else class="empty-state">
      <text class="empty-icon">📋</text>
      <text class="empty-text">暂无订单</text>
    </view>

    <RecipeModal v-if="recipeVisible" :visible="recipeVisible" :cardNo="recipeCardNo" :items="recipeItems" @close="recipeVisible=false" />
  </view>
</template>

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

export default {
  components: { OrderCard, RecipeModal },
  setup() {
    const staff = useStaffStore()
    const tabs = [{ status: 0, label: '🔔 新订单' },{ status: 1, label: '⚡ 进行中' },{ status: 2, label: '✅ 已完成' }]
    const activeTab = ref(0)
    const orders = ref([])
    const counts = ref({ 0: 0, 1: 0, 2: 0 })
    const recipeVisible = ref(false)
    const recipeCardNo = ref('')
    const recipeItems = ref([])

    async function loadOrders() {
      try {
        const params = { status: activeTab.value }
        if (activeTab.value === 2) params.include_cancel = 1
        const res = await get(API.STAFF_ORDERS, params)
        if (Array.isArray(res)) orders.value = res
      } catch (e) {}
    }
    async function loadCounts() {
      try {
        const [r0, r1, r2] = await Promise.all([
          get(API.STAFF_ORDERS, { status: 0 }),
          get(API.STAFF_ORDERS, { status: 1 }),
          get(API.STAFF_ORDERS, { status: 2, include_cancel: 1 })
        ])
        counts.value = {
          0: Array.isArray(r0) ? r0.length : 0,
          1: Array.isArray(r1) ? r1.length : 0,
          2: Array.isArray(r2) ? r2.length : 0
        }
      } catch (e) {}
    }
    function switchTab(s) { activeTab.value = s; loadOrders() }
    async function onConfirm(id) { try { await post(API.STAFF_CONFIRM, { id }); uni.showToast({ title: '已接单', icon: 'none' }); loadOrders(); loadCounts() } catch (e) {} }
    async function onCancel(id) { try { await post(API.STAFF_CANCEL, { id }); uni.showToast({ title: '已拒单', icon: 'none' }); loadOrders(); loadCounts() } catch (e) {} }
    async function onDone(id) { try { const res = await post(API.STAFF_DONE, { id }); uni.showToast({ title: res && res.released ? '已结单，号码释放' : '已结单', icon: 'none' }); loadOrders(); loadCounts() } catch (e) {} }
    function onDetail(order) { uni.navigateTo({ url: '/pages/staff/detail?id=' + order.id }) }
    function onRecipe(order) { recipeCardNo.value = order.cardNo; recipeItems.value = order.items; recipeVisible.value = true }
    function onChat(order) { uni.setStorageSync('chatCardNo', order.cardNo); uni.navigateTo({ url: '/pages/staff/chat' }) }
    function onLogout() { staff.logout(); uni.redirectTo({ url: '/pages/staff/login' }) }

    onMounted(() => { loadOrders(); loadCounts(); startPoll('board', () => { loadOrders(); loadCounts() }, 10000) })
    onUnmounted(() => stopPoll('board'))

    return { staff, tabs, activeTab, orders, counts, recipeVisible, recipeCardNo, recipeItems, switchTab, onConfirm, onCancel, onDone, onDetail, onRecipe, onChat, onLogout }
  }
}
</script>

<style scoped>
.page-staff-board{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);width:100%}
.nav-bar{height:100rpx;position:sticky;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);flex-shrink:0}
.nav-left{display:flex;align-items:center;gap:16rpx}
.nav-logo{font-size:44rpx}
.nav-brand{font-size:32rpx;font-weight:900;color:var(--gold)}
.logout-btn{font-size:26rpx;color:var(--red)}
.staff-info{background:var(--bg-card);padding:16rpx 32rpx;font-size:24rpx;color:var(--text-dim);border-bottom:1px solid var(--border)}
.board-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0}
.board-tab{flex:1;padding:24rpx;text-align:center;font-size:26rpx;font-weight:600;color:var(--text-dim);border-bottom:4rpx solid transparent}
.board-tab.active{color:var(--gold);border-bottom-color:var(--gold)}
.tab-count{margin-left:8rpx;color:var(--red);font-size:22rpx}
.board-body{flex:1;padding:20rpx}
.board-actions{display:flex;gap:16rpx;flex-wrap:wrap;padding-top:16rpx}
.ba-btn{padding:12rpx 24rpx;border-radius:24rpx;font-size:24rpx;font-weight:600;border:none}
.ba-gold{background:rgba(245,166,35,.15);color:var(--gold)}
.ba-blue{background:rgba(74,144,217,.15);color:var(--blue)}
.ba-red{background:rgba(255,59,59,.15);color:var(--red)}
.empty-state{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column}
.empty-icon{font-size:112rpx;opacity:.3}
.empty-text{font-size:28rpx;color:var(--text-muted);margin-top:16rpx}
</style>
