<template>
  <view style="background: #fff">
    <u-navbar back-text="" title="校友找找"></u-navbar>
    <view class="slot-wrap">
      <u-tabs-swiper ref="uTabs" :list="navList" :current="current" :is-scroll="true" gutter="60"
        :active-item-style="{ color: '#3CB5FB', transition: 'all 0.5s' }" :bar-style="{ background: '#3CB5FB' }"
        @change="tabsChange"></u-tabs-swiper>
    </view>
    <swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
      style="height: calc(100vh - 0.8rem); width: 100%">
      <swiper-item class="swiper-item" v-for="(item, index) in navList" :key="index"
        style="height: calc(100vh - 0.8rem); width: 100%">
        <scroll-view scroll-y="true" style="height: calc(100vh - 0.8rem); width: 100%" @scrolltolower="onreachBottom"
          @refresherrefresh="" :scroll-with-animation="true">
          <!-- 学生 -->
          <template v-if="item.List.length">
            <view class="flex-col student_list group_7">
              <view class="flex-row list-item group_8" :key="i" v-for="(v, i) in item.List" @click="toDetil(v.userId)">
                <u-avatar :src="$u.http.config.imgUrl + v.imageUrl" class="image_1"></u-avatar>
                <view class="justify-between section_4">
                  <view class="flex-col items-start group_9 view_1">
                    <text class="text_6">{{ v.name }}</text>
                    <!-- <text class="text_24">
                      {{ v.college + " " + v.major }} {{ v.startYear }}级
                    </text> -->
                    <!-- <u-tag
                      :text="v.college + ' ' + v.major"
                      type="primary"
                      mode="plain"
                      style="margin-top: 0.05rem"
                    ></u-tag> -->
                    <view class="tag">
                      <text class="tag-item">{{ v.college }}</text>
                      <text class="tag-item">{{ v.major }}</text>
                    </view>
                  </view>
                  <!-- <u-button
                    class="follow-btn"
                    shape="circle"
                    :type="v.isFollowed ? 'default' : 'primary'"
                    @click="handleFollow(v.userId)"
                  >
                    {{ v.isFollowed ? "已关注" : "未关注" }}
                  </u-button> -->
                  <view class="flex-row ">
                    <text class="message" @click.stop="toMessage(v.userId)">私信</text>
                    <!-- <image
                    src="/static/common/img/16486889538940144558.png"
                    class="image_3"
                    /> -->
                  </view>
                </view>
              </view>
            </view>
          </template>
          <view v-else style="padding-top: 30vh">
            <!-- <u-empty text="没有找到匹配的校友" mode="message"></u-empty> -->
            <no-data type="friends" text="没有找到匹配的校友"></no-data>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import NoData from "components/NoData.vue";
