<!-- 搜索表单 -->
<template>
  <a-space :size="10" style="flex-wrap: wrap">
    <a-button
      type="primary"
      class="ele-btn-icon"
      :disabled="!selection.length"
      @click="add"
    >
      <template #icon>
        <MoneyCollectOutlined />
      </template>
      <span>批量充值</span>
    </a-button>
    <a-input-search
      allow-clear
      placeholder="请输入姓名"
      v-model:value="searchText"
      @pressEnter="search"
      @search="search"
    />
    <span style="margin-left: 20px">合计：￥{{ totalBalance }}</span>
  </a-space>
</template>

<script lang="ts" setup>
  import { MoneyCollectOutlined } from '@ant-design/icons-vue';
  import { ref } from 'vue';
  import { RechargeOrderParam } from '@/api/user/recharge/order/model';
  import useSearch from '@/utils/use-search';

  defineProps<{
    selection?: [];
    totalBalance?: number;
  }>();

  const searchText = ref('');

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

  // 表单数据
  const { where, resetFields } = useSearch<RechargeOrderParam>({
    orderId: undefined,
    keywords: ''
  });

  /* 搜索 */
  const search = () => {
    resetFields();
    where.keywords = searchText.value;
    emit('search', { ...where });
  };

  /*  添加 */
  const add = () => {
    emit('add');
  };
</script>
