<template>
  <view class="page">
    <view class="yellow-header">
      <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
      <view class="header-content">
        <image class="header-logout" src="/static/icon-logout.svg" @click="handleLogout" />
        <text class="header-title">补货管理</text>
      </view>
    </view>
    <view class="header-placeholder" :style="{ height: (statusBarHeight + 44) + 'px' }"></view>

    <!-- 搜索 -->
    <view class="search-bar">
      <view class="search-icon"></view>
      <input class="search-input" v-model="searchKeyword" placeholder="搜索设备ID或名称" confirm-type="search" />
      <view class="search-clear" v-if="searchKeyword" @click="searchKeyword = ''"><text>✕</text></view>
    </view>

    <!-- 加载 -->
    <view class="load-tip" v-if="loading">
      <view class="dot-row"><view class="pulse-dot"></view><view class="pulse-dot"></view><view class="pulse-dot"></view></view>
    </view>

    <!-- 设备列表 -->
    <scroll-view class="device-scroll" scroll-y v-else>
      <view class="empty-state" v-if="deviceList.length === 0">
        <view class="empty-icon-box"><view class="empty-device-icon"></view></view>
        <text class="empty-text">暂无绑定的设备</text>
        <text class="empty-hint">请联系管理员绑定设备后开始补货</text>
      </view>

      <view class="empty-state" v-else-if="filteredDeviceList.length === 0">
        <text class="empty-text">未找到匹配设备</text>
      </view>

      <view class="device-card" v-for="(device, index) in filteredDeviceList" :key="device.deviceId || index" @click="goToOperation(device)">
        <view class="card-left">
          <view class="card-icon"></view>
        </view>
        <view class="card-main">
          <text class="card-name">{{ device.deviceId }} - {{ device.name || '' }}</text>
          <view class="card-stats">
            <view class="cs-item">
              <text class="cs-label">标准</text>
              <text class="cs-value">{{ device.standardStock || 0 }}</text>
            </view>
            <view class="cs-item">
              <text class="cs-label">剩余</text>
              <text class="cs-value" :class="{ warn: device.remainingStock < device.standardStock }">{{ device.remainingStock || 0 }}</text>
            </view>
            <view class="cs-item" v-if="device.pendingOrderCount > 0">
              <text class="cs-label">待补</text>
              <text class="cs-value accent">{{ device.pendingOrderCount }}</text>
            </view>
          </view>
        </view>
        <view class="card-badge" :class="device.remainingStock < device.standardStock ? 'warn' : 'normal'">
          <text>{{ device.remainingStock < device.standardStock ? '待补货' : '正常' }}</text>
        </view>
        <view class="card-audit" @click.stop="goToAudit(device)"><text>库存盘点</text></view>
      </view>
    </scroll-view>

    <!-- 扫码浮钮 -->
    <view class="scan-fab" @click="handleScan">
      <view class="scan-icon">
        <view class="scan-beam"></view>
      </view>
      <text class="scan-label">扫码开门</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { getDeviceList } from '@/api/replenish';
import { clearAuth } from '@/utils/auth';

const statusBarHeight = ref(0);
const deviceList = ref<any[]>([]);
const loading = ref(true);
const searchKeyword = ref('');

const filteredDeviceList = computed(() => {
  const kw = searchKeyword.value.trim().toLowerCase();
  if (!kw) return deviceList.value;
  return deviceList.value.filter(d => {
    const id = (d.deviceId || '').toLowerCase();
    const name = (d.name || '').toLowerCase();
    return id.includes(kw) || name.includes(kw);
  });
});

const loadData = async () => {
  loading.value = true;
  try {
    const devices = await getDeviceList();
    deviceList.value = devices || [];
  } catch { /* ignore */ }
  finally { loading.value = false; }
};

const goToOperation = (device: any) => {
  uni.navigateTo({ url: `/pages/replenish/operation?deviceId=${device.deviceId}` });
};

const goToAudit = (device: any) => {
  uni.navigateTo({ url: `/pages/replenish/audit?deviceId=${device.deviceId}` });
};

const handleScan = () => {
  uni.navigateTo({ url: '/pages/replenish/scan' });
};

const handleLogout = () => {
  uni.showModal({
    title: '退出登录',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) { clearAuth(); uni.reLaunch({ url: '/pages/login/login' }); }
    }
  });
};

onMounted(() => {
  const info = uni.getSystemInfoSync();
  statusBarHeight.value = info.statusBarHeight || 20;
});

onShow(async () => { await loadData(); });
</script>

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

// ====== Header ======
.yellow-header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: $primary-color; padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); }
.header-content { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 16rpx; position: relative; }
.header-title { font-size: $font-size-xl; font-weight: 700; color: $text-color-primary; }
.header-logout { position: absolute; left: 24rpx; width: 40rpx; height: 40rpx; &:active { opacity: 0.7; } }
.header-placeholder { width: 100%; }

