<template>
  <ACard :bordered="false" class="search-card">
    <AForm layout="inline">
      <AFormItem>
        <AInput
          v-model:value="formModel.searchKey"
          :placeholder="t('page.apdevice.plesearch')"
          allow-clear
          class="w-400px"
          @pressEnter="search"
        />
      </AFormItem>
      <AFormItem>
        <ASpace>
          <AButton type="primary" ghost :loading="loading" @click="search">
            <template #icon>
              <icon-mdi-search />
            </template>
            {{ t('page.apdevice.search') }}
          </AButton>
          <AButton @click="reset">
            <template #icon>
              <icon-mdi-refresh />
            </template>
            {{ t('page.apdevice.reset') }}
          </AButton>
        </ASpace>
      </AFormItem>
    </AForm>
  </ACard>
</template>

<script setup lang="ts">
import { Form as AForm, FormItem as AFormItem, Input as AInput, Button as AButton, Space as ASpace, Card as ACard } from 'ant-design-vue';
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';

const { t } = useI18n();

interface Props {
  model: {
    searchKey?:string;
    pageNum: number;
    pageSize: number;
  };
  loading?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
});

const emit = defineEmits(['update:model', 'search', 'reset']);

// 使用计算属性来处理双向绑定
const formModel = computed({
  get: () => props.model,
  set: (val) => emit('update:model', val)
});

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

const reset = () => {
  // 触发重置事件
  emit('reset');
};
</script>

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

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