<template>
  <a-row style="margin-bottom: 20px;" justify="end">
    <a-col>
      <a-form ref="formRef" layout="inline" :model="formModel" :colon="false">
        <a-form-item name="date">
          <a-range-picker style="width: 250px;" v-model:value="formModel.date" />
        </a-form-item>
        <a-form-item name="device_name">
          <a-select style="width: 200px;" placeholder="请选择设备型号" v-model:value="formModel.device_name">
            <a-select-option value="1">
              Dock 2
            </a-select-option>
            <a-select-option value="2">
              M30
            </a-select-option>
            <a-select-option value="3">
              Mavice 3E
            </a-select-option>
            <a-select-option value="4">
              DJI
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item name="keyword">
          <a-input style="width: 200px;" placeholder="项目名称、设备SN" v-model:value="formModel.keyword" />
        </a-form-item>
        <a-form-item>
          <a-button style="margin-right: 10px;" @click="handleClicSekarch">
            <template #icon>
              <SearchOutlined />
            </template>
          </a-button>
          <a-button @click="handleClickReset">
            <template #icon>
              <ReloadOutlined />
            </template>
          </a-button>
        </a-form-item>
      </a-form>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue';

interface Props {
  onClickSearch: (query: any) => Promise<any>,
  onClickReset: (query: any) => Promise<any>,
};

const props = withDefaults(defineProps<Props>(), {

});

const formRef = ref();

const formModel = reactive({
  date: [],
  device_name: undefined,
  keyword: '',
})

// 点击查询
const handleClicSekarch = async () => {
  const values = formRef.value?.getFieldsValue();
  await props.onClickSearch(values);
}

// 点击重置
const handleClickReset = async () => {
  formRef.value?.resetFields();
  const values = formRef.value?.getFieldsValue();
  await props.onClickReset(values);
}
</script>

<style lang="scss" scoped></style>