<script setup lang="ts">
import { WORK_REPORT_TYPE_LABEL, type WorkReportType } from '../types';

defineOptions({ name: 'WorkReportTabs' });

interface TabOption {
  label: string;
  name: WorkReportType;
}

const props = defineProps<{
  tabs: TabOption[];
}>();

const activeTab = defineModel<WorkReportType>('activeTab', { required: true });
</script>

<template>
  <ElCard class="work-report-sidebar" body-class="work-report-sidebar__body">
    <div class="work-report-sidebar__header">报告类型</div>
    <div class="work-report-sidebar__list">
      <div
        v-for="tab in tabs"
        :key="tab.name"
        class="work-report-sidebar__item"
        :class="{ 'work-report-sidebar__item--active': activeTab === tab.name }"
        @click="activeTab = tab.name"
      >
        <span class="work-report-sidebar__label">{{ tab.label || WORK_REPORT_TYPE_LABEL[tab.name] }}</span>
      </div>
    </div>
  </ElCard>
</template>

<style scoped>
.work-report-sidebar {
  height: 100%;
  border: 1px solid var(--el-border-color-light);
  box-shadow: none;
}

.work-report-sidebar :deep(.work-report-sidebar__body) {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.work-report-sidebar__header {
  padding: 20px 20px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--el-text-color-secondary);
  letter-spacing: 0.5px;
}

.work-report-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
}

.work-report-sidebar__item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.work-report-sidebar__item:hover {
  background: var(--el-fill-color-light);
}

.work-report-sidebar__item--active {
  background: var(--el-color-primary-light-9);
}

.work-report-sidebar__item--active .work-report-sidebar__label {
  color: var(--el-color-primary);
  font-weight: 600;
}

.work-report-sidebar__label {
  font-size: 14px;
  color: var(--el-text-color-regular);
  line-height: 1;
}
</style>
