<template>
  <div class="ele-body">
    <div class="search-box">
      <div style="width: 100%">
        <a-input-search
          size="large"
          v-model:value="searchText"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        />
      </div>
    </div>
    <a-tabs
      tabPosition="top"
      centered
      v-model:activeKey="activeKey"
      @change="onChange"
    >
      <a-tab-pane
        v-for="(item, index) in data"
        :key="index"
        :tab="item.label"
      />
    </a-tabs>
    <Apps v-if="activeKey === 0" />
    <Article v-if="activeKey === 1" />
    <Photo v-if="activeKey === 2" />
    <Player v-if="activeKey === 3" />
    <Down v-if="activeKey === 4" />
    <Docs v-if="activeKey === 5" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { pageLink } from '@/api/apps/link';
  import type { LinkParam } from '@/api/apps/link/model';
  import Article from './components/article/index.vue';
  import Docs from './components/docs/index.vue';
  import Player from './components/player/index.vue';
  import Photo from './components/photo/index.vue';
  import Apps from './components/apps/index.vue';
  import Down from './components/down/index.vue';
  import { SelectProps } from 'ant-design-vue';
  import useSearch from '@/utils/use-search';

  const data = ref<SelectProps['options']>([
    {
      label: '网址',
      value: 'link'
    },
    {
      label: '文章',
      value: 'article'
    },
    {
      label: '图片',
      value: 'photo'
    },
    {
      label: '视频',
      value: 'video'
    },
    {
      label: '下载',
      value: 'down'
    }
  ]);

  // 搜索内容
  const searchText = ref('');
  const activeKey = ref(0);
  // 表单数据
  const { where } = useSearch<LinkParam>({
    page: 1,
    limit: 36,
    count: 0,
    linkName: ''
  });

  // 切换选项卡
  const onChange = (index) => {
    localStorage.setItem('SEARCH_ACTIVEKEY', index);
  };

  /* 搜索 */
  const onSearch = () => {
    pageLink({ ...where }).then((data) => {
      where.count = data?.count;
    });
  };
</script>

<script lang="ts">
  export default {
    name: 'SearchIndex'
  };
</script>

<style lang="less">
  .search-box {
    max-width: 500px;
    margin: 20px auto 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .app-btn-search {
    margin-left: 12px;
    height: 40px;
  }
  .link-name {
    line-height: 1;
  }
  .a-link {
    margin-right: 10px;
  }
</style>
