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

const props = withDefaults(defineProps<{
  /**
   * 当前页码
   */
  value: number;
  
  /**
   * 最大页码
   */
  maxPage: number;
  
  /**
   * 客户端类型
   */
  clientType?: 'pc' | 'ipad' | 'mobile';
}>(), {
  clientType: 'pc'
});

const emit = defineEmits<{
  change: [value: number];
}>();

// 计算实际显示的当前页码，如果超过最大页码则显示最大页码
const displayPage = computed(() => {
  return Math.min(props.value, props.maxPage);
});

// 根据 clientType 计算组件大小类
const sizeClass = computed(() => {
  return `cf-page-indicator--${props.clientType}`;
});

// 输入框的值
const inputValue = ref(displayPage.value.toString());

// 处理输入
const handleInput = (event: Event) => {
  const target = event.target as HTMLInputElement;
  const value = target.value;
  
  // 只允许输入数字
  const numericValue = value.replace(/[^\d]/g, '');
  target.value = numericValue;
  inputValue.value = numericValue;
};

// 处理失焦，验证并更新页码
const handleBlur = () => {
  let page = parseInt(inputValue.value) || 1;
  
  // 限制范围：1 到 maxPage
  page = Math.max(1, Math.min(page, props.maxPage));
  
  inputValue.value = page.toString();
  emit('change', page);
};

// 处理回车键
const handleKeydown = (event: KeyboardEvent) => {
  if (event.key === 'Enter') {
    (event.target as HTMLInputElement).blur();
  }
};

// 监听 displayPage 变化，同步到输入框
watch(displayPage, (newValue) => {
  inputValue.value = newValue.toString();
});
</script>

<template>
  <div 
    class="cf-page-indicator"
    :class="sizeClass"
  >
    <input
      class="cf-page-indicator__current"
      type="text"
      inputmode="numeric"
      :value="inputValue"
      @input="handleInput"
      @blur="handleBlur"
      @keydown="handleKeydown"
    />
    <div class="cf-page-indicator__total">{{ `/${maxPage}` }}</div>
  </div>
</template>

<style>
.cf-page-indicator {
    width: fit-content;
    height: fit-content;
    display: inline-flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.30);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    color: #ffffff;
    user-select: none;
    box-sizing: border-box;
}

.cf-page-indicator__current {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.20);
    border-radius: 6px;
    border: none;
    outline: none;
    color: #ffffff;
    text-align: center;
    cursor: text;
    padding: 0;
}

.cf-page-indicator__current:focus {
    background: rgba(255, 255, 255, 0.3);
}

/* PC 尺寸 */
.cf-page-indicator--pc {
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    padding: 3px 12px;
    gap: 4px;
}

.cf-page-indicator--pc .cf-page-indicator__current {
    width: 24px;
    height: 22px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
}

.cf-page-indicator--pc .cf-page-indicator__total {
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
}

/* iPad 尺寸 */
.cf-page-indicator--ipad {
    padding: 8px 20px;
    gap: 8px;
}

.cf-page-indicator--ipad .cf-page-indicator__current {
    width: 36px;
    height: 32px;
    font-size: 16px;
    font-weight: 500;
}

.cf-page-indicator--ipad .cf-page-indicator__total {
    font-size: 16px;
    font-weight: 500;
}

/* Mobile 尺寸 */
.cf-page-indicator--mobile {
    padding: 8px 20px;
    gap: 8px;
}

.cf-page-indicator--mobile .cf-page-indicator__current {
    width: 36px;
    height: 32px;
    font-size: 16px;
    font-weight: 500;
}

.cf-page-indicator--mobile .cf-page-indicator__total {
    font-size: 16px;
    font-weight: 500;
}
</style>
