<template>
  <view class="background-white">
    <scroll-view class="top-menu-view" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
      <view class="menu-topic-view" v-for="(item,index) in tabs" :id="'tabNum'+item.id" :key="index"
            @click="swichMenu(index)">
        <view class="" style="transition: 3s all" :class="currentTab===index ? 'menu-topic-act' : 'menu-topic'">
          <text class="menu-topic-text">{{ item.name }}</text>
          <view class="menu-topic-bottom">
            <view class="menu-topic-bottom-color"></view>
          </view>
        </view>
      </view>
    </scroll-view>
    <!--    <view class="banner" @click="goDetail(banner)">
          <image class="banner-img" :src="banner.cover"></image>
          <view class="banner-title">{{ banner.title }}</view>
        </view>-->
    <!--招生章程搜索-->
    <view class="search-view">
      <view style="display: flex;height: 100rpx;border-bottom: 1px solid #f5f5f5;">
        <view style="width: 90%">
          <uni-search-bar class="uni-mt-10" radius="100"
                          :placeholder="this.tabs[this.currentTab].id===1?'请输入院校名称':'请输入标题'" v-model="title"
                          @clear="clearTitleInput" cancelButton="none" @confirm="searchTitleClick"/>
        </view>
        <view style="width: 10%;line-height: 100rpx">
          <text @click="searchTitleClick">搜索</text>
        </view>
      </view>
    </view>
    <block v-for="(value, index) in tabs[currentTab].list" :key="index">
      <view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="gotoArticle(value)">
        <view class="uni-media-list">
          <!--<image class="uni-media-list-logo" :src="value.cover"></image>-->
          <view class="uni-media-list-body">
            <view class="uni-media-list-text-top">{{ value.title }}</view>
            <view class="uni-media-list-text-bottom">
              <text>{{ value.schoolName }}</text>
              <text>{{ value.releaseTime }}</text>
            </view>
          </view>
        </view>
      </view>
    </block>
    <view class="container" @click="loadMore">
      <uni-load-more :status="tabs[currentTab].status" :content-text="contentText"/>
    </view>
    <view class="top" :style="{'display':(topFlag===true? 'block':'none')}">
      <uni-icons class="topc" type="arrowthinup" size="40" @click="clickTop"></uni-icons>
    </view>
  </view>

</template>

<script>
import {dateUtils} from '@/common/util';
import ApiConstant from "@/common/ApiConstant";
import Request from "@/common/request";
import StaticConstant from "@/common/StaticConstant";
import ImagesConstant from '@/common/ImagesConstant';
let request = new Request()
export default {
  computed:{
    ImagesConstant() {
      return ImagesConstant
    }
  },
  data() {
    return {
      banner: {
        cover: ImagesConstant.jxywtj
      },
      current: 1,
      pageSize: 10,
      listData: [],
      last_id: '',
      reload: false,
      contentText: StaticConstant.loadContentText,
      scrollLeft: 0,
      topFlag: false,

      title: '',
      tabs: [
        {id: 1, name: '招生章程', list: [], current: 1, pageSize: 10, status: 'more'},
        {id: 2, name: '高考动态', list: [], current: 1, pageSize: 10, status: 'more'},
        {id: 3, name: '校内资讯', list: [], current: 1, pageSize: 10, status: 'noMore'}
      ],
      currentTab: 0,
    };
  },
  onLoad() {
    //this.getBanner();
    this.getAdmissionsRegulationsList();
  },
  onPullDownRefresh() {
    this.reload = true;
    this.last_id = '';
    //this.getBanner();
    this.current = 1
    this.getList();
  },
  onReachBottom() {
    if (this.tabs[this.currentTab].id === 1) {
      this.loadMore();
    }
  },
  onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
    //当距离大于600时显示回到顶部按钮，//当距离小于600时隐藏回到顶部按钮
    this.topFlag = e.scrollTop > 600;
  },
  onShareAppMessage() {
    return {
      title: '招生章程', //分享标题
      path: "/pages/zyb/article/list"
    }
  },
  // 分享到微信朋友圈
  onShareTimeline(res) {
    return {
      title: '招生章程', //分享标题
      path: "/pages/zyb/article/list"
    }
  },
  methods: {
    /*跳转到文章页面*/
    gotoArticle(e) {
      uni.navigateTo({
        url: '/pages/zyb/article/detail?articleId=' + e.id
      })
    },
    getBanner() {
      let data = {
        column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
      };
      uni.request({
        url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
        data: data,
        success: data => {
          uni.stopPullDownRefresh();
          if (data.statusCode == 200) {
            this.banner = data.data;
          }
        },
        fail: (data, code) => {
          console.log('fail' + JSON.stringify(data));
        }
      });
    },
    /*招生章程*/
    getAdmissionsRegulationsList() {
      this.setStatus('loading')
      let params = {
        title: this.title,
        type: this.tabs[this.currentTab].id,
        pageNum: this.tabs[this.currentTab].current,
        pageSize: this.tabs[this.currentTab].pageSize
      }
      request.get(ApiConstant.Article.articlePage, params).then(res => {
        console.log(res)
        if (res.success) {
          this.tabs[this.currentTab].current = res.result.current
          this.tabs[this.currentTab].pages = res.result.pages
          //追加到列表数据中
          this.tabs[this.currentTab].list = [...this.tabs[this.currentTab].list, ...res.result.records]
          console.log(this.tabs)
          if (res.result.current >= res.result.pages) {
            this.setStatus('noMore')
          } else {
            this.setStatus('more')
          }
        } else {
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    //搜索招生章程
    searchTitleClick() {
      this.tabs[this.currentTab].current = 1
      this.tabs[this.currentTab].list = []
      this.getAdmissionsRegulationsList()
    },
    clearTitleInput() {
      this.title = ''
      this.tabs[this.currentTab].current = 1
      this.tabs[this.currentTab].list = []
      this.getAdmissionsRegulationsList()
    },
    setStatus(status) {
      this.tabs[this.currentTab].status = status
    },
    loadMore() {
      if (this.tabs[this.currentTab].status === 'noMore') {
        return;
      }
      console.log('加载中')
      this.tabs[this.currentTab].current++;
      this.getAdmissionsRegulationsList()
    },
    /*回到顶部*/
    clickTop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },
    setTime: function (items) {
      var newItems = [];
      items.forEach(e => {
        newItems.push({
          schoolName: e.schoolName,
          cover: e.cover,
          id: e.id,
          releaseTime: e.releaseTime ? dateUtils.format(e.releaseTime) : '',
          title: e.title
        });
      });
      return newItems;
    },
    swichMenu(id) {
      console.log(id)
      if (this.currentTab!==0 && this.currentTab === id) {
        return
      }
      this.currentTab = id
      this.clearTitleInput()
      //this.tabCurrent = 'tabNum'+ id
      // 滑动swiper后，每个选项距离其父元素最左侧的距离
      this.scrollLeft = 0;
      for (let i = 0; i < id; i++) {
        this.scrollLeft += 120
        console.log(this.scrollLeft, 60, id)
      }
    },
    aderror(e) {
      console.log("aderror: " + JSON.stringify(e.detail));
    }
  }
};
</script>

<style>

.uni-media-list-body {
  height: auto;
  justify-content: space-around;
}

.uni-media-list-text-top {
  height: 74rpx;
  font-size: 28rpx;
  overflow: hidden;
}

.uni-media-list-text-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
