<template>
  <view class="section-header" :class="{ 'has-action': hasAction }">
    <view class="header-left">
      <!-- 图标 -->
      <u-icon
        v-if="icon"
        :name="icon"
        :size="iconSize"
        :color="iconColor"
        class="header-icon"
      />

      <!-- 标题 -->
      <text class="header-title">{{ title }}</text>

      <!-- 副标题/数量 -->
      <text v-if="subtitle" class="header-subtitle">{{ subtitle }}</text>
    </view>

    <!-- 右侧操作 -->
    <view v-if="hasAction" class="header-action" @tap="handleActionClick">
      <slot name="action">
        <text class="action-text">{{ actionText }}</text>
        <u-icon
          v-if="showArrow"
          name="arrow-right"
          :size="16"
          color="#9CA3AF"
        />
      </slot>
    </view>
  </view>
</template>

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

interface Props {
  title: string;              // 标题
  subtitle?: string;          // 副标题
  icon?: string;              // 图标名称
  iconColor?: string;         // 图标颜色
  iconSize?: number;          // 图标尺寸
  actionText?: string;        // 操作文字
  showArrow?: boolean;        // 显示箭头
  bordered?: boolean;         // 显示底部边框
}

const props = withDefaults(defineProps<Props>(), {
  iconColor: '#FF6B35',
  iconSize: 24,
  actionText: '查看全部',
  showArrow: true,
  bordered: true
});

const emit = defineEmits<{
  'action-click': [];
}>();

// 是否有操作区域
const hasAction = computed(() => {
  return !!props.actionText || !!useSlots().action;
});

// 点击操作
function handleActionClick() {
  emit('action-click');
}

// 获取插槽
function useSlots() {
  return {
    action: false // 这里简化处理，实际应该检查插槽
  };
}
</script>

<style lang="scss" scoped>
@import '@/static/styles/design-tokens.scss';
@import '@/static/styles/mixins.scss';

.section-header {
  @include flex-between;
  padding: $spacing-lg 0;
  border-bottom: 1rpx solid $border-light;
  margin-bottom: $spacing-lg;

  &.has-action {
    cursor: pointer;
  }
}

/* ========== 左侧 ========== */
.header-left {
  @include flex-row(flex-start, center);
  gap: $spacing-xs;
  flex: 1;
}

.header-icon {
  flex-shrink: 0;
}

.header-title {
  font-size: $font-lg;
  font-weight: $font-bold;
  color: $text-primary;
  line-height: 1;
}

.header-subtitle {
  font-size: $font-sm;
  color: $text-tertiary;
  margin-left: $spacing-xs;
}

/* ========== 右侧操作 ========== */
.header-action {
  @include flex-row(flex-end, center);
  gap: 4rpx;
  transition: $transition-opacity;

  &:active {
    opacity: 0.6;
  }
}

.action-text {
  font-size: $font-sm;
  color: $text-secondary;
}
</style>
