<template>
  <view>
    <!-- 关注和推荐 -->
    <u-navbar leftIcon="search" leftIconSize="32">
      <view slot="center">
        <u-tabs :list="list" lineWidth="32" />
      </view>
    </u-navbar>
    <!-- 消息列表 -->
    <view class="content" :style="{ marginTop: totalHeight + 'px' }">
      <!-- 搜索 -->
      <view
        class="search-item"
        @click="$Router.push('/pages/community/commSearch/index')"
      >
        <u-search :showAction="true" actionText="取消" />
      </view>
      <swiper
        class="swiper"
        style="height: 100vh"
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <swiper-item>
          <scroll-view
            scroll-y="true"
            class="scroll-y"
            @scrolltoupper="upper"
            @scrolltolower="lower"
            @scroll="scroll"
          >
            <view style="padding: 10rpx 20rpx; background-color: #ffffff">
              <comment-list></comment-list>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item>
          <scroll-view scroll-y="true">
            <view style="padding: 10rpx 20rpx">
              <comment-list></comment-list>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>
<script>
import CommentList from '@/components/comment/CommentList.vue';
export default {
  components: {
    CommentList,
  },
  data() {
    return {
      list: [{ name: '关注' }, { name: '推荐' }],
      current: 0,
      //swiper
      duration: 700,
      // scroll
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
    };
  },
  computed: {
    totalHeight() {
      return uni.getSystemInfoSync().statusBarHeight + 44;
    },
  },
  methods: {
    upper(e) {
      // console.log(e);
    },
    lower(e) {
      // console.log(e);
    },
    scroll(e) {
      // console.log(e);
      this.old.scrollTop = e.detail.scrollTop;
    },
    goTop(e) {
      // 解决view层不同步的问题
      this.scrollTop = this.old.scrollTop;
      this.$nextTick(() => {
        this.scrollTop = 0;
      });
      uni.showToast({
        icon: 'none',
        title: '纵向滚动 scrollTop 值已被修改为 0',
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.scroll-y {
  height: 100vh;
}

.search-item {
  padding: 0 20rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #ffffff;
  margin-bottom: 10rpx;
}
</style>
