<template>
  <a-form style="margin-bottom: 20px;" ref="formRef" layout="inline" :model="formModel" :colon="false">
    <a-form-item name="rangeDate">
      <a-range-picker style="width: 360px;" showTime valueFormat="YYYY-MM-DD HH:mm:ss" :placeholder="['开始时间', '结束时间']"
        v-model:value="formModel.rangeDate" />
    </a-form-item>
    <a-form-item name="level">
      <a-select style="width: 120px;" placeholder="告警等级" v-model:value="formModel.level">
        <a-select-option :value="0">
          正常
        </a-select-option>
        <a-select-option :value="1">
          警告
        </a-select-option>
        <a-select-option :value="2">
          危险
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item name="message">
      <a-input style="width: 100px;" placeholder="告警内容" v-model:value="formModel.message" />
    </a-form-item>
    <a-form-item>
      <a-button style="margin-right: 10px;" @click="handleClickSearch">
        <template #icon>
          <SearchOutlined />
        </template>
      </a-button>
      <a-button @click="handleClickReset">
        <template #icon>
          <ReloadOutlined />
        </template>
      </a-button>
    </a-form-item>
  </a-form>
</template>

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

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

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

});

const formRef = ref();

const formModel = reactive({
  rangeDate: undefined,
  level: undefined,
  message: undefined,
});

// 点击查询
const handleClickSearch = async () => {
  const values: any = formRef.value?.getFieldsValue();
  const data = { ...values };
  delete data.rangeDate;
  if (values.rangeDate?.length === 2) {
    data.begin_time = moment(values.rangeDate[0]).valueOf();
    data.end_time = moment(values.rangeDate[1]).valueOf();
  }
  await props.onClickSearch(data);
};

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

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