<template>
  <div class="custom-image-search">
    <CustomInput
      class="custom-search-input"
      placeholder="输入关键词，找到对应AI创作"
      v-model="search_value"
      align="left"
      @inputChange="onInputChange"
    >
      <template #leftIcon>
        <span class="left-search-icon">
          <SearchSvg></SearchSvg>
        </span>
      </template>
    </CustomInput>
    <div class="chose-type-box">
      <template v-for="item in SearchType" :key="item.value">
        <span
          @click="ChoseType(item.value)"
          :class="{ active: item.value == current_type }"
          >{{ item.label }}</span
        >
      </template>
    </div>
    <div class="waterfall-parent" id="waterfall-parent">
      <WaterfallVue
        :list="SearchList.list"
        :maxLen="pageSize - 1"
        :curLen="SearchList.list.length"
        :hasMorePages="hasMorePages"
        :loadingMore="loadingMore"
        @submit="onNextPage"
      ></WaterfallVue>
    </div>
    <div class="next-page" @click="onNextPage">下一页</div>
  </div>
</template>

<script lang="ts" setup>
import CustomInput from '@/components/custom/input/index.vue';
import { reactive, ref } from 'vue';
import SearchSvg from '@/assets/svg/select/search.svg';
import { debounce } from '@/utils/tool';
import { useSearch } from '@/utils/api/scenes';
import WaterfallVue from './components/waterfall.vue';

const search_value = ref('');
// 当前选择的类型
const current_type = ref('1');
const pageNum = ref(1);
const pageSize = ref(20);
const hasMorePages = ref(false);
const loadingMore = ref(false);
// 搜索结果
const SearchList = reactive({
  list: [],
});
const SearchType = [
  {
    label: '综合',
    value: '1',
  },
  {
    label: '最新',
    value: '2',
  },
];
// 下一页
const onNextPage = () => {
  if (loadingMore.value == true) {
    return;
  }
  //   搜索
  //   Search();
  // 测试
  loadingMore.value = true;
  console.log('可以请求下一页');
  Search2();
};
// 类型切换
const ChoseType = (value: string) => {
  if (current_type.value !== value) {
    current_type.value = value;
    // 搜索
  }
};
// 搜索
const Search = async () => {
  if (!search_value.value) {
    return;
  }
  try {
    const res: any = await useSearch({
      query: search_value.value,
      page: pageNum.value,
      limit: pageSize.value,
    });
    console.log(res);
  } catch (e) {
    console.log(e);
  }
};
const Search2 = () => {
  const list = [
    {
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.desktx.com%2Fd%2Ffile%2Fwallpaper%2Fanimals%2F20160822%2F05128add3de7bc5acfa3a38612673e1d.jpg&refer=http%3A%2F%2Fwww.desktx.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638440861&t=667c221c38da5abdb0ed7d34d87ef564',
      href: 'https://www.baidu.com',
      info: '一些图片描述文字asdasdasdasdasdasasdasd',
      headerText: '测试',
    },
    {
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile06.16sucai.com%2F2016%2F0506%2Ff43b5bab036349f7b4ffdef661da97a8.jpg&refer=http%3A%2F%2Ffile06.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638440861&t=fd805292f3f72e9d7ba51fc9f45245ea',
      href: 'https://www.baidu.com',
      info: '一些图片描述文字',
    },
    {
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F3%2F5a%2Ffe101126073_250_350.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638440861&t=72446335a210920f58bf6c6e6a106abe',
      href: 'https://www.baidu.com',
      info: '一些图片描述文字',
    },
    {
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbos.pgzs.com%2Frbpiczy%2FWallpaper%2F2015%2F1%2F22%2Fe975967d962e45a7af2863060371d81c-12.jpg&refer=http%3A%2F%2Fbos.pgzs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638440861&t=775ff5be8b8b1e9abc8848ff575e437d',
      href: 'https://www.baidu.com',
      info: '一些图片描述文字',
    },
    {
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.qqtn.com%2Fup%2F2017-11%2F2017110816281636782.jpg&refer=http%3A%2F%2Fpic.qqtn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638440862&t=36bd6acad4963ad2d153b3a4e220a363',
      href: 'https://www.baidu.com',
      info: '一些图片描述文字',
    },
    {
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h399%2F20180301%2F9ce9-fwnpcns9232331.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638441157&t=46c567a84e0172aa430f0d058ba9a92f',
      href: 'https://www.baidu.com',
      info: '一些图片描述文字',
    },
    {
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h640%2F20180109%2F9e54-fyqnici8428669.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638441197&t=70f9aec9253df0dcea506df28938327a',
      href: 'https://www.baidu.com',
      info: '一些图片描述文字',
    },
    {
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.euro-premium.cn%2Fsites%2Fdefault%2Ffiles%2F2017%2F12%2F2017-12-18-609.jpg&refer=http%3A%2F%2Fwww.euro-premium.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638441197&t=e67e19c5e29ebd66265d2ed779359002',
      href: 'https://www.baidu.com',
      info: '一些图片描述文字',
    },
    {
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqqpublic.qpic.cn%2Fqq_public%2F0%2F0-2816258155-A3E56E8F829BF213072E703F23FC3DC1%2F0%3Ffmt%3Djpg%26size%3D21%26h%3D550%26w%3D410%26ppv%3D1.jpg&refer=http%3A%2F%2Fqqpublic.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638441314&t=def05d46f7dee911d2a2a8bb306976d5',
      href: 'https://www.baidu.com',
      info: '一些图片描述文字',
    },
    {
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.euro-premium.cn%2Fsites%2Fdefault%2Ffiles%2F2017%2F09%2F2017-09-30-110.jpg&refer=http%3A%2F%2Fwww.euro-premium.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638441314&t=d4d758316d5f48f3800b59a2eec7dc46',
      href: 'https://www.baidu.com',
      info: '一些图片描述文字',
    },
    {
      src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.goupuzi.com%2Fnewatt%2FMon_2004%2F1_183281_b959196b41fb01e.jpg&refer=http%3A%2F%2Fwww.goupuzi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638441314&t=663a187a9631164c450e2b3b3e1b8d92',
      href: 'https://www.baidu.com',
      info: '一些图片描述文字',
    },
  ];
  setTimeout(() => {
    SearchList.list = SearchList.list.concat(list);
    hasMorePages.value = true;
    loadingMore.value = false;
  }, 1000);
};
// 输入框变化-prod
// const onInputChange = debounce(Search, 1000);

// dev
const onInputChange = debounce(Search2, 1000);
</script>

<style lang="less">
@import '@/style/variables.less';
.custom-image-search {
  padding-top: @page-padding-top;
  height: 100%;
  display: flex;
  flex-direction: column;
  .custom-search-input {
    width: 100%;
    height: 56px;
    .custom-input-box {
      background: #2d2d2d;
      border-color: transparent;
      height: 100%;
      &:focus-within {
        border-color: #00f9f9;
      }
      .left-search-icon {
        display: flex;
        align-items: center;
        padding-left: 6px;
      }
    }
  }
  .chose-type-box {
    margin-top: 20px;
    font-weight: 600;
    font-size: @font-size-18;
    & > :not(:nth-child(1)) {
      margin-left: 12px;
    }
    & > * {
      cursor: pointer;
      transition: all 0.2s;
    }
    .active {
      transition: all 0.2s;
      color: #00f9f9;
    }
  }
  .waterfall-parent {
    flex: 1;
  }
  .next-page {
    cursor: pointer;
  }
}
</style>
