<script setup lang="ts">
/**
 * 通用「列表/卡片」视图切换组件
 *
 * 为什么封装：多个订单列表页都需要同样的切换控件，统一外观（图标+文字的分段控件）
 * 与交互，配合 useViewMode(storageKey) 使用自带记忆能力。
 *
 * 用法：
 *   const viewMode = useViewMode('product-order-view-mode');
 *   <ViewModeSwitch v-model="viewMode" />
 */
import type { ViewMode } from './use-view-mode';

import { IconifyIcon } from '@vben/icons';

defineOptions({ name: 'ViewModeSwitch' });

withDefaults(
  defineProps<{
    /** 卡片视图文案，允许按页面语境自定义（如「卡片看板」） */
    cardLabel?: string;
    /** 列表视图文案 */
    listLabel?: string;
  }>(),
  {
    cardLabel: '卡片',
    listLabel: '列表',
  },
);

/** 当前视图模式，v-model 双向绑定，记忆逻辑由 useViewMode 承担 */
const modelValue = defineModel<ViewMode>({ default: 'list' });

/** 切换视图：点击已选中项不重复触发 */
function switchTo(mode: ViewMode) {
  if (modelValue.value !== mode) {
    modelValue.value = mode;
  }
}
</script>

<template>
  <div class="view-mode-switch" role="radiogroup" aria-label="视图切换">
    <button
      type="button"
      class="vms-item"
      :class="{ active: modelValue === 'list' }"
      role="radio"
      :aria-checked="modelValue === 'list'"
      @click="switchTo('list')"
    >
      <IconifyIcon icon="ant-design:bars-outlined" class="vms-icon" />
      <span>{{ listLabel }}</span>
    </button>
    <button
      type="button"
      class="vms-item"
      :class="{ active: modelValue === 'card' }"
      role="radio"
      :aria-checked="modelValue === 'card'"
      @click="switchTo('card')"
    >
      <IconifyIcon icon="ant-design:appstore-outlined" class="vms-icon" />
      <span>{{ cardLabel }}</span>
    </button>
  </div>
</template>

<style lang="less" scoped>
/* App 风格分段控件：胶囊容器 + 滑块式选中态，颜色全部走主题变量适配暗色 */
.view-mode-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: hsl(var(--muted) / 60%);
  border: 1px solid hsl(var(--border) / 60%);
  border-radius: 10px;
}

.vms-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 14px;
  font-size: 13px;
  line-height: 20px;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 8px;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;

  &:hover {
    color: hsl(var(--foreground));
  }

  &.active {
    font-weight: 600;
    color: hsl(var(--primary));
    background: hsl(var(--background));
    box-shadow: 0 1px 4px hsl(var(--foreground) / 10%);
  }
}

.vms-icon {
  font-size: 15px;
}
</style>
