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

defineOptions({ name: 'WorkbenchTicketSla' });

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

const unclosed = 12;
const overtime = 3;
const willOvertime = 5;
const byPriority = { high: 4, mid: 6, low: 2 };
</script>

<template>
  <WorkbenchModuleCard
    title="工单 SLA 总览"
    icon="mdi:timer-alert-outline"
    :editing="editing"
    :collapsed="collapsed"
    @hide="$emit('hide')"
    @toggle-collapse="$emit('toggle-collapse')"
  >
    <ElAlert type="warning" :closable="false" class="pending-hint">
      工单业务暂未上线，当前为 mock 数据；正式接口落地后接通。
    </ElAlert>
    <div class="sla-grid">
      <div class="sla-cell tone-rose">
        <div class="sla-n">{{ unclosed }}</div>
        <div class="sla-lbl">未关闭</div>
      </div>
      <div class="sla-cell tone-rose">
        <div class="sla-n">{{ overtime }}</div>
        <div class="sla-lbl">超时</div>
      </div>
      <div class="sla-cell tone-amber">
        <div class="sla-n">{{ willOvertime }}</div>
        <div class="sla-lbl">将超时</div>
      </div>
    </div>
    <div class="sla-hint">按优先级：高 {{ byPriority.high }} · 中 {{ byPriority.mid }} · 低 {{ byPriority.low }}</div>
  </WorkbenchModuleCard>
</template>

<style scoped>
.pending-hint {
  margin-bottom: 10px;
}
.sla-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sla-cell {
  padding: 12px;
  border-radius: 8px;
  text-align: left;
}
.sla-cell.tone-rose {
  background: #fef2f2;
  color: #991b1b;
}
.sla-cell.tone-amber {
  background: #fffbeb;
  color: #92400e;
}
.sla-n {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.sla-lbl {
  font-size: 11px;
  margin-top: 4px;
  opacity: 0.85;
}
.sla-hint {
  margin-top: 10px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
</style>
