<template>
  <view class="page">
    <view class="header"><view class="avatar">👤</view><text class="name">{{ userName }}</text><text class="role">服务人员</text></view>
    <view class="stats">
      <view class="stat"><text class="num">{{ stats.todayOrders || 0 }}</text><text class="lbl">今日工单</text></view>
      <view class="stat"><text class="num">{{ stats.completedToday || 0 }}</text><text class="lbl">已完成</text></view>
      <view class="stat"><text class="num red">{{ stats.exceptionCount || 0 }}</text><text class="lbl">异常</text></view>
    </view>
    <button @click="logout" class="btn-logout">退出登录</button>
  </view>
</template>

<script>
import { apiGet } from '@/common/api.js';
export default {
  data() { return { userName: '', stats: {} }; },
  async onShow() {
    try {
      const u = uni.getStorageSync('userInfo');
      this.userName = u?.userName || u?.name || '服务人员';
      const res = await apiGet('/delivery/workbench');
      this.stats = res.data?.data || {};
    } catch(e) {}
  },
  methods: {
    logout() {
      uni.removeStorageSync('token'); uni.removeStorageSync('userInfo');
      uni.reLaunch({ url: '/pages/delivery/login/login' });
    }
  }
};
</script>

<style>
.page { padding: 24rpx; background: #F8F8F8; min-height: 100vh; }
.header { text-align: center; padding: 48rpx 0; }
.avatar { font-size: 80rpx; margin-bottom: 16rpx; }
.name { font-size: 36rpx; font-weight: 700; display: block; }
.role { font-size: 26rpx; color: #999; }
.stats { display: flex; gap: 16rpx; margin-bottom: 32rpx; }
.stat { flex: 1; background: #fff; border-radius: 16rpx; padding: 32rpx; text-align: center; }
.num { font-size: 48rpx; font-weight: 800; display: block; color: #155EEF; } .num.red { color: #FF4D4F; }
.lbl { font-size: 24rpx; color: #999; margin-top: 4rpx; }
.btn-logout { background: #fff; color: #FF4D4F; border: 1px solid #FF4D4F; border-radius: 12rpx; padding: 24rpx; font-size: 30rpx; }
</style>
