<template>
  <div class="follow-page">
    <van-tabs v-model:active="currentTab"
              border color="#FD9A00"
              title-active-color="#FD9A00"
              title-inactive-color="#333333">
      <van-tab
          v-for="(item, i) in tabList"
          :key="i"
          :title="item.label"
          :name="item.listType"
      >
        <FollowList
            :list-type="item.listType"
        ></FollowList>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script setup>
import FollowList from './components/follow-list';
const route = useRoute()

const currentTab = ref(route?.query?.listType ?? 'friend');
const tabList = ref([
  {
    label: "互关",
    listType: 'friend',
  },
  {
    label: "关注",
    listType: 'follow',
  },
  {
    label: "粉丝",
    listType: 'fans',
  }
]);
</script>
<style scoped lang="scss">
:deep(.van-tabs) {
  height: 100%;
  display: flex;
  flex-direction: column;
  .van-tab__text {
    font-size: 14px;
  }
}

:deep(.van-tabs__content) {
  overflow: auto;
  flex: 1;
}

.follow-page {
  height: calc(100vh - 52px);
}

</style>