export default {
  components: {
    NoData,
  },
  data() {
    return {
      swiperCurrent: 0,
      current: 0,
      List: [],
      navList: [
        {
          name: "全部",
          List: [],
        },
        {
          name: "学院",
          List: [],
        },
        {
          name: "同专业",
          List: [],
        },
        {
          name: "同届",
          List: [],
        },
        {
          name: "同行",
          List: [],
        },
        {
          name: "同城",
          List: [],
        },
      ],
      PageIndex: 1,
      PageSize: 10,
    };
  },
  watch: {
    current() {
      this.PageIndex = 1;
      this.getList(1);
    },
  },
  onLoad() {
    this.getList(1);
  },
  onShow() {
    // this.getList(1);
  },
  methods: {
    getList(type) {
      const data = {
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
        type: this.current,
      };
      this.$u.api.AlumnSearchList(data).then((res) => {
        if (this.navList[this.current].List.length == 0 || type == 1) {
          this.navList[this.current].List = res.items;
        } else {
          this.navList[this.current].List = this.navList[
            this.current
          ].List.concat(res.items);
        }
      });
    },
    toDetil(id) {
      this.$u.route({
        url: "/pages/AlumniCircle/userDetail/userDetail?id=" + id + "&type=2",
      });
    },
    toMessage(id) {
      uni.navigateTo({
        url: "../../message/dialogBox/dialogBox?id=" + id + "&chatType=0",
      });
    },
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index;
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问速切题，快换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    // scroll-view到底部加载更多
    onreachBottom() {
      this.PageIndex++;
      this.getList(2);
    },

    // 关注
    handleFollow(id) {
      const data = {
        userId: this.vuex_user.id,
        carewId: id,
      };
      this.$u.apiList.InsertOrDelFollow(data).then((res) => {
        this.getList(this.current);
      });
    },

    //返回上一级
    router() {
      uni.switchTab({
        url: "../../AlumniCircle/alumnus/alumnus",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .u-avatar__sex {
  width: 0.1rem !important;
  height: 0.1rem !important;
  border: none;
}

.student_list {
  background: #f6f8f9;

  .list-item {
    width: calc(100% - 48rpx);
    margin: 10rpx auto;
    padding: 24rpx;
    // box-shadow: 0px 0.0063rem #eaeaea;
    background: #FFFFFF;
    border-radius: 24rpx;

    .image_1 {
      flex-shrink: 0;
      align-self: center;
      width: 0.5rem !important;
      height: 0.5rem !important;
      border-radius: 50%;
      flex: 0 0 0.5rem !important;
    }

    .section_4 {
      margin-left: 0.05rem;
      // padding: 0.1rem;
      flex: 1 1 auto;

      .group_9 {
        align-self: flex-start;
        color: #020202;
        font-size: 0.19rem;
        letter-spacing: 0.019rem;

        .text_6 {
          color: #020202;
          font-size: 32rpx;
          line-height: 1;
          margin-top: 15rpx;
          // letter-spacing: 0.019rem;
        }

        .text_24 {
          margin-top: 0.1rem;
          color: #b4b6bd;
          font-size: 0.14rem;
          line-height: 1;
          letter-spacing: 0.015rem;
          width: 2rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .view_1 {
        align-self: initial;
        color: initial;
        font-size: initial;
        line-height: initial;
        letter-spacing: initial;
        white-space: initial;
      }

      .image_3 {
        align-self: center;
        width: 0.075rem;
        height: 0.14rem;
        border-radius: 50%;
      }

      .message {
        display: inline-block;
        width: 100rpx;
        height: 60rpx;
        box-shadow: inset 4rpx 8rpx 32rpx 0rpx rgba(248, 248, 248, 0.06);
        border-radius: 64rpx 64rpx 64rpx 64rpx;
        border: 2rpx solid #3cb5fb;
        text-align: center;
        line-height: 55rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #3CB5FB;
      }
    }

    .follow-btn {
      width: 120rpx;
      height: 64rpx;
      line-height: 64rpx;
      font-size: 28rpx;
    }
  }
}

.list {
  margin-top: 0.17rem;
  padding: 0 5%;

  .list-item {
    padding: 0.13rem 0.12rem 0.13rem 0.33rem;
    background-color: #f6f7fa;
    border-radius: 0.05rem;

    .text_6 {
      color: #373b48;
      font-size: 0.15rem;
      font-family: PingFang;
      line-height: 0.14rem;
    }

    .text_10 {
      color: #ffffff;
      line-height: 0.16rem;
    }

    .image_1 {
      margin-bottom: 0.02rem;
      width: 0.06rem;
      height: 0.11rem;
    }

    .image_5 {
      margin-bottom: 0.04rem;
    }
  }

  .section_5 {
    padding: 0.12rem 0.12rem 0.12rem 0.34rem;
    background-color: #2e9bff;
    margin-top: 0.07rem;
  }
}

.tag {
  display: inline-block;

  margin-top: 40rpx;
  width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  .tag-item {
    background: #F6F8F9;
    border-radius: 12rpx;
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.8);
    font-weight: 400;
    padding: 12rpx;
    &:first-child {
      margin-right: 12rpx;
    }
  }
}
</style>
