<template>
  <view class="page">
    <NavBar title="门店管理" :showBack="true" />

    <scroll-view class="shop-scroll" scroll-y @scrolltolower="loadMore">
      <!-- 骨架屏 -->
      <view class="skeleton-list" v-if="isFirstLoad">
        <view class="skeleton-card" v-for="i in 3" :key="i">
          <view class="sk-row"><view class="sk-box w-48"></view><view class="sk-box w-16"></view></view>
          <view class="sk-row"><view class="sk-box w-36"></view><view class="sk-box w-24"></view></view>
          <view class="sk-row sk-stats"><view class="sk-box w-16"></view><view class="sk-box w-20"></view><view class="sk-box w-20"></view></view>
        </view>
      </view>

      <!-- 错误状态 -->
      <view class="error-state" v-if="errorMsg && !isFirstLoad">
        <view class="error-icon"></view>
        <text class="error-text">{{ errorMsg }}</text>
        <view class="retry-btn" @click="onRetry"><text>点击重试</text></view>
      </view>

      <!-- 门店列表 -->
      <view class="shop-list" v-if="!isFirstLoad && !errorMsg">
        <view class="shop-card" v-for="shop in shopList" :key="shop.id" @click="goDetail(shop.id)">
          <view class="card-header">
            <view class="shop-info">
              <text class="shop-name">{{ shop.name }}</text>
              <text class="shop-no">{{ shop.address ? shop.address.slice(0, 20) : '' }}</text>
            </view>
            <view class="status-badge" :class="getStatusClass(shop.status)">
              <view class="status-dot"></view>
              <text>{{ getStatusText(shop.status) }}</text>
            </view>
          </view>

          <view class="card-body">
            <view class="info-row" v-if="shop.contactName || shop.contactPhone">
              <text class="info-label">联系人</text>
              <text class="info-text">{{ shop.contactName || '' }} {{ shop.contactPhone || '' }}</text>
            </view>
          </view>

          <view class="card-stats">
            <view class="stat-item">
              <text class="stat-value">{{ shop.deviceCount || 0 }}</text>
              <text class="stat-label">设备数</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">¥{{ formatMoney(shop.todaySales) }}</text>
              <text class="stat-label">今日销售</text>
            </view>
            <view class="stat-item">
              <text class="stat-value">¥{{ formatMoney(shop.monthSales) }}</text>
              <text class="stat-label">本月销售</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <view class="loading-more" v-if="isLoadingMore">
        <view class="loading-spinner"></view>
        <text>加载中</text>
      </view>
      <view class="no-more" v-if="!hasMore && shopList.length > 0 && !isFirstLoad">没有更多了</view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="!isFirstLoad && !errorMsg && shopList.length === 0">
        <view class="empty-icon-box">
          <view class="empty-shop-icon"></view>
        </view>
        <text class="empty-title">暂无门店</text>
        <text class="empty-desc">门店数据将在此处展示</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import NavBar from '@/components/NavBar.vue';
import { getShopList } from '@/api/shop';
import { ShopStatusText } from '@/utils/constants';
import { formatMoney as formatMoneyUtil } from '@/utils/common';

const shopList = ref<any[]>([]);
const isFirstLoad = ref(true);
const isLoadingMore = ref(false);
const hasMore = ref(true);
const page = ref(1);
const errorMsg = ref('');

const formatMoney = formatMoneyUtil;

const getStatusText = (status: number) => ShopStatusText[status] || '未知';
const getStatusClass = (status: number) => status === 1 ? 'active' : 'inactive';

const loadShops = async () => {
  errorMsg.value = '';
  try {
    const res = await getShopList({ page: page.value, pageSize: 10 });
    if (!res) return;

    if (page.value === 1) {
      shopList.value = res.list || [];
    } else {
      shopList.value = [...shopList.value, ...(res.list || [])];
    }
    hasMore.value = shopList.value.length < (res.total || 0);
  } catch (e: any) {
    if (page.value === 1) {
      errorMsg.value = e?.message || '加载失败，请检查网络后重试';
      shopList.value = [];
    }
  } finally {
    isFirstLoad.value = false;
    isLoadingMore.value = false;
  }
};

const loadMore = () => {
  if (isLoadingMore.value || !hasMore.value || isFirstLoad.value) return;
  isLoadingMore.value = true;
  page.value++;
  loadShops();
};

const onRetry = () => {
  page.value = 1;
  hasMore.value = true;
  isFirstLoad.value = true;
  loadShops();
};

const goDetail = (shopId: string) => {
  uni.navigateTo({ url: `/pages/shop/detail?id=${shopId}` });
};

onMounted(() => loadShops());
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  background: $bg-color-page;
  display: flex;
  flex-direction: column;
}
.shop-scroll { flex: 1; height: 0; }
.shop-list { padding: $spacing-2 $spacing-3; }

