<script lang="ts" setup>
  import { Popover, Slider, Button } from 'ant-design-vue';
  import { LayoutOutlined } from '@ant-design/icons-vue';
  import { computed } from 'vue';

  const props = withDefaults(
    defineProps<{
      min?: number;
      max?: number;
      value?: number;
    }>(),
    {
      min: 4,
      max: 12,
      value: 4,
    }
  );

  const emit = defineEmits(['change', 'update:value']);

  const generateLayoutMarks = (min: number, max: number) => {
    const marks = {};
    Array.from({ length: max - min + 1 }).forEach((_, index) => {
      const key = index + min;
      marks[key] = key;
    });
    return marks;
  };

  const getMarks = computed(() => {
    const { min, max } = props;
    return generateLayoutMarks(min, max);
  });

  const handleChange = (value: number) => {
    emit('update:value', value);
    emit('change', value);
  };
</script>

<template>
  <Popover :trigger="['hover']">
    <template #content>
      <div class="w-60">
        <div>每行显示数量</div>
        <Slider
          :value="props.value"
          :max="props.max"
          :min="props.min"
          :marks="getMarks"
          @change="handleChange"
        />
      </div>
    </template>
    <Button type="primary">
      <LayoutOutlined />
    </Button>
  </Popover>
</template>