<script setup lang="ts">
import type { SelectProps } from "ant-design-vue";
import { ref } from "vue";

const options = ref<SelectProps['options']>([
  {
    value: '3',
    label: '三天内',
  },
  {
    value: '7',
    label: '一周内',
  },
  {
    value: '30',
    label: '一个月内',
  },
  {
    value: '365',
    label: '一年内',
  },
]);

const filterValue = ref("3");

const emits = defineEmits<{
  (e: "filterChange", value: string): void;
  (e: "deleteAll"): void;
}>();

function handleChange(value: string) {
  emits("filterChange", value);
}

function handleDeleteAll() {
  emits("deleteAll");
}
</script>

<template>
  <a-row justify="space-between">
    <a-col>
      <a-select
        ref="select"
        v-model:value="filterValue"
        style="width: 120px"
        :options="options"
        @change="handleChange"
      ></a-select>
    </a-col>
    <a-col>
      <a-popconfirm
        title="确定删除？"
        ok-text="确定"
        cancel-text="取消"
        @confirm="handleDeleteAll"
        placement="topRight"
      >
        <a-button>清除所有记录</a-button>
      </a-popconfirm>
    </a-col>
  </a-row>
</template>
