<template>
  <view class="page">
    <!-- 顶部品牌栏 -->
    <view class="header" :style="{ paddingTop: (statusBarHeight + 8) + 'px' }">
      <view class="header-inner">
        <view class="merchant">
          <view class="avatar">富</view>
          <text class="name-text">富玉餐饮</text>
        </view>

      </view>
    </view>

    <!-- 悬浮主体区：上浮覆盖到头部 -->
    <view class="content">
      <!-- 通知栏 -->
      <view class="notice-bar" v-if="noticeList.length > 0" @click="handleNoticeClick">
        <view class="notice-tag">公告</view>
        <view class="notice-content">
          <swiper class="notice-swiper" vertical autoplay circular interval="3000" duration="500">
            <swiper-item v-for="(notice, index) in noticeList" :key="index">
              <text class="notice-text">{{ notice.content }}</text>
            </swiper-item>
          </swiper>
        </view>
        <text class="notice-arrow">›</text>
      </view>

      <!-- 核心销售卡片 -->
      <view class="sales-card">
        <view class="sales-main">
          <view class="sales-primary">
            <text class="label">今日销售额（元）</text>
            <text class="primary-value">{{ formatMoney(overview.todaySales || 0) }}</text>
            <view class="compare" v-if="overview.todayCompare != null">
              <text class="compare-text">较昨日</text>
              <text class="compare-value">{{ overview.todayCompare > 0 ? '+' : '' }}{{ overview.todayCompare || 0 }}%</text>
            </view>
          </view>
          <view class="sales-secondary">
            <text class="label">今日订单</text>
            <text class="secondary-value">{{ overview.todayOrders || 0 }}</text>
            <text class="unit">单</text>
          </view>
        </view>
        <view class="sales-footer">
          <view class="footer-item">
            <text class="footer-label">本月销售额</text>
            <text class="footer-value">¥{{ formatMoney(overview.monthSales || 0) }}</text>
          </view>
          <view class="footer-divider"></view>
          <view class="footer-item">
            <text class="footer-label">本月订单</text>
            <text class="footer-value">{{ overview.monthOrders || 0 }}</text>
          </view>
        </view>
        <view class="sales-stats-link" @click="navigateTo('/pages/statistics/overview')">
          <text class="stats-link-text">查看完整数据统计</text>
          <text class="stats-link-arrow">›</text>
        </view>
      </view>

      <!-- 设备概况 -->
      <view class="device-card">
        <view class="card-title">
          <text>设备概况</text>
          <text class="card-more" @click="switchToTab('/pages/device/list')">查看全部 ›</text>
        </view>
        <view class="device-row">
          <view class="device-box online">
            <view class="device-top">
              <view class="device-dot online-dot"></view>
              <text class="device-label">在线设备</text>
            </view>
            <text class="device-num">{{ overview.onlineDevices || 0 }}</text>
          </view>
          <view class="device-box offline">
            <view class="device-top">
              <view class="device-dot offline-dot"></view>
              <text class="device-label">离线设备</text>
            </view>
            <text class="device-num">{{ overview.offlineDevices || 0 }}</text>
          </view>
        </view>
      </view>

      <!-- 待办事项 -->
      <view class="todo-card">
        <view class="todo-row">
          <view class="todo-item" v-for="item in todoItems" :key="item.key" @click="navigateTo(item.url)">
            <text :class="['todo-value', { active: item.count > 0 }]">{{ item.count }}</text>
            <text class="todo-label">{{ item.label }}</text>
          </view>
        </view>
      </view>

            <!-- 营销中心 -->
      <view class="quick-card">
        <view class="card-title">
          <text>营销中心</text>
        </view>
        <view class="quick-grid">
          <view class="quick-item" @click="navigateTo('/pages/marketing/activity-list')">
            <view class="quick-icon">
              <view class="icon-apply"></view>
            </view>
            <text class="quick-name">活动管理</text>
          </view>
          <view class="quick-item" @click="navigateTo('/pages/marketing/coupon-list')">
            <view class="quick-icon">
              <view class="icon-replenisher"></view>
            </view>
            <text class="quick-name">优惠券</text>
          </view>
          <view class="quick-item" @click="navigateTo('/pages/orders/refund-list')">
            <view class="quick-icon">
              <view class="icon-staff"></view>
            </view>
            <text class="quick-name">退款管理</text>
          </view>
          <view class="quick-item" @click="navigateTo('/pages/products/master-library')">
            <view class="quick-icon">
              <view class="icon-shop-quick"></view>
            </view>
            <text class="quick-name">商品总库</text>
          </view>
        </view>
      </view>

      <!-- 商户运营 -->
      <view class="quick-card">
        <view class="card-title">
          <text>商户运营</text>
        </view>
        <view class="quick-grid">
          <view class="quick-item" @click="navigateTo('/pages/products/apply')">
            <view class="quick-icon">
              <view class="icon-apply"></view>
            </view>
            <text class="quick-name">新品申请</text>
          </view>
          <view class="quick-item" @click="navigateTo('/pages/replenish/index')">
            <view class="quick-icon">
              <view class="icon-replenish"></view>
            </view>
            <text class="quick-name">补货管理</text>
          </view>
          <view class="quick-item" @click="navigateTo('/pages/replenisher/list')">
            <view class="quick-icon">
              <view class="icon-replenisher"></view>
            </view>
            <text class="quick-name">补货员管理</text>
          </view>
          <view class="quick-item" @click="navigateTo('/pages/staff/list')">
            <view class="quick-icon">
              <view class="icon-staff"></view>
            </view>
            <text class="quick-name">人员管理</text>
          </view>
          <view class="quick-item" @click="navigateTo('/pages/shop/list')">
            <view class="quick-icon">
              <view class="icon-shop-quick"></view>
            </view>
            <text class="quick-name">门店管理</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 自定义TabBar -->
    <CustomTabBar />
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { logger } from '@/utils/logger';
import { getDashboardOverview, getTodoList } from '@/api/dashboard';
import { formatMoney as formatMoneyUtil } from '@/utils/common';
import { get } from '@/utils/request';
import CustomTabBar from '@/components/CustomTabBar.vue';

