<template>
  <!-- 搜索表单 -->
  <a-form
    :model="searchForm"
    layout="inline"
    class="search-form"
    @finish="handleSearch"
  >
    <a-form-item label="商户名称">
      <a-input
        v-model:value="searchForm.merchantName"
        placeholder="请输入商户名称"
        allow-clear
        style="width: 160px"
      />
    </a-form-item>

    <a-form-item label="联系人">
      <a-input
        v-model:value="searchForm.realName"
        placeholder="请输入联系人"
        allow-clear
        style="width: 160px"
        :maxlength="20"
      />
    </a-form-item>

    <a-form-item label="联系电话">
      <a-input
        v-model:value="searchForm.phone"
        placeholder="请输入联系电话"
        allow-clear
        style="width: 160px"
        :maxlength="11"
      />
    </a-form-item>

    <a-form-item label="店铺类型">
      <a-input
        v-model:value="searchForm.shopType"
        placeholder="请输入店铺类型"
        allow-clear
        style="width: 160px"
      />
    </a-form-item>

    <a-form-item label="状态">
      <a-select
        v-model:value="searchForm.status"
        placeholder="请选择状态"
        allow-clear
        style="width: 120px"
      >
        <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>
      <a-space>
        <a-button type="primary" html-type="submit">
          <template #icon>
            <SearchOutlined />
          </template>
          查询
        </a-button>
        <a-button @click="resetForm">
          <template #icon>
            <ReloadOutlined />
          </template>
          重置
        </a-button>
        <a-button type="primary" @click="emit('add')">
          <template #icon>
            <PlusOutlined />
          </template>
          新增
        </a-button>
        <a-dropdown v-if="selection.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="emit('remove', selection)">
                <DeleteOutlined />
                批量删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button>
            批量操作
            <DownOutlined />
          </a-button>
        </a-dropdown>
      </a-space>
    </a-form-item>
  </a-form>
</template>

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

  const emit = defineEmits(['search', 'add', 'remove']);

  // 搜索表单数据
  const searchForm = reactive({
    merchantName: '',
    realName: '',
    phone: '',
    shopType: '',
    status: undefined
  });

  // 搜索事件
  const handleSearch = () => {
    emit('search', { ...searchForm });
  };

  // 重置表单
  const resetForm = () => {
    Object.assign(searchForm, {
      merchantName: '',
      realName: '',
      phone: '',
      shopType: '',
      status: undefined
    });
    emit('search', { ...searchForm });
  };

  defineProps({
    selection: {
      type: Array,
      default: () => []
    }
  });
</script>
