<script setup>
import { ref, onMounted } from "vue";
import {
  ElCard,
  ElAvatar,
  ElDivider,
  ElBadge,
  ElTable,
  ElTableColumn,
  ElTag,
  ElProgress,
} from "element-plus";
import "element-plus/dist/index.css";
import {
  Calendar,
  Location,
  User,
  Sunny,
  Cloudy,
  Monitor,
  Connection,
  WarningFilled,
  Bell,
} from "@element-plus/icons-vue";

// Personal info data
const personalInfo = ref({
  name: "刘昊林",
  title: "系统管理员",
  avatar: "https://placeholder.co/150",
  description:
    "丰富系统管理经验，专注于IoT设备管理和系统维护。熟悉各类传感器和智能设备的部署与维护。",
  email: "guolianfa@500269.com",
  phone: "123-4567-8910",
});
// Weather data
const weather = ref({
  location: "上海市",
  temperature: 24,
  condition: "晴朗",
  humidity: 65,
  wind: "东北风 3级",
  date: new Date().toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
  }),
});

// Device statistics
const deviceStats = ref({
  online: 128,
  offline: 23,
  total: 151,
  onlinePercentage: 0,
});

// Calculate percentage
onMounted(() => {
  deviceStats.value.onlinePercentage = Math.round(
    (deviceStats.value.online / deviceStats.value.total) * 100
  );
});

// Alarm data
const alarms = ref([
  {
    id: 1,
    device: "井盖一号",
    type: "高温警报",
    location: "长沙",
    time: "2023-10-15 08:23:45",
    status: "未处理",
  },
  {
    id: 2,
    device: "井盖一号",
    type: "连接中断",
    location: "长沙",
    time: "2023-10-15 07:15:22",
    status: "已处理",
  },
  {
    id: 3,
    device: "井盖一号",
    type: "未授权访问",
    location: "长沙",
    time: "2023-10-14 23:42:10",
    status: "处理中",
  },
  {
    id: 4,
    device: "电表一号",
    type: "离线",
    location: "长沙",
    time: "2023-10-14 18:05:37",
    status: "已处理",
  },
]);

// Tag type mapping for alarm levels
const tagType = {
  critical: "danger",
  warning: "warning",
  info: "info",
};

// Status tag mapping
const statusTag = {
  未处理: "danger",
  处理中: "warning",
  已处理: "success",
};

// Get weather icon based on condition
const getWeatherIcon = (condition) => {
  if (condition.includes("晴")) return Sunny;
  if (condition.includes("云") || condition.includes("阴")) return Cloudy;
  return Sunny; // Default
};
</script>

