<template>
  <div class="profile-page">
    <!-- 顶部用户信息区域 -->
    <div class="header-section">
      <div class="user-info">
        <div class="avatar">
          <span>{{ userInfo.nickName?userInfo.nickName?.charAt(0):"" }}</span>
        </div>
        <div class="info-content">
          <h2 class="user-name">{{ userInfo.nickName || '未登录' }}</h2>
          <p class="dept-name">{{ userInfo.departName || '' }}</p>
          <div class="user-tags">
            <span class="tag">民警</span>
            <span class="work-id">工号: {{ userInfo.workNo || '-' }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 今日统计卡片 -->
    <div class="stats-card">
      <h3 class="stats-title">今日统计</h3>
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value violation">{{ stats.violationCount }}</div>
          <div class="stat-label">违规任务</div>
        </div>
        <div class="stat-item">
          <div class="stat-value traffic">{{ stats.trafficCount }}</div>
          <div class="stat-label">路况任务</div>
        </div>
        <div class="stat-item">
          <div class="stat-value completed">{{ stats.completedCount }}</div>
          <div class="stat-label">已处理</div>
        </div>
        <div class="stat-item">
          <div class="stat-value rate">{{ stats.completionRate }}</div>
          <div class="stat-label">处理率</div>
        </div>
      </div>
    </div>

    <!-- 功能菜单列表 -->
    <div class="menu-list">
      <!-- 预警语音提醒 -->
      <div class="menu-item">
        <div class="menu-left">
          <div class="menu-icon" style="background: #eff6ff">
            <van-icon name="volume-o" color="#2563eb" />
          </div>
          <span class="menu-label">预警语音提醒</span>
        </div>
        <van-switch v-model="alarmVoiceEnabled" size="20" />
      </div>

      <!-- 执法点位 -->
      <div class="menu-item" @click="handleLocationClick">
        <div class="menu-left">
          <div class="menu-icon" style="background: #f3f4f6">
            <van-icon name="location-o" color="#6b7280" />
          </div>
          <span class="menu-label">执法点位</span>
        </div>
        <div class="menu-right">
          <span class="location-name">{{ dataForm.sitPosition }}</span>
          <van-icon name="arrow" class="arrow-icon" />
        </div>
      </div>

      <!-- 切换账号 -->
      <div class="menu-item" @click="handleSwitchAccount">
        <div class="menu-left">
          <div class="menu-icon" style="background: #f3f4f6">
            <van-icon name="setting-o" color="#6b7280" />
          </div>
          <span class="menu-label">切换账号</span>
        </div>
        <van-icon name="arrow" class="arrow-icon" />
      </div>
    </div>

    <!-- 版本信息 -->
    <div class="version-info">
      <span>当前版本v1.0.0</span>
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-section">
      <van-button block round class="logout-btn" @click="handleLogout">
        <van-icon name="cross" class="logout-icon" />
        退出登录
      </van-button>
    </div>

    <!-- 底部导航 -->
    <BottomTabs :active-tab="'profile'" />
    <!-- 弹出框 -->
    <ChooseList v-model="showCompany" title="选择执法点位" type="zfjly" @change="handleSeclt"></ChooseList>
  </div>
</template>

<script setup>
import { countByTaskStatus } from "@/api/traffic";
import ChooseList from "@/components/ChooseList.vue";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { Dialog } from "vant";
import BottomTabs from "@/components/bottomTabs.vue";

const router = useRouter();
const showCompany = ref(false);
// 用户信息
const userInfo = ref({});
const dataForm = ref({
  sitPosition:'中山大道与建设大道交叉口'
})
const handleSeclt = (val) => {
  console.log("选择的执法点位：", val);
  dataForm.value.sitPosition = val[0]?.name || '';
}

// 预警语音开关
const alarmVoiceEnabled = ref(true);

// 统计数据
const stats = ref({
  violationCount: 0,
  trafficCount: 0,
  completedCount: 0,
  completionRate: 0
});

// 执法点位点击
function handleLocationClick() {
  showCompany.value = true;
  console.log("执法点位");
}

// 切换账号
function handleSwitchAccount() {
  Dialog.confirm({
    title: '切换账号',
    message: '确定要切换账号吗？',
  }).then(() => {
    router.push("/");
  }).catch(() => {});
}

// 退出登录
function handleLogout() {
  Dialog.confirm({
    title: '退出登录',
    message: '确定要退出登录吗？',
  }).then(() => {
    router.push("/");
  }).catch(() => {});
}
function getCountByTaskStatus() {
  let data = {
    userId: userInfo.value.userId,
  };
  countByTaskStatus(data).then((res) => {
    let arr = res || [];
    let wzTotal = 0;
    let lmTotal = 0;
    let yclTotal = 0;
    arr.forEach(item => {
      item.statusList = item.statusList || [];
      let total = item.statusList.reduce((sum, status) => sum + (status.count), 0);
      item.statusList.find(status => {
        if(status.taskStatus == 2) yclTotal += status.count;
      });
      // 1:路面事件 2:违章事件
      item.eventCategory == 1 ? lmTotal = total : wzTotal = total;
    });
    stats.value.violationCount = wzTotal;
    stats.value.trafficCount = lmTotal;
    stats.value.completedCount = yclTotal;
    stats.value.completionRate = yclTotal > 0 ? `${((yclTotal / total) * 100).toFixed(1)}%` : '0%';

  });
}
onMounted(() => {
  // 从 localStorage 获取用户信息
  const storedUserInfo = localStorage.getItem("userInfo");
  if (storedUserInfo) {
    try {
      const parsed = JSON.parse(storedUserInfo);
      userInfo.value = parsed;
    } catch (e) {
      console.error("解析用户信息失败", e);
    }
  }
  getCountByTaskStatus();
});
</script>

<style lang="scss" scoped>
.profile-page {
  min-height: 100vh;
  background: #f3f4f6;
  padding-bottom: 70px;
  display: flex;
  flex-direction: column;
}

.header-section {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  padding: 48px 24px 32px;
  border-radius: 0 0 30px 30px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar {
  width: 64px;
  height: 64px;
  background: #60a5fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  span {
    color: white;
    font-size: 24px;
    font-weight: 600;
  }
}

.info-content {
  flex: 1;

  .user-name {
    font-size: 20px;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
  }

  .dept-name {
    font-size: 14px;
    color: #bfdbfe;
    margin-bottom: 8px;
  }

  .user-tags {
    display: flex;
    align-items: center;
    gap: 12px;

    .tag {
      background: rgba(96, 165, 250, 0.3);
      color: white;
      font-size: 12px;
      padding: 4px 12px;
      border-radius: 16px;
    }

    .work-id {
      font-size: 14px;
      color: #bfdbfe;
    }
  }
}

.stats-card {
  margin: -16px 16px 16px;
  background: white;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  .stats-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 16px;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }

  .stat-item {
    text-align: center;

    .stat-value {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 4px;

      &.violation {
        color: #f97316;
      }

      &.traffic {
        color: #2563eb;
      }

      &.completed {
        color: #16a34a;
      }

      &.rate {
        color: #9333ea;
      }
    }

    .stat-label {
      font-size: 12px;
      color: #6b7280;
    }
  }
}

.menu-list {
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.menu-item {
  background: white;
  border-radius: 20px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  &:active {
    background: #f9fafb;
  }
}

.menu-left {
  display: flex;
  align-items: center;
  gap: 12px;

  .menu-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;

    .van-icon {
      font-size: 20px;
    }
  }

  .menu-label {
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
  }
}

.menu-right {
  display: flex;
  align-items: center;
  gap: 8px;

  .location-name {
    font-size: 14px;
    color: #9ca3af;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .arrow-icon {
    font-size: 16px;
    color: #d1d5db;
  }
}

.version-info {
  text-align: center;
  padding: 24px 16px 16px;
  font-size: 14px;
  color: #9ca3af;
}

.logout-section {
  padding: 0 16px;

  .logout-btn {
    height: 48px;
    border: 2px solid #ef4444;
    border-radius: 20px;
    background: white;
    color: #ef4444;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    &:active {
      background: #fef2f2;
    }

    .logout-icon {
      font-size: 20px;
    }
  }
}
</style>