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

    <view class="detail-content" v-if="shop">
      <view class="status-card">
        <view class="status-header">
          <text class="shop-name">{{ shop.name }}</text>
          <view class="shop-status" :class="getStatusClass(shop.status)">
            <view class="status-dot"></view>
            <text>{{ getStatusText(shop.status) }}</text>
          </view>
        </view>
      </view>

      <view class="info-card">
        <text class="section-title">基本信息</text>
        <view class="info-grid">
          <view class="info-item">
            <text class="label">门店地址</text>
            <text class="value">{{ shop.address }}</text>
          </view>
          <view class="info-item">
            <text class="label">联系电话</text>
            <text class="value">{{ shop.contactPhone }}</text>
          </view>
          <view class="info-item">
            <text class="label">负责人</text>
            <text class="value">{{ shop.contactName }}</text>
          </view>
          <view class="info-item">
            <text class="label">营业时间</text>
            <text class="value">{{ shop.businessHours }}</text>
          </view>
        </view>
      </view>

      <view class="info-card">
        <text class="section-title">销售数据</text>
        <view class="sales-grid">
          <view class="sales-item">
            <text class="sales-value">¥{{ formatMoney(shop.todaySales) }}</text>
            <text class="sales-label">今日销售额</text>
          </view>
          <view class="sales-item">
            <text class="sales-value">{{ shop.todayOrders }}</text>
            <text class="sales-label">今日订单</text>
          </view>
          <view class="sales-item">
            <text class="sales-value">¥{{ formatMoney(shop.monthSales) }}</text>
            <text class="sales-label">本月销售额</text>
          </view>
        </view>
      </view>

      <view class="info-card" v-if="shop.devices && shop.devices.length > 0">
        <text class="section-title">门店设备</text>
        <view class="device-list">
          <view class="device-item" v-for="device in shop.devices" :key="device.id">
            <view class="device-info">
              <text class="device-name">{{ device.name }}</text>
              <text class="device-no">{{ device.deviceId }}</text>
            </view>
            <view class="device-status" :class="getDeviceStatusClass(device.status)">
              <view class="status-dot"></view>
              <text>{{ getDeviceStatusText(device.status) }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

const shop = ref<any>(null);
const formatMoney = formatMoneyUtil;

const getStatusText = (status: number) => ShopStatusText[status] || '未知';
const getStatusColor = (status: number) => ShopStatusColor[status] || '$text-color-muted';
const getDeviceStatusText = (status: number) => DeviceStatusText[status] || '未知';
const getDeviceStatusColor = (status: number) => DeviceStatusColor[status] || '$text-color-muted';

const getStatusClass = (status: number) => {
  if (status === 1) return 'active';
  return 'inactive';
};

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

const loadDetail = async () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const id = (currentPage as any).options?.id;
  
  if (!id) {
    showToast('门店ID不存在');
    navigateBack();
    return;
  }
  
  try {
    shop.value = await getShopDetail(id);
  } catch (error) {
    showToast('加载门店详情失败');
    navigateBack();
  }
};

onMounted(() => {
  loadDetail();
});
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: $bg-color-page;
}

.detail-content {
  padding: $spacing-2 $spacing-3;
}

.status-card {
  background: $bg-color-card;
  border-radius: $radius-lg;
  padding: 28rpx $spacing-4;
  margin-bottom: $spacing-2;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

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

    .shop-name {
      font-size: $font-size-xl;
      font-weight: 700;
      color: $text-color-primary;
      line-height: 1.3;
    }

    .shop-status {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8rpx;
      padding: 8rpx 18rpx;
      font-size: 22rpx;
      font-weight: 500;
      border-radius: $radius-full;
      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; }
      }
    }
  }
}

.info-card {
  background: $bg-color-card;
  border-radius: $radius-lg;
  padding: 24rpx $spacing-4;
  margin-bottom: $spacing-2;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

  .section-title {
    display: block;
    font-size: $font-size-base;
    font-weight: 600;
    color: $text-color-primary;
    margin-bottom: 20rpx;
  }

  .info-grid {
    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14rpx 0;

      .label {
        font-size: $font-size-base;
        color: $text-color-muted;
      }

      .value {
        font-size: $font-size-base;
        color: $text-color-primary;
        text-align: right;
        max-width: 60%;
      }
    }
  }

  .sales-grid {
    display: flex;
    background: #FAFAFA;
    border-radius: $radius-base;
    padding: 20rpx 0;

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

      .sales-value {
        font-size: $font-size-md;
        font-weight: 700;
        color: $text-color-primary;
        margin-bottom: 8rpx;
      }

      .sales-label {
        font-size: $font-size-xs;
        color: $text-color-muted;
      }
    }
  }

  .device-list {
    .device-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18rpx 0;

      & + .device-item {
        border-top: 1rpx solid #FAFAFA;
      }

      .device-info {
        .device-name {
          display: block;
          font-size: $font-size-base;
          color: $text-color-primary;
          font-weight: 500;
          margin-bottom: 4rpx;
        }

        .device-no {
          font-size: 22rpx;
          color: $text-color-muted;
        }
      }

      .device-status {
        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%;
        }

        &.online {
          background: $success-color-bg;
          color: $success-color;
          .status-dot { background: $success-color; }
        }

        &.offline {
          background: $bg-color-secondary;
          color: $text-color-muted;
          .status-dot { background: $text-color-placeholder; }
        }

        &.maintenance {
          background: $warning-color-bg;
          color: $warning-color;
          .status-dot { background: $warning-color; }
        }
      }
    }
  }
}
</style>
