<!-- 搜索表单 -->
<template>
  <a-form
    :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
    :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
  >
    <a-row>
      <a-col :lg="6" :md="12" :sm="24" :xs="24">
        <a-form-item label="订单号">
          <a-input
            v-model:value.trim="where.outTradeNo"
            placeholder="请输入订单号"
            allow-clear
            @pressEnter="search"
          />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24" :xs="24">
        <a-form-item label="手机号码">
          <a-input
            v-model:value.trim="where.mobile"
            placeholder="请输入顾客手机号码"
            allow-clear
            @pressEnter="search"
          />
        </a-form-item>
      </a-col>
      <a-col :lg="6" :md="12" :sm="24" :xs="24">
        <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
          <a-space>
            <a-button type="primary" @click="search">查询</a-button>
            <a-button @click="reset">重置</a-button>
          </a-space>
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script lang="ts" setup>
  import useSearch from '@/utils/use-search';
  import type { CashierParam } from '@/api/apps/cashier/model';

  const emit = defineEmits<{
    (e: 'search', where?: CashierParam): void;
  }>();

  // 表单数据
  const { where, resetFields } = useSearch<CashierParam>({
    outTradeNo: '',
    merchantName: '',
    mobile: ''
  });

  /* 搜索 */
  const search = () => {
    emit('search', where);
  };

  /*  重置 */
  const reset = () => {
    resetFields();
    search();
  };
</script>
