<script setup lang="ts">
import { $t } from '@/locales';
import { enableStatusOptions } from '@/constants/business';
import { SyncOutlined, SearchOutlined } from '@ant-design/icons-vue';

defineOptions({
  name: 'logSearch'
});



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

defineProps<{
  deptTreeData: Api.Common.CommonTree;
}>();

const emit = defineEmits<Emits>();

const model = defineModel<any>('model', { required: true });

/**记录开始结束时间 */
let queryRangePicker = ref<[string, string]>(['', '']);

function reset() {
  // 重置表单
  //formRef.value?.resetFields();

  // 重置日期选择器
  queryRangePicker.value = ['', ''];

  // 确保 model 也被重置
  model.value = {};

  // 使用 nextTick 确保视图更新后检查
  nextTick(() => {
    console.log('视图更新后：', { ...model.value });
    console.log(model);
  });
  emit('reset');
}

function search() {
  if (!queryRangePicker.value) {
    queryRangePicker.value = ['', ''];
  }
  model.value['params[beginTime]'] = queryRangePicker.value[0];
  model.value['params[endTime]'] = queryRangePicker.value[1];
  emit('search');
}
</script>

<template>
  <ACard :title="$t('common.search')" :bordered="false" class="card-wrapper">
    <AForm :model="model" :label-width="80">
      <ARow :gutter="[16, 16]" wrap>
        <ACol :lg="6" :md="12" :xs="24">
          <AFormItem :label="$t('page.manage.log.operIp')" name="operIp" class="m-0">
            <AInput v-model:value="model.operIp" />
          </AFormItem>
        </ACol>

        <ACol :lg="6" :md="12" :xs="24">
          <AFormItem :label="$t('page.manage.log.module')" name="title" class="m-0">
            <AInput v-model:value="model.title" />
          </AFormItem>
        </ACol>


        <ACol :lg="6" :md="12" :xs="24">
          <AFormItem :label="$t('page.manage.user.status')" name="status" class="m-0">
            <ASelect v-model:value="model.status" :placeholder="$t('page.manage.user.form.status')" allow-clear>
              <ASelectOption v-for="option in enableStatusOptions" :key="option.value" :value="option.value">
                {{ $t(option.label) }}
              </ASelectOption>
            </ASelect>
          </AFormItem>
        </ACol>

        <ACol :lg="6" :md="12" :xs="24">
          <AFormItem :label="$t('page.manage.log.operName')" name="operName" class="m-0">
            <AInput v-model:value="model.operName" />
          </AFormItem>
        </ACol>




        <a-col :lg="8" :md="12" :xs="24">
          <a-form-item :label="$t('page.manage.log.operTime')" name="queryRangePicker">
            <a-range-picker v-model:value="queryRangePicker" allow-clear bordered show-time
              value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" style="width: 100%"></a-range-picker>
          </a-form-item>
        </a-col>

        <ACol :lg="16" :md="12" :xs="24">
          <AFormItem class="m-0">
            <div class="w-full flex-y-center justify-end gap-8px">

              <a-space :size="8">
                <a-button @click="reset">
                  <template #icon>
                    <SyncOutlined />
                  </template>
                  {{ $t('common.reset') }}
                </a-button>
                <AButton type="primary" ghost @click="search">
                  <template #icon>
                    <SearchOutlined />
                  </template>
                  {{ $t('common.search') }}
                </AButton>
              </a-space>

            </div>
          </AFormItem>
        </ACol>

      </ARow>
    </AForm>
  </ACard>
</template>

<style scoped></style>
