<script setup lang="ts">
import WorkbenchModuleCard from './workbench-module-card.vue';

defineOptions({ name: 'WorkbenchTeamLoad' });

interface Props {
  editing?: boolean;
  collapsed?: boolean;
}
withDefaults(defineProps<Props>(), { editing: false, collapsed: false });
defineEmits<{ (e: 'hide'): void; (e: 'toggle-collapse'): void }>();

interface LoadRow {
  name: string;
  inProgress: number;
}

const rows: LoadRow[] = [
  { name: '张三', inProgress: 5 },
  { name: '李四', inProgress: 3 },
  { name: '王五', inProgress: 7 },
  { name: '赵六', inProgress: 2 },
  { name: '钱七', inProgress: 5 }
];

const MAX = 10;
function level(n: number): 'ok' | 'warn' | 'over' {
  if (n >= 6) return 'over';
  if (n >= 4) return 'warn';
  return 'ok';
}
</script>

<template>
  <WorkbenchModuleCard
    title="团队负载"
    icon="mdi:scale-balance"
    :editing="editing"
    :collapsed="collapsed"
    @hide="$emit('hide')"
    @toggle-collapse="$emit('toggle-collapse')"
  >
    <ul class="load-list">
      <li v-for="row in rows" :key="row.name" class="load-item">
        <span class="load-name">{{ row.name }}</span>
        <div class="load-bar">
          <div
            class="load-bar-inner"
            :class="`is-${level(row.inProgress)}`"
            :style="{ width: `${(row.inProgress / MAX) * 100}%` }"
          />
        </div>
        <span class="load-n" :class="{ 'text-danger': level(row.inProgress) === 'over' }">
          {{ row.inProgress }}{{ level(row.inProgress) === 'over' ? ' ⚠' : '' }}
        </span>
      </li>
    </ul>
    <div class="load-hint">阈值 ≥6 高负载 · ≥4 中负载</div>
  </WorkbenchModuleCard>
</template>

<style scoped>
.load-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.load-item {
  display: grid;
  grid-template-columns: 60px 1fr 50px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
}
.load-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--el-fill-color);
  overflow: hidden;
}
.load-bar-inner {
  height: 100%;
}
.load-bar-inner.is-ok {
  background: var(--el-color-success);
}
.load-bar-inner.is-warn {
  background: var(--el-color-warning);
}
.load-bar-inner.is-over {
  background: var(--el-color-danger);
}
.load-n {
  text-align: right;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
.text-danger {
  color: var(--el-color-danger);
  font-weight: 600;
}
.load-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--el-text-color-secondary);
}
</style>
