<template>
  <div :class="['status-tabs', type]">
    <div v-for="tab in tabs" :key="tab.key" :class="['tab-item', { active: modelValue === tab.key }]" @click="handleClick(tab.key)">
      <el-icon v-if="tab.icon && type === 'line'"><component :is="tab.icon" /></el-icon>
      <span>{{ tab.label }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Component } from 'vue';

interface TabItem {
  key: string;
  label: string;
  icon?: Component;
}

defineProps<{
  tabs: TabItem[];
  modelValue: string;
  type?: 'line' | 'pill'; // line=下划线样式, pill=胶囊样式
}>();

const emit = defineEmits<{
  'update:modelValue': [value: string];
  'change': [value: string];
}>();

const handleClick = (key: string) => {
  emit('update:modelValue', key);
  emit('change', key);
};
</script>

<style scoped lang="scss">
.status-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;

  &.line {
    gap: 30px;
    border-bottom: 1px solid #eee;
    .tab-item {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 12px 0;
      cursor: pointer;
      color: #666;
      font-size: 14px;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      background: none;
      &:hover,
      &.active {
        color: #333;
      }
      &.active {
        border-bottom-color: #e60012;
      }
    }
  }

  &.pill {
    .tab-item {
      padding: 6px 18px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
      color: #666;
      background: #f5f5f5;
      transition: all 0.2s;
      &:hover {
        color: #e60012;
      }
      &.active {
        background: #e60012;
        color: #fff;
      }
    }
  }
}
</style>
