<template>
  <ACard :bordered="false" class="search-card">
    <AForm layout="inline">
      <AFormItem label="设备名称">
        <AInput
          v-model:value="model.deviceName"
          placeholder="请输入设备名称"
          allow-clear
          class="w-200px"
          @pressEnter="search"
        />
      </AFormItem>
      <AFormItem label="MAC地址">
        <AInput
          v-model:value="model.deviceMac"
          placeholder="请输入MAC地址"
          allow-clear
          class="w-200px"
          @pressEnter="search"
        />
      </AFormItem>
      <AFormItem>
        <ASpace>
          <AButton type="primary" :loading="loading" @click="search">
            <template #icon>
              <icon-mdi-search />
            </template>
            搜索
          </AButton>
          <AButton @click="reset">
            <template #icon>
              <icon-mdi-refresh />
            </template>
            重置
          </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';

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

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

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

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

const reset = () => {
  emit('update:model', {
    ...props.model,
    deviceName: '',
    deviceMac: '',
    pageNum: 1
  });
  emit('reset');
};
</script>

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

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