<!-- 搜索表单 -->
<template>
  <a-card :bordered="false" :body-style="{ padding: '38px 16px' }">
    <div
      style="
        max-width: 550px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
      "
    >
      <div style="width: 100%">
        <a-input-search
          v-model:value="searchText"
          placeholder="请输入搜索关键词"
          @pressEnter="search"
          @search="search"
        />
        <div class="ele-text-placeholder" style="margin-top: 8px">
          <!--          热门关键词：-->
          <!--          <template v-for="(tag, index) in tags" :key="tag">-->
          <!--            <a-tooltip v-if="tag.length > 4" :title="tag">-->
          <!--              <a-tag :closable="index !== 0" @close="handleClose(tag)" @click="search(tag)" style="cursor: pointer">-->
          <!--                {{ `${tag.slice(0, 20)}...` }}-->
          <!--              </a-tag>-->
          <!--            </a-tooltip>-->
          <!--            <a-tag v-else :closable="index !== 0" @click="search(tag)">-->
          <!--              {{ tag }}-->
          <!--            </a-tag>-->
          <!--          </template>-->
        </div>
      </div>
    </div>
  </a-card>
</template>

<script lang="ts" setup>
  import useSearch from '@/utils/use-search';
  import type { AppParam } from '@/api/app/model';
  import { searchHistory } from '@/api/market';
  import { ref, unref, watch } from 'vue';
  import { assignObject } from 'ele-admin-pro';
  import { useRouter } from 'vue-router';

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

  const emit = defineEmits<{
    (e: 'search', where?: AppParam): void;
    (e: 'add', tab?: any): void;
    (e: 'remove'): void;
  }>();
  const tags = ref<String[]>([]);

  // 表单数据
  const { where } = useSearch<AppParam>({
    appName: '',
    appCode: ''
  });

  // 接收传参
  const { currentRoute } = useRouter();
  const { query } = unref(currentRoute);
  console.log(query);
  if (query.keyword) {
    where.appName = String(query.keyword);
    emit('search', where);
  }

  // 下拉选项
  const type = ref('appName');
  // 搜索内容
  const searchText = ref('');

  /* 搜索 */
  const search = (keyword?: any) => {
    // searchHistory({ keyword }).then((data) => {
    //   tags.value = data;
    // });
    assignObject(where, {});
    if (type.value == 'appName') {
      where.appName = searchText.value;
    }
    if (type.value == 'appCode') {
      where.appCode = searchText.value;
    }
    if (keyword) {
      where.appName = keyword;
    }
    emit('search', where);
  };

  const handleClose = (removedTag: string) => {
    const tag = tags.value.filter((tag) => tag !== removedTag);
    console.log(tag);
  };

  watch(
    () => props.selection,
    () => {}
  );
</script>
