<template>
  <view class="app-container pb-20">
    <TopBar title="在岗人员" show-back />

    <view class="px-4 py-4">
      <view v-if="onDutyStaff.length > 0" class="gap-y-3">
        <view
          v-for="person in onDutyStaff"
          :key="person.id"
          class="card p-4"
        >
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <view
                class="w-12 h-12 rounded-full flex items-center justify-center mr-3"
                :class="getPersonIconClass(person.id)"
              >
                <text class="uni-icons uniui-person-filled text-xl"></text>
              </view>
              <view>
                <text class="font-medium text-gray-800 block">{{ person.name }}</text>
                <text class="text-sm text-gray-500">{{ person.team }} · {{ person.position || '施工员' }}</text>
              </view>
            </view>
            <text class="tag tag-green">{{ getPersonnelStatusText(person.status) }}</text>
          </view>

          <view class="mt-3 pt-3 border-t border-gray-100">
            <view class="flex items-center justify-between mb-2">
              <text class="text-xs text-gray-400">技能等级</text>
              <text class="text-sm text-gray-700">{{ person.skillLevel || '-' }}</text>
            </view>
            <view class="flex items-center justify-between mb-2">
              <text class="text-xs text-gray-400">从业年限</text>
              <text class="text-sm text-gray-700">{{ person.workYears ? `${person.workYears}年` : '-' }}</text>
            </view>
            <view v-if="person.qualifications && person.qualifications.length > 0" class="flex flex-wrap gap-2 mt-2">
              <view
                v-for="qual in person.qualifications"
                :key="qual"
                class="px-2 py-1 bg-primary-light text-primary rounded text-xs"
              >
                {{ qual }}
              </view>
            </view>
          </view>

          <view class="mt-3 flex gap-3">
            <button class="flex-1 py-2 bg-primary-light text-primary rounded-lg text-sm font-medium" @click="callPhone(person.phone)">
              电话联系
            </button>
          </view>
        </view>
      </view>
      <EmptyState v-else message="暂无在岗人员" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import TopBar from '../../components/common/TopBar.vue'
import EmptyState from '../../components/common/EmptyState.vue'
import { usePersonnelStore } from '../../stores/personnel'
import { getPersonnelStatusText } from '../../utils'

const personnelStore = usePersonnelStore()
const onDutyStaff = computed(() => personnelStore.onDutyStaff)

function getPersonIconClass(id: string) {
  const colors = ['bg-blue-100', 'bg-green-100', 'bg-purple-100', 'bg-orange-100', 'bg-red-100']
  const index = parseInt(id.replace(/\D/g, '')) % colors.length
  return colors[index]
}

function callPhone(phone: string) {
  if (!phone) return
  uni.makePhoneCall({ phoneNumber: phone })
}
</script>

<style scoped>
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.tag-green {
  background: #e6f7f1;
  color: #059669;
}
</style>