// ====== Search ======
.search-bar { display: flex; align-items: center; margin: 16rpx 24rpx 8rpx; padding: 0 16rpx; height: 60rpx; background: $bg-color-card; border: 1rpx solid $border-color; border-radius: $radius-base; }
.search-icon { width: 28rpx; height: 28rpx; border: 2.5rpx solid $text-color-muted; border-radius: 50%; position: relative; flex-shrink: 0; margin-right: 10rpx;
  &::after { content: ''; position: absolute; bottom: -2rpx; right: -4rpx; width: 2.5rpx; height: 10rpx; background: $text-color-muted; border-radius: 1rpx; transform: rotate(-45deg); }
}
.search-input { flex: 1; font-size: $font-size-sm; color: $text-color-primary; height: 100%; }
.search-clear { width: 36rpx; height: 36rpx; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: $bg-color-secondary; flex-shrink: 0; margin-left: 8rpx;
  text { font-size: 20rpx; color: $text-color-muted; line-height: 1; }
}

// ====== Loading ======
.load-tip { display: flex; justify-content: center; padding: 200rpx 0; }
.dot-row { display: flex; gap: $spacing-1; }
.pulse-dot { width: 10rpx; height: 10rpx; background: $text-color-placeholder; border-radius: 50%; animation: pulse 1.2s ease-in-out infinite;
  &:nth-child(2) { animation-delay: 0.2s; } &:nth-child(3) { animation-delay: 0.4s; }
}
@keyframes pulse { 0%,80%,100% { transform: scale(0.5); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

// ====== Device ======
.device-scroll { flex: 1; height: 0; }
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 160rpx 0;
  .empty-icon-box { width: 120rpx; height: 120rpx; background: $bg-color-secondary; border-radius: $radius-xl; display: flex; align-items: center; justify-content: center; margin-bottom: $spacing-3; }
  .empty-device-icon { width: 44rpx; height: 36rpx; border: 3rpx solid $text-color-placeholder; border-radius: 6rpx; position: relative;
    &::after { content: ''; position: absolute; bottom: -8rpx; left: 50%; transform: translateX(-50%); width: 22rpx; height: 6rpx; background: $text-color-placeholder; border-radius: 0 0 4rpx 4rpx; }
  }
  .empty-text { font-size: $font-size-base; color: $text-color-secondary; margin-bottom: $spacing-1; }
  .empty-hint { font-size: $font-size-sm; color: $text-color-muted; }
}

.device-card { display: flex; align-items: center; gap: 16rpx; margin: 16rpx 24rpx; padding: 24rpx; background: $bg-color-card; border-radius: $radius-md; box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  &:active { opacity: 0.7; }
}
.card-left { flex-shrink: 0; }
.card-icon { width: 56rpx; height: 56rpx; background: $success-color-bg; border-radius: $radius-base; position: relative;
  &::before { content: ''; position: absolute; top: 10rpx; left: 50%; transform: translateX(-50%); width: 24rpx; height: 18rpx; border: 2.5rpx solid $success-color; border-radius: 4rpx; }
  &::after { content: ''; position: absolute; bottom: 6rpx; left: 50%; transform: translateX(-50%); width: 14rpx; height: 5rpx; background: $success-color; border-radius: 0 0 3rpx 3rpx; }
}
.card-main { flex: 1; min-width: 0; }
.card-name { display: block; font-size: $font-size-base; font-weight: 600; color: $text-color-primary; margin-bottom: 10rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-stats { display: flex; gap: 24rpx; }
.cs-item { display: flex; align-items: baseline; gap: 6rpx; }
.cs-label { font-size: 22rpx; color: $text-color-muted; }
.cs-value { font-size: $font-size-base; font-weight: 700; color: $text-color-primary;
  &.warn { color: $warning-color; }
  &.accent { color: $accent-color; }
}
.card-badge { padding: 8rpx 16rpx; border-radius: $radius-sm; font-size: 22rpx; font-weight: 500; flex-shrink: 0;
  &.normal { background: $success-color-bg; color: $success-color; }
  &.warn { background: $warning-color-bg; color: $warning-color; }
}
.card-audit { margin-left: 12rpx; padding: 8rpx 16rpx; border-radius: $radius-sm; background: $info-color-bg; font-size: 22rpx; color: $info-color; font-weight: 500; flex-shrink: 0;
  &:active { opacity: 0.7; }
}

.scan-fab { position: fixed; left: 50%; bottom: calc(80rpx + env(safe-area-inset-bottom)); transform: translateX(-50%); width: 156rpx; height: 156rpx; border-radius: 50%; background: $primary-color; box-shadow: 0 12rpx 36rpx rgba(255,193,7,0.4); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10rpx; z-index: 1000;
  &:active { transform: translateX(-50%) scale(0.92); background: $primary-color-dark; }
}
.scan-label { font-size: 22rpx; font-weight: 600; color: $text-color-primary; line-height: 1; }
.scan-icon { width: 56rpx; height: 56rpx; position: relative;
  &::before { content: ''; position: absolute; top: 0; left: 0; width: 16rpx; height: 16rpx; border-top: 4rpx solid $text-color-primary; border-left: 4rpx solid $text-color-primary; border-radius: 4rpx 0 0 0; }
  &::after { content: ''; position: absolute; bottom: 0; right: 0; width: 16rpx; height: 16rpx; border-bottom: 4rpx solid $text-color-primary; border-right: 4rpx solid $text-color-primary; border-radius: 0 0 4rpx 0; }
}
.scan-beam { position: absolute; top: 50%; left: 16rpx; right: 16rpx; height: 3rpx; background: $text-color-primary; border-radius: 2rpx; transform: translateY(-50%); opacity: 0.85; }
</style>
