<template>
  <div class="container">
    <div class="head-bg" />
    <div class="head-nav-bar">探索</div>

    <div class="search-box">
      <svg-icon class="search-icon" name="search" />
      <span>输入DApp名称或网址</span>
    </div>

    <van-swipe class="swipe-box" :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <div class="swipe-item">
          <van-image class="swipe-image" :src="image" />
        </div>
      </van-swipe-item>

      <template #indicator="{ active, total }">
        <div class="custom-indicator">
          <div
            v-for="item in total"
            :key="item"
            class="custom-indicator-item"
            :class="{ active: item === active + 1 }"
          />
        </div>
      </template>
    </van-swipe>

    <van-tabs class="tabs-wrapper-card" type="card">
      <van-tab v-for="(item,index) in tabsAppConfig" :title="item.title"  :key="index">
        <div class="tabs-content-body">
          <div v-for="cItem in item.children" class="tabs-content-item">
            <van-image class="tabs-content-item-icon" round :src="cItem.icon" />
            <span>{{ cItem.table }}</span>
          </div>
        </div>
      </van-tab> 
    </van-tabs>


    <van-tabs  class="tabs-wrapper" >
      <van-tab title="标签">内容</van-tab>
      <van-tab title="标签">内容 2</van-tab>
      <van-tab title="标签">内容 3</van-tab>
      <van-tab title="标签">内容 4</van-tab>
      <van-tab title="标签">内容 4</van-tab>
      <van-tab title="标签">内容 4</van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";

const images = [
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
];

const tabsAppConfig = [
  {
    title: "热门推荐",
    children: [
      {
        table: "雷霆战机",
        icon: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
        to: "",
      },
      {
        table: "天使商城",
        icon: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
        to: "",
      },
      {
        table: "STT",
        icon: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
        to: "",
      },
    ],
  },
  {
    title: "浏览记录",
    children: [
      {
        table: "雷霆战机",
        icon: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
        to: "",
      },
      {
        table: "STT",
        icon: "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
        to: "",
      },
    ],
  },
];


</script>

<style lang="less" scoped>
.head-bg {
  .fn-head-bg();
}
.head-nav-bar {
  width: 100%;
  height: 26px;
  display: flex;
  justify-content: center;
  margin-top: 40px;
  font-weight: 500;
  font-size: 19px;
  color: #000000;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  height: 33px;
  margin: 15px 17px 0 17px;
  border-radius: 23px 23px 23px 23px;
  background-color: @bg-color1;
  opacity: 0.5;
  color: #95a9ed;
  .search-icon {
    height: 25px;
    width: 25px;
    margin-left: 6px;
  }
  span {
    font-size: 15px;
    margin-left: 6px;
  }
}

.swipe-box {
  height: 180px;
  margin: 17px 17px 0 17px;
  border-radius: 17px 17px 17px 17px;
  .swipe-item {
    height: 160px;
    width: 100%;
    border-radius: 17px 17px 17px 17px;
    overflow: hidden;
  }
  .swipe-image {
    height: 160px;
    width: 100%;
  }
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;

    .active {
      background: @theme-color1;
    }
  }
  .custom-indicator-item {
    display: flex;
    width: 15px;
    height: 2px;
    background: @theme-color2;
    border-radius: 5px 5px 5px 5px;
    margin: 0 2px;
  }
}

.tabs-wrapper-card {
 
  height: 130px;
  margin-top: 40px;

  :deep(.van-tabs__nav) {
    padding: 3px;
    background: #f2f2f2;
    border: 0px;
  }
  :deep(.van-tabs__nav--card) {
    border-radius: 32px 32px 32px 32px;
  }
  :deep(.van-tab--active) {
    border-radius: 32px 32px 32px 32px;
    color: @theme-color1 !important;
    background-color: @bg-color1;
  }
  :deep(.van-tab--card) {
    color: @font-color2;
    border-right: 0px;
  }
}

.tabs-content-body {
  display: flex;
  width: 100%;
  margin: 20px 0 0 17px;
  .tabs-content-item {
    display: flex;
    flex-direction: column;
    align-items: center; 
    width: 50px;
    min-width: 50px;
    font-size: 12px; 
    margin-right: 26px;
    span {
      margin-top: 4px;
    }

    .tabs-content-item-icon {
      width: 42px;
      height: 42px;
    }
  }
}


.tabs-wrapper{ 
  padding: 0 12px;
  :deep(.van-tabs__nav) {
    background: transparent;
  }
  :deep(.van-tab){
     border-bottom: 1px solid #D8D8D8;
  }
  :deep(.van-tabs__line){
    height: 1px;
    width: 58px;
  }
  :deep(.van-tabs__wrap){
    height: 30px;
  }
  :deep(.van-tab--active){
    color: @theme-color1;
  }
}
</style>
