<template>
  <view class="app-container pb-20">
    <TopBar title="人员管理" show-back />
    
    <!-- 筛选标签 - 使用 uni-segmented-control -->
    <uni-segmented-control 
      :current="currentFilterIndex" 
      :values="filterLabels"
      style-type="text"
      active-color="#4f8ef7"
      @clickItem="onFilterChange"
    />

    <!-- 人员列表 -->
    <view class="mt-2">
      <view v-if="loading" class="py-10 text-center">
        <text class="text-gray-400">加载中...</text>
      </view>
      
      <view v-else-if="filteredStaff.length === 0">
        <EmptyState message="暂无人员" />
      </view>
      
      <uni-list v-else border>
        <uni-list-item 
          v-for="staff in filteredStaff" 
          :key="staff.staffId"
          :title="staff.name"
          :note="staff.phone + ' | ' + (staff.teamName || '未分配班组')"
          :right-text="getStatusText(staff.status)"
          show-arrow
          @click="showStaffDetail(staff)"
        >
          <template #header>
            <view class="w-10 h-10 rounded-full flex items-center justify-center mr-3" :class="getStatusBgClass(staff.status)">
              <text class="uni-icons uniui-person-filled text-lg" :class="getStatusIconClass(staff.status)"></text>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onPullDownRefresh } from '@dcloudio/uni-app'
import TopBar from '../../components/common/TopBar.vue'
import EmptyState from '../../components/common/EmptyState.vue'
import UniList from '../../components/uni-list/uni-list.vue'
import UniListItem from '../../components/uni-list/uni-list-item.vue'
import UniSegmentedControl from '../../components/uni-segmented-control/uni-segmented-control.vue'
import { getStaffList } from '../../api/staff'

const loading = ref(false)
const staffList = ref<any[]>([])
const currentFilterIndex = ref(0)

const filterStatuses = [
  { value: 'all', label: '全部' },
  { value: 'on_duty', label: '在岗' },
  { value: 'working', label: '施工中' },
  { value: 'rest', label: '休息' },
]

const filterLabels = filterStatuses.map(s => s.label)

const filteredStaff = computed(() => {
  const filterValue = filterStatuses[currentFilterIndex.value].value
  if (filterValue === 'all') return staffList.value
  return staffList.value.filter(s => s.status === filterValue)
})

function getStatusText(status: string) {
  const map: Record<string, string> = {
    on_duty: '在岗',
    working: '施工中',
    rest: '休息',
  }
  return map[status] || status
}

function getStatusBgClass(status: string) {
  const map: Record<string, string> = {
    on_duty: 'bg-green-50',
    working: 'bg-blue-50',
    rest: 'bg-orange-50',
  }
  return map[status] || 'bg-gray-50'
}

function getStatusIconClass(status: string) {
  const map: Record<string, string> = {
    on_duty: 'text-green-500',
    working: 'text-blue-500',
    rest: 'text-orange-500',
  }
  return map[status] || 'text-gray-400'
}

function onFilterChange(index: number) {
  currentFilterIndex.value = index
}

function showStaffDetail(staff: any) {
  uni.showModal({
    title: staff.name,
    content: `电话: ${staff.phone}\n班组: ${staff.teamName || '未分配'}\n状态: ${getStatusText(staff.status)}`,
    showCancel: false
  })
}

onMounted(async () => {
  await fetchStaff()
})

async function fetchStaff() {
  loading.value = true
  try {
    const res = await getStaffList()
    staffList.value = res.rows || []
  } catch (error) {
    console.error('获取人员列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 下拉刷新
onPullDownRefresh(async () => {
  await fetchStaff()
  uni.stopPullDownRefresh()
})
</script>
