<script setup lang="ts">
import { NButton, NCard, NDatePicker, NFlex, NGrid, NGridItem, NSelect, type SelectOption } from 'naive-ui';
import { toRefs } from 'vue';

const props = defineProps<{
  options: SelectOption[];
}>();

const range = defineModel<[number, number]>('range');
const selected = defineModel<string[]>('selected', { default: [] });
const loading = defineModel<boolean>('loading', { default: false });

const emit = defineEmits<{
  query: [params?: { range: [number, number]; selected: string[] }];
}>();

const { options } = toRefs(props);

const onQuery = () => {
  emit('query');
};
</script>

<template>
  <NCard size="small">
    <template #default>
      <NFlex justify="space-between" :wrap="false">
        <NGrid :x-gap="8" :y-gap="8">
          <NGridItem span="22">
            <NDatePicker type="datetimerange" v-model:value="range" />
          </NGridItem>
          <NGridItem span="22">
            <NSelect multiple v-model:value="selected" :options="options" />
          </NGridItem>
        </NGrid>
        <NButton secondary :loading="loading" @click="onQuery">查询数据</NButton>
      </NFlex>
    </template>
  </NCard>
</template>

<style scoped lang="scss"></style>