const statusBarHeight = ref(20); // 状态栏高度，默认20px
const overview = ref<any>({});
const todo = ref<any>({
  pendingRefunds: 0,
  unpaidOrders: 0,
  lowStockItems: 0
});

// 系统通知列表（从后端获取已发布的公告）
const noticeList = ref<any[]>([]);

const todoItems = computed(() => [
  { key: 'pendingRefunds', label: '待处理退款', count: todo.value.pendingRefunds || 0, url: '/pages/orders/list?tab=refund' },
  { key: 'unpaidOrders', label: '未支付订单', count: todo.value.unpaidOrders || 0, url: '/pages/orders/list?tab=unpaid' },
  { key: 'lowStockItems', label: '待补货', count: todo.value.lowStockItems || 0, url: '/pages/inventory/warning' }
]);

const formatMoney = (amount: number | string) => {
  const num = typeof amount === 'string' ? parseFloat(amount) : amount;
  return formatMoneyUtil(num || 0);
};

const navigateTo = (url: string) => {
  uni.navigateTo({ url });
};

const switchToTab = (url: string) => {
  uni.switchTab({ url });
};

const handleNoticeClick = () => {
  uni.navigateTo({ url: '/pages/announcement/list' });
};

const loadData = async () => {
  try {
    const [overviewRes, todoRes, announcements] = await Promise.all([
      getDashboardOverview(),
      getTodoList(),
      get('/announcement/list', { status: 1, page: 1, pageSize: 5 }).then((data: any) => data?.list || [])
    ]);
    overview.value = overviewRes || {};
    if (todoRes) {
      todo.value = {
        pendingRefunds: todoRes.pendingRefunds || 0,
        unpaidOrders: todoRes.unpaidOrders || 0,
        lowStockItems: todoRes.lowStockItems || 0
      };
    }
    noticeList.value = (announcements || []).map((item: any) => ({
      ...item,
      content: item.title
    }));
  } catch (error) {
    logger.warn('获取仪表盘数据失败', error);
  }
};

