<!-- 搜索表单 -->
<template>
  <a-space :size="10" style="flex-wrap: wrap">
    <a-input
      v-model:value="where.userId"
      placeholder="用户ID"
      allow-clear
      style="width: 130px"
      @press-enter="search"
    />
    <a-input
      v-model:value="where.goodsId"
      placeholder="商品ID"
      allow-clear
      style="width: 130px"
      @press-enter="search"
    />
    <a-select
      v-model:value="where.browseSource"
      placeholder="浏览来源"
      allow-clear
      style="width: 130px"
    >
      <a-select-option value="detail">商品详情</a-select-option>
      <a-select-option value="home">首页</a-select-option>
      <a-select-option value="category">分类</a-select-option>
      <a-select-option value="search">搜索</a-select-option>
      <a-select-option value="share">分享</a-select-option>
    </a-select>
    <a-range-picker
      v-model:value="dateRange"
      value-format="YYYY-MM-DD"
      :placeholder="['开始日期', '结束日期']"
      @change="onDateChange"
    />
    <a-button type="primary" class="ele-btn-icon" @click="search">
      <template #icon>
        <SearchOutlined />
      </template>
      <span>查询</span>
    </a-button>
    <a-button @click="reset">重置</a-button>
  </a-space>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import { SearchOutlined } from '@ant-design/icons-vue';
  import type { Dayjs } from 'dayjs';
  import type { ShopGoodsBrowseParam } from '@/api/shop/shopGoodsBrowse/model';

  const props = defineProps<{
    where?: ShopGoodsBrowseParam;
  }>();

  const emit = defineEmits<{
    (e: 'search', where?: ShopGoodsBrowseParam): void;
  }>();

  // 搜索条件（双向绑定）
  const where = computed(() => props.where ?? {});

  // 日期范围
  const dateRange = ref<[Dayjs, Dayjs] | undefined>();

  // 日期变化
  const onDateChange = (_dates: any, formatStrings: [string, string]) => {
    where.value.startTime = formatStrings[0] || undefined;
    where.value.endTime = formatStrings[1] || undefined;
  };

  // 搜索
  const search = () => {
    emit('search', { ...where.value });
  };

  // 重置
  const reset = () => {
    where.value.userId = undefined;
    where.value.goodsId = undefined;
    where.value.browseSource = undefined;
    where.value.startTime = undefined;
    where.value.endTime = undefined;
    dateRange.value = undefined;
    emit('search', {});
  };
</script>
