<template>
  <view class="page">
    <!-- 导航栏 -->
    <NavBar title="设备管理" />
    
    <!-- 统计卡片 -->
    <view class="stats-section">
      <view class="stats-grid">
        <view class="stat-card main">
          <text class="stat-value">{{ deviceStats.totalCount }}</text>
          <text class="stat-label">设备总数</text>
        </view>
        <view class="stat-card online">
          <view class="stat-dot green"></view>
          <text class="stat-value">{{ deviceStats.onlineCount }}</text>
          <text class="stat-label">在线</text>
        </view>
        <view class="stat-card offline">
          <view class="stat-dot amber"></view>
          <text class="stat-value">{{ deviceStats.offlineCount }}</text>
          <text class="stat-label">离线</text>
        </view>
      </view>
    </view>
    
    <!-- 设备列表 -->
    <scroll-view 
      class="device-scroll" 
      scroll-y 
      @scrolltolower="loadMore"
    >
      <view class="device-list">
        <view 
          class="device-card" 
          v-for="device in deviceList" 
          :key="device.id"
          @click="goDetail(device.id)"
        >
          <!-- 第一行：名称 + 编号 + 状态 -->
          <view class="card-row-main">
            <view class="device-title">
              <text class="device-name">{{ device.name }}</text>
              <text class="device-no">{{ device.deviceNo }}</text>
            </view>
            <view class="status-tag" :class="getStatusClass(device.status)">
              <text>{{ getStatusText(device.status) }}</text>
            </view>
          </view>
          
          <!-- 第二行：门店 + 销售数据 + 库存 -->
          <view class="card-row-info">
            <view class="info-left">
              <text class="info-text">{{ device.shopName }}</text>
              <text class="info-divider" v-if="device.status === 1">·</text>
              <text class="info-temp" v-if="device.status === 1">{{ device.temperature }}°C</text>
            </view>
            <view class="info-right">
              <text class="sales-value">¥{{ formatMoney(device.todaySales) }}</text>
              <text class="stock-value">{{ device.inventory }}/{{ device.capacity }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="loading-more" v-if="loading">
        <view class="loading-spinner"></view>
        <text>加载中...</text>
      </view>
      
      <view class="no-more" v-if="!hasMore && deviceList.length > 0">
        <text>— 没有更多了 —</text>
      </view>
      
      <view class="empty-state" v-if="!loading && deviceList.length === 0">
        <view class="empty-icon">
          <view class="empty-icon-inner"></view>
        </view>
        <text class="empty-text">暂无设备数据</text>
      </view>
    </scroll-view>
    
    <!-- 自定义TabBar -->
    <CustomTabBar />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import NavBar from '@/components/NavBar.vue';
import CustomTabBar from '@/components/CustomTabBar.vue';
import { getDeviceList, getDeviceStats } from '@/api/device';
import { DeviceStatusText, DeviceStatusColor } from '@/mock/device';
import { formatMoney as formatMoneyUtil, formatTime as formatTimeUtil } from '@/utils/common';

const deviceList = ref<any[]>([]);
const deviceStats = ref({
  totalCount: 0,
  onlineCount: 0,
  offlineCount: 0,
  maintenanceCount: 0,
  errorCount: 0
});
const loading = ref(false);
const hasMore = ref(true);
const page = ref(1);
const pageSize = 10;

const formatMoney = formatMoneyUtil;
const formatTime = formatTimeUtil;

const getStatusText = (status: number) => DeviceStatusText[status] || '未知';

const getStatusClass = (status: number) => {
  if (status === 1) return 'online';
  if (status === 0) return 'offline';
  if (status === 2) return 'maintenance';
  return 'offline';
};

const loadStats = async () => {
  try {
    deviceStats.value = await getDeviceStats();
  } catch (error) {
    console.error('加载设备统计失败', error);
  }
};

const loadDevices = async () => {
  loading.value = true;
  try {
    const res = await getDeviceList({
      page: page.value,
      pageSize
    });
    
    if (page.value === 1) {
      deviceList.value = res.list;
    } else {
      deviceList.value = [...deviceList.value, ...res.list];
    }
    
    hasMore.value = deviceList.value.length < res.total;
  } catch (error) {
    console.error('加载设备列表失败', error);
  } finally {
    loading.value = false;
  }
};

const loadMore = () => {
  if (loading.value || !hasMore.value) return;
  page.value++;
  loadDevices();
};

const goDetail = (deviceId: number) => {
  uni.navigateTo({ url: `/pages/device/detail?id=${deviceId}` });
};

onMounted(() => {
  loadStats();
  loadDevices();
});
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  padding-bottom: 200rpx;
}