<template>
  <div class="dashboard-container">
    <!-- Header -->
    <header
      class="bg-gradient-to-r from-blue-500 to-blue-700 text-white p-4 flex justify-between items-center"
    >
      <div class="flex items-center">
        <Monitor class="text-2xl mr-2" />
        <h1 class="text-xl font-bold">智能设备管理系统</h1>
      </div>
      <div class="flex items-center">
        <span class="mr-4">{{ weather.date }}</span>
      </div>
    </header>

    <!-- Main Content -->
    <main class="p-6 bg-gray-100 min-h-80vh">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Personal Introduction Module -->
        <ElCard class="col-span-1 md:col-span-2" shadow="hover">
          <template #header>
            <div class="flex justify-between items-center">
              <h2 class="text-lg font-medium">个人信息</h2>
              <User class="w-20" />
            </div>
          </template>
          <div class="flex flex-col md:flex-row items-center md:items-start gap-6">
            <ElAvatar :src="personalInfo.avatar" :size="100" />
            <div class="flex-1">
              <h3 class="text-xl font-bold">{{ personalInfo.name }}</h3>
              <p class="text-gray-500 mb-2">{{ personalInfo.title }}</p>
              <ElDivider />
              <p class="text-sm mb-4">{{ personalInfo.description }}</p>
              <div class="flex flex-col sm:flex-row gap-4">
                <div class="flex items-center">
                  <i class="el-icon-message mr-2"></i>
                  <span class="text-sm">{{ personalInfo.email }}</span>
                </div>
                <div class="flex items-center">
                  <i class="el-icon-phone mr-2"></i>
                  <span class="text-sm">{{ personalInfo.phone }}</span>
                </div>
              </div>
            </div>
          </div>
        </ElCard>

        <!-- Weather Module -->
        <ElCard shadow="hover">
          <template #header>
            <div class="flex justify-between items-center">
              <h2 class="text-lg font-medium">天气信息</h2>
              <component class="w-10" :is="getWeatherIcon(weather.condition)" />
            </div>
          </template>
          <div class="flex flex-col items-center">
            <div class="flex items-center mb-4">
              <Location class="mr-2 w-10" />
              <span>{{ weather.location }}</span>
            </div>
            <div class="text-4xl font-bold mb-2">{{ weather.temperature }}°C</div>
            <div class="text-lg mb-4">{{ weather.condition }}</div>
            <ElDivider />
            <div class="w-full grid grid-cols-2 gap-2 text-sm">
              <div>湿度: {{ weather.humidity }}%</div>
              <div>风力: {{ weather.wind }}</div>
            </div>
          </div>
        </ElCard>

        <!-- Device Management Module -->
        <ElCard shadow="hover">
          <template #header>
            <div class="flex justify-between items-center">
              <h2 class="text-lg font-medium">设备管理</h2>
              <Connection class="w-10" />
            </div>
          </template>
          <div class="flex flex-col">
            <div class="grid grid-cols-3 gap-4 mb-6">
              <div class="text-center">
                <ElBadge :value="deviceStats.online" class="mb-2">
                  <div
                    class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center mx-auto"
                  >
                    <i class="el-icon-success text-green-500 text-xl"></i>
                  </div>
                </ElBadge>
                <div class="text-sm text-gray-500">在线设备</div>
              </div>
              <div class="text-center">
                <ElBadge :value="deviceStats.offline" class="mb-2">
                  <div
                    class="h-12 w-12 rounded-full bg-red-100 flex items-center justify-center mx-auto"
                  >
                    <i class="el-icon-error text-red-500 text-xl"></i>
                  </div>
                </ElBadge>
                <div class="text-sm text-gray-500">离线设备</div>
              </div>
              <div class="text-center">
                <ElBadge :value="deviceStats.total" class="mb-2">
                  <div
                    class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center mx-auto"
                  >
                    <i class="el-icon-data-analysis text-blue-500 text-xl"></i>
                  </div>
                </ElBadge>
                <div class="text-sm text-gray-500">总设备数</div>
              </div>
            </div>
            <ElDivider />
            <div>
              <div class="flex justify-between mb-2">
                <span>设备在线率</span>
                <span>{{ deviceStats.onlinePercentage }}%</span>
              </div>
              <ElProgress
                :percentage="deviceStats.onlinePercentage"
                :color="
                  deviceStats.onlinePercentage > 90
                    ? '#67C23A'
                    : deviceStats.onlinePercentage > 70
                    ? '#E6A23C'
                    : '#F56C6C'
                "
              />
            </div>
          </div>
        </ElCard>

        <!-- Alarm Module -->
        <ElCard class="col-span-1 md:col-span-2 lg:col-span-4" shadow="hover">
          <template #header>
            <div class="flex justify-between items-center">
              <h2 class="text-lg font-medium">报警信息</h2>
              <Bell class="w-20" />
            </div>
          </template>
          <ElTable :data="alarms" style="width: 100%" stripe>
            <ElTableColumn prop="id" label="ID" width="70" />
            <ElTableColumn prop="device" label="设备" />
            <ElTableColumn prop="type" label="报警信息" />
            <ElTableColumn prop="location" label="位置信息" />
            <ElTableColumn prop="time" label="时间" />
            <ElTableColumn prop="status" label="状态">
              <template #default="scope">
                <ElTag :type="statusTag[scope.row.status]" size="small">
                  {{ scope.row.status }}
                </ElTag>
              </template>
            </ElTableColumn>
            <ElTableColumn label="操作">
              <template #default>
                <el-button type="text" size="small">处理</el-button>
                <el-button type="text" size="small">详情</el-button>
              </template>
            </ElTableColumn>
          </ElTable>
        </ElCard>
      </div>
    </main>
  </div>
</template>

<style>
.dashboard-container {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.el-card {
  transition: all 0.3s ease;
}

.el-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
</style>
