<template>
  <view class="app-container pb-20">
    <TopBar title="应急待命" show-back />

    <!-- 应急热线 -->
    <view class="px-4 mt-4">
      <view class="p-4 bg-danger-light rounded-xl flex items-center justify-between">
        <view class="flex items-center">
          <view class="w-12 h-12 bg-danger rounded-full flex items-center justify-center mr-3">
            <text class="uni-icons uniui-phone-filled text-white text-xl"></text>
          </view>
          <view>
            <text class="text-sm text-danger font-medium">应急热线</text>
            <text class="text-lg font-bold text-gray-800">400-119-1100</text>
          </view>
        </view>
        <button class="px-4 py-2 bg-danger text-white rounded-lg text-sm font-medium" @click="callPhone('400-119-1100')">
          拨打
        </button>
      </view>
    </view>

    <!-- 待命说明 -->
    <view class="px-4 mt-4">
      <view class="p-3 bg-red-50 rounded-lg flex items-center">
        <text class="uni-icons uniui-notification-filled text-danger mr-2"></text>
        <text class="text-sm text-red-600">应急待命人员保持通讯畅通，随时准备响应紧急任务</text>
      </view>
    </view>

    <view class="px-4 py-4">
      <view v-if="emergencyTeam.length > 0" class="gap-y-3">
        <view
          v-for="person in emergencyTeam"
          :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 bg-red-100 rounded-full flex items-center justify-center mr-3">
                <text class="uni-icons uniui-person-filled text-danger 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-red">{{ getPersonnelStatusText(person.status) }}</text>
          </view>

          <view class="mt-3 pt-3 border-t border-gray-100">
            <view v-if="person.qualifications && person.qualifications.length > 0" class="flex flex-wrap gap-2 mb-3">
              <view
                v-for="qual in person.qualifications"
                :key="qual"
                class="px-2 py-1 bg-danger-light text-danger rounded text-xs"
              >
                {{ qual }}
              </view>
            </view>

            <view class="flex gap-3">
              <button class="flex-1 py-2 bg-danger text-white rounded-lg text-sm font-medium" @click="callPhone(person.phone)">
                电话联系
              </button>
            </view>
          </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 emergencyTeam = computed(() => personnelStore.emergencyTeam)

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-red {
  background: #fef2f2;
  color: #ef4444;
}
</style>