/* 统计区域 */
.stats-section {
  padding: 16rpx 24rpx;
  background: #ffffff;
  border-bottom: 1rpx solid #e2e8f0;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 12rpx;
}

.stat-card {
  background: #f8fafc;
  border: 1rpx solid #e2e8f0;
  border-radius: 16rpx;
  padding: 24rpx 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  
  &.main {
    background: #ecfdf5;
    border-color: #10b981;
  }
  
  .stat-dot {
    position: absolute;
    top: 16rpx;
    right: 16rpx;
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    
    &.green { background: #10b981; }
    &.amber { background: #f97316; }
  }
  
  .stat-value {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4rpx;
  }
  
  .stat-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22rpx;
    color: #64748b;
  }
}

/* 设备列表 */
.device-scroll {
  flex: 1;
  height: 0;
}

.device-list {
  padding: 12rpx 24rpx;
}

.device-card {
  background: #ffffff;
  border: 1rpx solid #e2e8f0;
  border-radius: 12rpx;
  margin-bottom: 8rpx;
  padding: 14rpx 16rpx;
  transition: transform 0.15s;
  
  &:active {
    transform: scale(0.98);
  }
}

/* 第一行：名称 + 状态 */
.card-row-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.device-title {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  
  .device-name {
    font-size: 28rpx;
    font-weight: 600;
    color: #1e293b;
    margin-right: 12rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .device-no {
    font-size: 20rpx;
    color: #94a3b8;
    font-family: monospace;
    flex-shrink: 0;
  }
}

.status-tag {
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 20rpx;
  font-weight: 500;
  flex-shrink: 0;
  margin-left: 12rpx;
  
  &.online {
    background: #ecfdf5;
    color: #10b981;
  }
  
  &.offline {
    background: #fff7ed;
    color: #f97316;
  }
  
  &.maintenance {
    background: #faf5ff;
    color: #a855f7;
  }
}

/* 第二行：门店 + 销售数据 */
.card-row-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  
  .info-text {
    font-size: 22rpx;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .info-divider {
    margin: 0 8rpx;
    color: #cbd5e1;
    font-size: 22rpx;
  }
  
  .info-temp {
    font-size: 22rpx;
    color: #10b981;
    font-weight: 500;
  }
}

.info-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 16rpx;
  
  .sales-value {
    font-size: 24rpx;
    font-weight: 600;
    color: #f97316;
    margin-right: 16rpx;
  }
  
  .stock-value {
    font-size: 22rpx;
    color: #64748b;
    background: #f1f5f9;
    padding: 4rpx 10rpx;
    border-radius: 4rpx;
  }
}

/* 加载状态 */
.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  padding: 32rpx;
  color: #94a3b8;
  font-size: 24rpx;
  
  .loading-spinner {
    width: 32rpx;
    height: 32rpx;
    border: 3rpx solid #e2e8f0;
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.no-more {
  text-align: center;
  padding: 32rpx;
  font-size: 24rpx;
  color: #cbd5e1;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
  
  .empty-icon {
    width: 120rpx;
    height: 120rpx;
    background: #f1f5f9;
    border-radius: 24rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .empty-icon-inner {
      width: 32rpx;
      height: 48rpx;
      border: 4rpx solid #cbd5e1;
      border-radius: 6rpx;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 8rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 10rpx;
        height: 4rpx;
        background: #cbd5e1;
        border-radius: 2rpx;
      }
    }
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #94a3b8;
  }
}
</style>
