<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 label="订单状态">-->
      <!--        <a-select-->
      <!--          v-model:value="where.isInvalid"-->
      <!--          placeholder="全部"-->
      <!--          allow-clear-->
      <!--          style="width: 120px"-->
      <!--        >-->
      <!--          <a-select-option :value="0">有效</a-select-option>-->
      <!--          <a-select-option :value="1">失效</a-select-option>-->
      <!--        </a-select>-->
      <!--      </a-form-item>-->

      <!--      <a-form-item label="结算状态">-->
      <!--        <a-select-->
      <!--          v-model:value="where.isSettled"-->
      <!--          placeholder="全部"-->
      <!--          allow-clear-->
      <!--          style="width: 120px"-->
      <!--        >-->
      <!--          <a-select-option :value="0">未结算</a-select-option>-->
      <!--          <a-select-option :value="1">已结算</a-select-option>-->
      <!--        </a-select>-->
      <!--      </a-form-item>-->

      <a-form-item>
        <a-space>
          <a-input-search
            allow-clear
            placeholder="请输入关键词"
            style="width: 240px"
            v-model:value="where.keywords"
            @search="handleSearch"
          />
          <!--          <a-button type="primary" html-type="submit" class="ele-btn-icon">-->
          <!--            <template #icon>-->
          <!--              <SearchOutlined/>-->
          <!--            </template>-->
          <!--            搜索-->
          <!--          </a-button>-->
          <a-button @click="resetSearch">
            重置
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <a-divider type="vertical"/>
    <a-space>
      <!--        <a-button @click="exportData" class="ele-btn-icon">-->
      <!--          <template #icon>-->
      <!--            <ExportOutlined />-->
      <!--          </template>-->
      <!--          导出数据-->
      <!--        </a-button>-->
      <a-button @click="openImport" class="ele-btn-icon">
        <template #icon>
          <UploadOutlined/>
        </template>
        导入数据
      </a-button>
      <a-button
        type="primary"
        danger
        @click="batchSettle"
        :disabled="selection?.length === 0"
      >
        <template #icon>
          <DollarOutlined/>
        </template>
        批量结算
      </a-button>
    </a-space>
  </div>

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

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

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

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

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

// 搜索表单
const {where, resetFields} = useSearch<ShopDealerOrderParam>({
  orderNo: '',
  productName: '',
  isInvalid: undefined,
  isSettled: undefined
});

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

// 重置搜索
const resetSearch = () => {
  // Object.keys(searchForm).forEach(key => {
  //   searchForm[key] = key === 'orderId' ? undefined : '';
  // });
  resetFields();
  emit('search', {});
};

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

// 批量结算
const batchSettle = () => {
  emit('batchSettle');
};

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

// 打开导入弹窗
const openImport = () => {
  showImport.value = true;
};
</script>
