<!-- 搜索表单 -->
<template>
  <!-- 搜索表单 -->
  <a-form
    :model="searchForm"
    layout="inline"
    class="search-form"
    @finish="handleSearch"
  >
    <a-form-item label="推荐人ID">
      <a-input-number
        v-model:value="searchForm.dealerId"
        placeholder="请输入推荐人ID"
        :min="1"
        style="width: 160px"
      />
    </a-form-item>

    <a-form-item label="被推荐人ID">
      <a-input-number
        v-model:value="searchForm.userId"
        placeholder="请输入被推荐人ID"
        :min="1"
        style="width: 160px"
      />
    </a-form-item>

    <a-form-item label="建立时间">
      <a-range-picker
        v-model:value="searchForm.dateRange"
        style="width: 240px"
      />
    </a-form-item>

    <a-form-item>
      <a-space>
        <a-button type="primary" html-type="submit" class="ele-btn-icon">
          <template #icon>
            <SearchOutlined />
          </template>
          搜索
        </a-button>
        <a-button @click="resetSearch"> 重置 </a-button>
        <a-button @click="exportData" class="ele-btn-icon">
          <template #icon>
            <ExportOutlined />
          </template>
          导出
        </a-button>
      </a-space>
    </a-form-item>
  </a-form>

  <!-- 操作按钮 -->
  <!--    <div class="action-buttons">-->
  <!--      <a-space>-->
  <!--        <a-button type="primary" @click="add" class="ele-btn-icon">-->
  <!--          <template #icon>-->
  <!--            <PlusOutlined/>-->
  <!--          </template>-->
  <!--          建立推荐关系-->
  <!--        </a-button>-->
  <!--        <a-button @click="viewTree" class="ele-btn-icon">-->
  <!--          <template #icon>-->
  <!--            <ApartmentOutlined/>-->
  <!--          </template>-->
  <!--          推荐关系树-->
  <!--        </a-button>-->
  <!--        <a-button @click="exportData" class="ele-btn-icon">-->
  <!--          <template #icon>-->
  <!--            <ExportOutlined/>-->
  <!--          </template>-->
  <!--          导出数据-->
  <!--        </a-button>-->
  <!--      </a-space>-->
  <!--    </div>-->
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import {
    PlusOutlined,
    SearchOutlined,
    ApartmentOutlined,
    ExportOutlined
  } from '@ant-design/icons-vue';
  import type { ShopDealerRefereeParam } from '@/api/shop/shopDealerReferee/model';
  import dayjs from 'dayjs';

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

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

  // 搜索表单
  const searchForm = reactive<any>({
    dealerId: undefined,
    userId: undefined,
    level: undefined,
    dateRange: undefined
  });

  // 搜索
  const handleSearch = () => {
    const searchParams: ShopDealerRefereeParam = {};

    if (searchForm.dealerId) {
      searchParams.dealerId = searchForm.dealerId;
    }
    if (searchForm.userId) {
      searchParams.userId = searchForm.userId;
    }
    if (searchForm.level) {
      searchParams.level = searchForm.level;
    }
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      searchParams.startTime = dayjs(searchForm.dateRange[0]).format(
        'YYYY-MM-DD'
      );
      searchParams.endTime = dayjs(searchForm.dateRange[1]).format(
        'YYYY-MM-DD'
      );
    }

    emit('search', searchParams);
  };

  // 重置搜索
  const resetSearch = () => {
    searchForm.dealerId = undefined;
    searchForm.userId = undefined;
    searchForm.level = undefined;
    searchForm.dateRange = undefined;
    emit('search', {});
  };

  // 新增
  const add = () => {
    emit('add');
  };

  // 查看推荐树
  const viewTree = () => {
    emit('viewTree');
  };

  // 导出数据
  const exportData = () => {
    emit('export');
  };
</script>

<style lang="less" scoped>
  .search-container {
    background: #fff;
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 16px;

    .search-form {
      margin-bottom: 16px;

      :deep(.ant-form-item) {
        margin-bottom: 8px;
      }
    }

    .action-buttons {
      border-top: 1px solid #f0f0f0;
      padding-top: 16px;
    }
  }
</style>
