<template>
  <div class="flex items-center gap-20">
    <!-- 搜索表单 -->
    <a-form
      :model="where"
      layout="inline"
      class="search-form"
      @finish="handleSearch"
    >
      <a-form-item>
        <a-space>
          <a-button
            danger
            class="ele-btn-icon"
            v-if="selection.length > 0"
            :disabled="selection?.length === 0"
            @click="removeBatch"
          >
            <template #icon>
              <DeleteOutlined />
            </template>
            <span>批量删除</span>
          </a-button>
        </a-space>
      </a-form-item>

      <a-form-item>
        <a-space>
          <a-input-search
            allow-clear
            placeholder="请输入用户ID"
            style="width: 240px"
            v-model:value="where.keywords"
            @search="handleSearch"
          />
          <a-button @click="resetSearch"> 重置 </a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>

  <!-- 导入弹窗 -->
  <Import v-model:visible="showImport" @done="emit('importDone')" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { DeleteOutlined } from '@ant-design/icons-vue';
  import Import from './Import.vue';
  import useSearch from '@/utils/use-search';
  import { ShopDealerWithdrawParam } from '@/api/shop/shopDealerWithdraw/model';

  withDefaults(
    defineProps<{
      // 选中的数据
      selection?: any[];
    }>(),
    {
      selection: () => []
    }
  );

  const emit = defineEmits<{
    (e: 'search', where?: ShopDealerWithdrawParam): void;
    (e: 'batchSettle'): void;
    (e: 'export'): void;
    (e: 'importDone'): void;
    (e: 'remove'): void;
  }>();

  // 是否显示导入弹窗
  const showImport = ref(false);

  // 搜索表单
  const { where, resetFields } = useSearch<ShopDealerWithdrawParam>({
    keywords: ''
  });

  // 搜索
  const handleSearch = () => {
    const searchParams = { ...where };
    // 清除空值
    Object.keys(searchParams).forEach((key) => {
      if (searchParams[key] === '' || searchParams[key] === undefined) {
        delete searchParams[key];
      }
    });
    emit('search', searchParams);
  };

  // 重置搜索
  const resetSearch = () => {
    resetFields();
    emit('search', {});
  };

  // 批量删除
  const removeBatch = () => {
    emit('remove');
  };
</script>
