<template>
  <view class="station-container">
    <!-- 顶部导航栏 -->
    <view class="header-nav">
      <view class="nav-left" @click="goBack">
        <AppIcon name="chevron-left" size="20" color="#FFFFFF" />
      </view>
      <text class="nav-title">站点清单</text>
      <view class="nav-right"></view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input-wrapper">
        <AppIcon name="search" size="16" color="#999999" class="search-icon" />
        <input type="text" placeholder="搜索站点名称或地址" v-model="searchKeyword" @confirm="handleSearch" />
      </view>
      <button class="search-btn" @click="handleSearch">搜索</button>
    </view>

    <!-- 状态筛选 -->
    <view class="filter-bar">
      <view
        v-for="(option, index) in statusFilterOptions"
        :key="index"
        class="filter-item"
        :class="{ active: activeStatus === option.value }"
        @click="handleStatusChange(option.value)">
        <text>{{ option.label }}</text>
      </view>
    </view>

    <!-- 站点列表 -->
    <view class="station-list" v-if="list.length > 0">
      <view
        class="station-item"
        v-for="(item, index) in list"
        :key="index"
        @click="viewDetail(item)">
        <view class="item-header">
          <view class="item-left">
            <text class="item-name">{{ item.stationName || '-' }}</text>
            <text class="item-id">ID: {{ item.stationId || '-' }}</text>
          </view>
          <text class="status-tag" :style="getStatusStyle(item.stationStatus)">{{ fmtDictName('WashStation.status', item.stationStatus) }}</text>
        </view>
        <view class="item-content">
          <view class="info-row">
            <text class="info-label">站点类型</text>
            <text class="info-value">{{ fmtDictName('WashStation.type', item.stationType) }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">地址</text>
            <text class="info-value addr">{{ item.address || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">服务电话</text>
            <text class="info-value">{{ item.serviceTel || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">工位数量</text>
            <text class="info-value">{{ item.parkingNum || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">营业时间</text>
            <text class="info-value">{{ item.businessHours || '-' }}</text>
          </view>
        </view>
        <view class="item-footer">
          <text class="footer-time">{{ formatTime(item.createTime) }}</text>
          <view class="footer-arrow"><text>查看详情</text><AppIcon name="chevron-right" size="12" color="#999999" /></view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="list.length > 0">
      <text class="load-more-text" v-if="loadMoreStatus === 'more'">上拉加载更多</text>
      <text class="load-more-text" v-else-if="loadMoreStatus === 'loading'">正在加载...</text>
      <text class="load-more-text" v-else>没有更多数据了</text>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="list.length === 0 && !loading">
      <view class="empty-icon-wrapper"><AppIcon name="home" size="48" color="#BFBFBF" /></view>
      <text class="empty-text">暂无站点数据</text>
    </view>

    <!-- 加载状态 -->
    <view class="loading-state" v-if="loading && list.length === 0">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import { getStationList } from '../../api/station.js'
import { formatTime, fmtDictName, getDictColor } from '../../utils/index.js'
import dictUtil, { loadDicts } from '../../utils/dict.js'

const list = ref([])
const loading = ref(true)
const page = ref(1)
const pageSize = ref(10)
const hasMore = ref(true)
const loadMoreStatus = ref('more')
const searchKeyword = ref('')
const activeStatus = ref('')

const statusFilterOptions = computed(() => dictUtil.getDictFilterOptions('WashStation.status'))

const goBack = () => {
  uni.navigateBack()
}

const getStatusStyle = (status) => {
  const color = getDictColor('WashStation.status', status)
  if (color) return { color, backgroundColor: `${color}1A` }
  return {}
}

const loadData = async (isLoadMore = false) => {
  if (!isLoadMore) {
    page.value = 1
    list.value = []
    hasMore.value = true
    loadMoreStatus.value = 'more'
  } else {
    loadMoreStatus.value = 'loading'
  }

  loading.value = true
  try {
    const params = {
      pageNum: page.value,
      pageSize: pageSize.value
    }
    if (searchKeyword.value) params.stationName = searchKeyword.value
    if (activeStatus.value !== '') params.stationStatus = activeStatus.value

    const res = await getStationList(params)
    if (res && res.code === 200) {
      const data = res.data
      const records = data.records || data.list || data
      const total = data.total || 0

      const totalPages = Math.ceil(total / pageSize.value)
      hasMore.value = page.value < totalPages
      loadMoreStatus.value = hasMore.value ? 'more' : 'noMore'

      if (isLoadMore) {
        list.value = [...list.value, ...records]
        page.value++
      } else {
        list.value = records
        page.value = 2
      }
    }
  } catch (error) {
    console.error('加载站点列表失败:', error)
  } finally {
    loading.value = false
  }
}

const loadMore = () => {
  if (hasMore.value && !loading.value && loadMoreStatus.value !== 'loading') {
    loadData(true)
  }
}

onReachBottom(() => {
  loadMore()
})

const handleSearch = () => {
  loadData()
}

const handleStatusChange = (status) => {
  activeStatus.value = status
  loadData()
}

const viewDetail = (item) => {
  uni.navigateTo({
    url: `/pages/station/detail?id=${item.stationId || item.id}&name=${encodeURIComponent(item.stationName || '')}`
  })
}

onMounted(async () => {
  await loadDicts()
  loadData()
})
</script>

<style scoped>
.station-container {
  min-height: 100vh;
  background-color: #F5F7FA;
  padding-bottom: 100rpx;
}

.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(24rpx + var(--status-bar-height));
  padding-right: 30rpx;
  padding-bottom: 24rpx;
  padding-left: 30rpx;
  background: #C6171E;
}
.nav-left, .nav-right { width: 120rpx; }
.back-btn { font-size: 36rpx; color: #FFFFFF; }
.nav-title { font-size: 34rpx; color: #FFFFFF; font-weight: 600; }

.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #FFFFFF;
}
.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #F5F5F5;
  border-radius: 16rpx;
  padding: 0 20rpx;
}
.search-icon { font-size: 28rpx; margin-right: 10rpx; }
.search-input-wrapper input { flex: 1; height: 64rpx; font-size: 28rpx; }
.search-btn {
  margin-left: 20rpx;
  height: 64rpx;
  line-height: 64rpx;
  padding: 0 28rpx;
  background: #C6171E;
  color: #FFFFFF;
  border-radius: 16rpx;
  font-size: 26rpx;
  border: none;
}

.search-btn:active {
  background: #A81212;
  transform: scale(0.97);
}

.filter-bar {
  display: flex;
  padding: 16rpx 20rpx;
  background-color: #FFFFFF;
  gap: 16rpx;
}
.filter-item {
  padding: 10rpx 24rpx;
  background-color: #F5F5F5;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #666666;
}
.filter-item.active {
  background: #C6171E;
  color: #FFFFFF;
}

.station-list {
  padding: 20rpx;
}
.station-item {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}
.station-item:active {
  transform: translateY(-4rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #F0F0F0;
  margin-bottom: 16rpx;
}
.item-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #1A1A1A;
  display: block;
}
.item-id {
  font-size: 22rpx;
  color: #999999;
  margin-top: 4rpx;
  display: block;
}
.status-tag {
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-weight: 500;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8rpx 0;
}
.info-label {
  font-size: 26rpx;
  color: #999999;
}
.info-value {
  font-size: 26rpx;
  color: #1A1A1A;
  max-width: 360rpx;
  text-align: right;
}
.info-value.addr {
  font-size: 24rpx;
}
.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16rpx;
  border-top: 1rpx solid #F0F0F0;
  margin-top: 16rpx;
}
.footer-time {
  font-size: 22rpx;
  color: #999999;
}
.footer-arrow {
  font-size: 24rpx;
  color: #C6171E;
}

.load-more {
  display: flex;
  justify-content: center;
  padding: 30rpx 0;
}
.load-more-text { font-size: 26rpx; color: #999999; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 0;
}
.empty-icon { font-size: 120rpx; margin-bottom: 20rpx; }
.empty-text { font-size: 28rpx; color: #999999; }

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120rpx 0;
}
.loading-spinner {
  font-size: 60rpx;
  animation: spin 1s linear infinite;
}
.loading-text { font-size: 28rpx; color: #999999; margin-top: 20rpx; }
</style>
