<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>