onMounted(() => {
  try {
    const systemInfo = uni.getSystemInfoSync();
    statusBarHeight.value = systemInfo.statusBarHeight || 44;
  } catch (e) {
    statusBarHeight.value = 44;
  }
  loadData();
});
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: $bg-color-page;
  padding-bottom: 140rpx;
}

/* ========== 顶部品牌栏 ========== */
.header {
  background: $primary-color;
  padding: 0 32rpx 90rpx;
  position: relative;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.merchant {
  display: flex;
  align-items: center;
  flex: 1;
}

.avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 18rpx;
  background: $bg-color-card;
  color: $text-color-primary;
  font-size: 34rpx;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
}

.name-text {
  font-size: 30rpx;
  font-weight: 700;
  color: $text-color-primary;
}

/* ========== 内容区域（上浮） ========== */
.content {
  margin-top: -50rpx;
  padding: 0 24rpx;
  position: relative;
  z-index: 2;
}

/* 通用卡片标题 */
.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;

  > text:first-child {
    font-size: 28rpx;
    font-weight: 600;
    color: $text-color-primary;
  }
}

.card-more {
  font-size: 22rpx;
  color: $text-color-muted;

  &:active { opacity: 0.6; }
}

.card-sub {
  font-size: 22rpx;
  color: $text-color-muted;
}

/* ========== 通知栏 ========== */
.notice-bar {
  background: $bg-color-card;
  padding: 14rpx 20rpx;
  border-radius: 14rpx;
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

  &:active { opacity: 0.85; }
}

.notice-tag {
  padding: 4rpx 12rpx;
  background: $accent-color-bg;
  color: $accent-color;
  font-size: 20rpx;
  font-weight: 600;
  border-radius: 6rpx;
  margin-right: 12rpx;
  flex-shrink: 0;
}

.notice-content { flex: 1; overflow: hidden; }
.notice-swiper { height: 36rpx; }
.notice-text {
  font-size: 24rpx;
  color: $text-color-primary;
  line-height: 36rpx;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-arrow {
  font-size: 36rpx;
  color: $text-color-placeholder;
  margin-left: 12rpx;
}

/* ========== 核心销售卡片 ========== */
.sales-card {
  background: $bg-color-card;
  border-radius: 18rpx;
  padding: 24rpx;
  margin-bottom: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.sales-main {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid $border-color-light;
}

.sales-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.sales-primary .label {
  font-size: 22rpx;
  color: $text-color-tertiary;
  margin-bottom: 8rpx;
}
.primary-value {
  font-size: 56rpx;
  font-weight: 700;
  color: $text-color-primary;
  line-height: 1;
  margin-bottom: 8rpx;
}
.compare {
  display: flex;
  align-items: center;
  font-size: 22rpx;
}
.compare-text { color: $text-color-muted; margin-right: 8rpx; }
.compare-value { color: $text-color-secondary; font-weight: 500; }

.sales-secondary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
}

.sales-secondary .label {
  font-size: 22rpx;
  color: $text-color-tertiary;
  margin-bottom: 8rpx;
}
.secondary-value {
  font-size: 36rpx;
  font-weight: 700;
  color: $text-color-primary;
  line-height: 1;
}
.unit {
  font-size: 22rpx;
  color: $text-color-muted;
  margin-top: 6rpx;
}

.sales-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
  gap: 0;
}
.footer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.footer-label {
  font-size: 22rpx;
  color: $text-color-tertiary;
  margin-bottom: 6rpx;
}
.footer-value {
  font-size: 28rpx;
  font-weight: 600;
  color: $text-color-primary;
}
.footer-divider {
  width: 1rpx;
  height: 36rpx;
  background: $border-color;
}

