<template>
  <ACard :bordered="false" class="search-card">
    <AForm
      ref="formRef"
      :model="formModel"
      layout="inline"
      class="flex flex-wrap gap-16px items-center"
    >
      <AFormItem :label="t('page.kyc.searchtime')">
        <ARangePicker
          v-model:value="queryRangePicker"
          show-time
          :placeholder="[t('page.kyc.starttime'), t('page.kyc.endtime')]"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          class="w-400px"
          @change="handleTimeChange"
        />
      </AFormItem>
      <AFormItem :label="t('page.kyc.status')">
        <ASelect
          v-model:value="formModel.status"
          :placeholder="t('page.kyc.plestatus')"
          allow-clear
          class="w-200px"
        >
          <ASelectOption value="PENDING">{{ t('page.kyc.pending') }}</ASelectOption>
          <ASelectOption value="APPROVED">{{ t('page.kyc.approved') }}</ASelectOption>
          <ASelectOption value="REJECTED">{{ t('page.kyc.rejected') }}</ASelectOption>
        </ASelect>
      </AFormItem>
      <AFormItem class="flex-1 justify-end">
        <ASpace>
          <AButton type="primary" @click="handleSearch">
            <template #icon>
              <icon-mdi-search />
            </template>{{ t('page.kyc.search') }}</AButton>
          <AButton @click="handleReset">
            <template #icon>
            <icon-mdi-refresh />
          </template>{{ t('page.kyc.reset') }}</AButton>
        </ASpace>
      </AFormItem>
    </AForm>
  </ACard>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import {
  Form as AForm,
  FormItem as AFormItem,
  Select as ASelect,
  SelectOption as ASelectOption,
  Button as AButton,
  Space as ASpace,
  Card as ACard,
  DatePicker
} from 'ant-design-vue';
import type { FormInstance } from 'ant-design-vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const ARangePicker = DatePicker.RangePicker;
import dayjs, { Dayjs } from 'dayjs';

interface SearchModel {
  pageNum: number;
  pageSize: number;
  createTimeStart?: string;
  createTimeEnd?: string;
  status?: string;
}

const props = withDefaults(defineProps<{
  model: SearchModel;
}>(), {
  model: () => ({
    pageNum: 1,
    pageSize: 10,
    createTimeStart: undefined,
    createTimeEnd: undefined,
    status: undefined
  })
});

const emit = defineEmits<{
  'update:model': [value: SearchModel];
  'search': [];
  'reset': [];
}>();

const formRef = ref<FormInstance>();
const { resetFields } = AForm.useForm(props.model);

const formModel = computed({
  get: () => props.model,
  set: (val: SearchModel) => emit('update:model', val)
});

const queryRangePicker = ref<[string, string]>(['', '']);

const handleTimeChange = (dates: any, dateStrings: [string, string]) => {
  formModel.value.createTimeStart = dateStrings[0] || undefined;
  formModel.value.createTimeEnd = dateStrings[1] || undefined;
};

function handleSearch() {
  emit('search');
}

function handleReset() {
  queryRangePicker.value = ['', ''];
  resetFields();
  formModel.value = {
    ...formModel.value,
    createTimeStart: undefined,
    createTimeEnd: undefined,
    status: undefined,
    pageNum: 1
  };
  emit('reset');
}

watch(
  () => [props.model.createTimeStart, props.model.createTimeEnd],
  ([start, end]) => {
    queryRangePicker.value = [start || '', end || ''];
  },
  { immediate: true }
);
</script>

<style scoped>
.search-card {
  margin-bottom: 16px;
}

.w-200px {
  width: 200px;
}

.w-400px {
  width: 400px;
}
</style>