// ====== Skeleton ======
.skeleton-list { padding: $spacing-2 $spacing-3; }
.skeleton-card {
  padding: $spacing-3;
  margin-bottom: $spacing-2;
  background: $bg-color-card;
  border-radius: $radius-md;
  .sk-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: $spacing-2; }
  .sk-stats { justify-content: space-around; padding-top: $spacing-2; border-top: 1rpx solid $border-color-light; }
  .sk-box { height: 28rpx; background: $bg-color-page; border-radius: $radius-xs; }
  .w-16 { width: 16%; } .w-20 { width: 20%; } .w-24 { width: 24%; } .w-36 { width: 36%; } .w-48 { width: 48%; }
}

// ====== Error ======
.error-state {
  display: flex; flex-direction: column; align-items: center; padding: 160rpx $spacing-4;
  .error-icon {
    width: 80rpx; height: 80rpx; border-radius: 50%; background: $error-color-bg; margin-bottom: $spacing-3; position: relative;
    &::before { content: '!'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 40rpx; font-weight: 700; color: $error-color; line-height: 1; }
  }
  .error-text { font-size: $font-size-base; color: $text-color-secondary; margin-bottom: $spacing-4; }
  .retry-btn { padding: $spacing-2 $spacing-6; background: $primary-color; border-radius: $radius-full; text { font-size: $font-size-base; color: $text-color-primary; font-weight: 500; } }
}

// ====== Card ======
.shop-card {
  margin-bottom: $spacing-2;
  padding: $spacing-3;
  background: $bg-color-card;
  border-radius: $radius-md;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  &:active { opacity: 0.7; }
}

.card-header {
  display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12rpx;
  .shop-info {
    flex: 1;
    .shop-name { display: block; font-size: $font-size-md; font-weight: 600; color: $text-color-primary; margin-bottom: 4rpx; }
    .shop-no { font-size: 22rpx; color: $text-color-muted; }
  }
  .status-badge {
    display: flex; align-items: center; gap: 6rpx; padding: 6rpx 14rpx; border-radius: $radius-full; font-size: 20rpx; font-weight: 500; flex-shrink: 0;
    .status-dot { width: 10rpx; height: 10rpx; border-radius: 50%; }
    &.active { background: $success-color-bg; color: $success-color; .status-dot { background: $success-color; } }
    &.inactive { background: $bg-color-secondary; color: $text-color-muted; .status-dot { background: $text-color-placeholder; } }
  }
}

.card-body {
  margin-bottom: 4rpx;
  .info-row { display: flex; align-items: flex-start; margin-bottom: 6rpx;
    .info-label { font-size: 24rpx; color: $text-color-muted; flex-shrink: 0; margin-right: $spacing-1; }
    .info-text { font-size: 24rpx; color: $text-color-secondary; }
  }
}

.card-stats {
  display: flex; align-items: center; padding: 16rpx 8rpx; margin-top: 8rpx; background: $bg-color-page; border-radius: $radius-sm;
  .stat-item { flex: 1; display: flex; flex-direction: column; align-items: center;
    .stat-value { font-size: 26rpx; font-weight: 600; color: $text-color-primary; margin-bottom: 4rpx; }
    .stat-label { font-size: 20rpx; color: $text-color-muted; }
  }
}

// ====== Loading / No more ======
.loading-more { display: flex; align-items: center; justify-content: center; gap: $spacing-1; padding: $spacing-4; color: $text-color-muted; font-size: $font-size-sm;
  .loading-spinner { width: 32rpx; height: 32rpx; border: 3rpx solid $border-color; border-top-color: $primary-color; border-radius: 50%; animation: spin 0.8s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }
.no-more { text-align: center; padding: $spacing-4; font-size: $font-size-sm; color: $text-color-placeholder; }

// ====== Empty ======
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 160rpx $spacing-4;
  .empty-icon-box { width: 120rpx; height: 120rpx; border-radius: $radius-xl; background: $bg-color-secondary; display: flex; align-items: center; justify-content: center; margin-bottom: $spacing-3; }
  .empty-shop-icon { width: 44rpx; height: 44rpx; border: 2.5rpx solid $text-color-placeholder; border-radius: 8rpx; position: relative;
    &::after { content: ''; position: absolute; bottom: 6rpx; left: 50%; transform: translateX(-50%); width: 20rpx; height: 6rpx; background: $text-color-placeholder; border-radius: 3rpx 3rpx 0 0; }
  }
  .empty-title { font-size: $font-size-base; font-weight: 500; color: $text-color-secondary; margin-bottom: $spacing-1; }
  .empty-desc { font-size: $font-size-sm; color: $text-color-muted; }
}
</style>