/* ========== 设备卡片 ========== */
.device-card {
  background: $bg-color-card;
  border-radius: 18rpx;
  padding: 20rpx;
  margin-bottom: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.device-row {
  display: flex;
  gap: 16rpx;
}

.device-box {
  flex: 1;
  padding: 18rpx;
  border-radius: 14rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  &.online { background: $primary-color-bg; }
  &.offline { background: $accent-color-bg; }

  &:active { opacity: 0.85; }
}

.device-top {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.device-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  margin-right: 8rpx;

  &.online-dot { background: $primary-color; }
  &.offline-dot { background: $accent-color; }
}

.device-label {
  font-size: 22rpx;
  color: $text-color-secondary;
}

.device-num {
  font-size: 40rpx;
  font-weight: 700;
  color: $text-color-primary;
  line-height: 1;
}

.sales-stats-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14rpx;
  padding: 12rpx 0 0;
  border-top: 1rpx solid $border-color-light;

  &:active { opacity: 0.7; }
}

.stats-link-text {
  font-size: 24rpx;
  color: $primary-color;
  font-weight: 500;
}

.stats-link-arrow {
  font-size: 24rpx;
  color: $primary-color;
  margin-left: 4rpx;
}

/* ========== 待办事项 ========== */
.todo-card {
  background: $bg-color-card;
  border-radius: 18rpx;
  padding: 24rpx 20rpx;
  margin-bottom: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.todo-row {
  display: flex;
  justify-content: space-between;
}

.todo-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8rpx 6rpx;

  &:active { opacity: 0.7; }
}

.todo-value {
  font-size: 32rpx;
  font-weight: 700;
  color: $text-color-placeholder;
  line-height: 1.2;

  &.active { color: $primary-color; }
}

.todo-label {
  font-size: 22rpx;
  color: $text-color-secondary;
  margin-top: 2rpx;
  white-space: nowrap;
}


/* ========== 商户运营 ========== */
.quick-card {
  background: $bg-color-card;
  border-radius: 18rpx;
  padding: 20rpx 16rpx 16rpx;
  margin-bottom: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

  .card-title {
    padding: 0 8rpx;
  }
}

.quick-grid {
  display: flex;
  justify-content: space-between;
}

.quick-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rpx 0;

  &:active .quick-icon { transform: scale(0.92); }
}

.quick-icon {
  width: 72rpx;
  height: 72rpx;
  border-radius: 18rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
  transition: transform 0.15s;
  background: $primary-color-bg;
}

.quick-name {
  font-size: 22rpx;
  color: $text-color-primary;
}

.icon-apply {
  width: 36rpx;
  height: 36rpx;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3rpx solid $primary-color;
    border-radius: 6rpx;
  }
  &::after {
    content: '+';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28rpx;
    color: $primary-color;
    font-weight: 700;
    line-height: 1;
  }
}

.icon-replenisher {
  width: 36rpx;
  height: 36rpx;
  position: relative;

  // Box body
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32rpx;
    height: 24rpx;
    background: $primary-color;
    border-radius: 5rpx;
  }
  // Handle on top
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16rpx;
    height: 9rpx;
    border: 3rpx solid $primary-color;
    border-radius: 5rpx 5rpx 0 0;
    border-bottom: none;
  }
}

.icon-replenish {
  width: 36rpx; height: 36rpx; position: relative;
  &::before { content: ''; position: absolute; top: 2rpx; left: 2rpx; right: 2rpx; bottom: 2rpx; border: 2.5rpx solid $primary-color; border-radius: 5rpx; }
  &::after { content: ''; position: absolute; top: 12rpx; left: 8rpx; right: 8rpx; height: 2.5rpx; background: $primary-color; border-radius: 1rpx; box-shadow: 0 8rpx 0 $primary-color, 0 16rpx 0 $primary-color; }
}

.icon-staff {
  width: 32rpx;
  height: 36rpx;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18rpx;
    height: 18rpx;
    background: $primary-color;
    border-radius: 50%;
  }
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30rpx;
    height: 14rpx;
    background: $primary-color;
    border-radius: 14rpx 14rpx 0 0;
  }
}

.icon-shop-quick {
  width: 36rpx;
  height: 36rpx;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20rpx solid transparent;
    border-right: 20rpx solid transparent;
    border-bottom: 14rpx solid $primary-color;
  }
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30rpx;
    height: 20rpx;
    background: $primary-color;
    border-radius: 2rpx;
  }
}
</style>


