<script setup lang="ts">
import { Button, Form, Input, Select, DatePicker } from 'ant-design-vue';

import { $t } from '@/locales';

interface Emits {
  (e: 'reset'): void;
  (e: 'search'): void;
}

interface Props {
  model: Api.ActivationCode.ActivationCodeSearchParams;
  updateSearchParams: (params: Partial<Api.ActivationCode.ActivationCodeSearchParams>) => void;
  activationCodeTypeOptions: { label: string; value: string; id: string }[];
}

defineOptions({
  name: 'HeaderSearch',
});

const props = defineProps<Props>();

const emit = defineEmits<Emits>();

const handleReset = () => {
  emit('reset');
};

const handleSearch = () => {
  emit('search');
};

</script>

<template>
  <div class="flex-col gap-16px overflow-hidden lt-sm:overflow-auto">
    <Form :model="model" label-width="80px">
      <div class="flex-col gap-16px lt-sm:flex-col">
        <div class="grid grid-cols-1 gap-16px lg:grid-cols-4 sm:grid-cols-2">
          <!-- 激活码搜索 -->
          <Form.Item label="激活码" name="code">
            <Input
              :value="model.code"
              placeholder="请输入激活码"
              allow-clear
              @update:value="updateSearchParams({ code: $event })"
            />
          </Form.Item>

          <!-- 类型 -->
          <Form.Item label="类型" name="typeId">
            <Select
              :value="model.typeId"
              placeholder="请选择类型"
              allow-clear
              :options="props.activationCodeTypeOptions"
              @update:value="updateSearchParams({ typeId: $event as string })"
            />
          </Form.Item>

          <!-- 是否已回收 -->
          <Form.Item label="是否已回收" name="revoked">
            <Select
              :value="model.revoked === undefined ? undefined : String(model.revoked)"
              placeholder="请选择回收状态"
              allow-clear
              :options="[
                { label: '是', value: 'true' },
                { label: '否', value: 'false' }
              ]"
              @update:value="updateSearchParams({ revoked: $event === undefined ? undefined : ($event === 'true') })"
            />
          </Form.Item>

          <!-- =========== 新增：状态筛选 =========== -->
          <!-- <Form.Item label="激活状态" name="activated">
            <Select
              :value="model.activated === undefined ? undefined : String(model.activated)"
              placeholder="请选择状态"
              allow-clear
              :options="[
                { label: '未使用', value: '0' },
                { label: '已激活', value: '1' }
              ]"
              @update:value="updateSearchParams({ activated: $event === undefined ? undefined : Number($event) })"
            />
          </Form.Item> -->

          <!-- =========== 新增：时间范围筛选 =========== -->
          <Form.Item label="时间筛选" name="createTimeRange">
            <DatePicker.RangePicker
              style="width: 100%"
              :value="model.startDate && model.endDate ? [dayjs(model.startDate), dayjs(model.endDate)] : undefined"
              :show-time="{ format: 'HH:mm:ss' }"
              format="YYYY-MM-DD HH:mm:ss"
              placeholder="['开始时间', '结束时间']"
              @change="(dates) => {
                if (dates && dates[0] && dates[1]) {
                  updateSearchParams({
                    startDate: dates[0].format('YYYY-MM-DD HH:mm:ss'),
                    endDate: dates[1].format('YYYY-MM-DD HH:mm:ss')
                  });
                } else {
                  updateSearchParams({
                    startDate: undefined,
                    endDate: undefined
                  });
                }
              }"
            />
          </Form.Item>


        </div>
        <div class="flex gap-12px">
          <Button type="primary" ghost @click="handleSearch">
            {{ $t('common.search') }}
          </Button>
          <Button @click="handleReset">
            {{ $t('common.reset') }}
          </Button>
        </div>
      </div>
    </Form>
  </div>
</template>

<style scoped>
/* 确保DatePicker.RangePicker在不同屏幕下正常显示 */
:deep(.ant-picker) {
  width: 100%;
}
</style>
