<!--
测文化 页面
-->
<script>
import StaticConstant from "@/common/StaticConstant";
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'
import ImagesConstant from "@/common/ImagesConstant";

let request = new Request()
export default {
  name: "test-cultural",
  components: {},
  computed: {
    ImagesConstant() {
      return ImagesConstant
    },
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      topFlag: false,
      province: '河南',
      tab: 'tk',
      vipInfo: {},
      selectForm: {
        schoolName: '',
        province: '',
        institutionType: '',
        schoolNature: '',
      },
      statusTypes: StaticConstant.loadStatusTypes,
      contentText: StaticConstant.loadContentText,
      tk: {
        status: 'more',
        schoolList: [],
        current: 0,
        size: 8
      }
    }
  },
  onShow() {

  },
  onLoad() {
    this.vipInfo = uni.getStorageSync('vipInfo')
    if (!this.vipInfo.vipFlag) {
      this.tk.size = 5
    }
    this.getSchoolList()
  },
  onReachBottom() {
    console.log("已经滚动到底部了")
    if (this.vipInfo && this.vipInfo.vipFlag) {
      this.loadMore()
    }
  },
  methods: {
    handle(type) {
      this.show = !this.show
      this.modeClass = type
    },
    /*切换分数类型*/
    switchTab(e) {
      this.tab = e
    },
    searchSchoolClick() {
      this.tk.current = 1
      this.tk.schoolList = []
      this.getSchoolList()
    },
    clearSchoolInput() {
      this.selectForm.schoolName = ''
      this.tk.current = 1
      this.tk.schoolList = []
      this.getSchoolList()
    },
    /*院校列表*/
    getSchoolList() {
      request.get(ApiConstant.School.searchSchoolList, {
        schoolName: this.selectForm.schoolName,
        pageNum: this.tk.current,
        pageSize: this.tk.size
      }).then(r => {
        console.log(r)
        if (r.success) {
          this.tk.current = r.result.current
          this.tk.size = r.result.size
          this.tk.total = r.result.total
          //追加到列表数据中
          this.tk.schoolList = [...this.tk.schoolList, ...r.result.records]
          if (r.result.current >= r.result.pages) {
            this.tk.status = 'noMore'
          } else {
            this.tk.status = 'more'
          }

        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    loadMore() {
      if (this.tk.status === 'noMore') {
        return;
      }
      console.log('加载中')
      this.tk.current++;
      this.getSchoolList()
    },
    top() { //回到顶部
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },
    goto(url) {
      uni.navigateTo({
        url: url
      })
    }
  },
  onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
    //当距离大于600时显示回到顶部按钮，//当距离小于600时隐藏回到顶部按钮
    this.topFlag = e.scrollTop > 600;
  }
}
</script>

<template>
  <view class="head">
    <view class="flexWrap">
      <view class="flex-item-10 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="请输入院校名称" v-model="selectForm.schoolName"
                            @clear="clearSchoolInput" cancelButton="none" @confirm="searchSchoolClick"/>
          </view>
          <view style="width: 10%;line-height: 100rpx">
            <text @click="searchSchoolClick">搜索</text>
          </view>
        </view>
      </view>
<!--      <view class="topTitle" :class="tab==='tk'?'topTitle-active':''" @click="switchTab('tk')">
        <text>统考院校</text>
        <view style="display: flex;" :class="tab==='tk'?'bottom-active':''"></view>
      </view>-->
      <!--      <view class="topTitle" :class="tab==='xk'?'topTitle-active':''" @click="switchTab('xk')">
              <text>校考院校</text>
              <view style="display: flex" :class="tab==='xk'?'bottom-active':''"></view>
            </view>-->
    </view>
  </view>
  <view class="body">
    <!--院校列表-->
    <view class="school-list">
      <view class="school-item uni-flex flex" v-for="(item,index) in tk.schoolList" :key="index"
            @click="goto('/pages/zyb/testCultural/detail?schoolCode='+item.schoolCode)">
        <view class="flex-item-25 t_item">
          <image :src="item.schoolIcon||ImagesConstant.defaultIcon" style="width: 128rpx;height: 128rpx"
                 mode="aspectFill"/>
        </view>
        <view class="flex-item-75 t_item">
          <view class="uni-flex flex">
            <view :class="item.schoolName.length<8?'flex-item-6':'flex-item-75'" class=" t_item" style="display: flex;height: 80rpx">
              <text>[{{item.schoolCode}}]</text>
              <text>{{ item.schoolName }}</text>
            </view>
            <view :class="item.schoolName.length<10?'flex-item-4':'flex-item-25'" class="t_item" style="display: flex;height: 60rpx">
              <view class="address adrs" v-if="item.city && item.city.includes(item.province)">
                <!--直辖市-->
                <view class="address-item address-item-before" v-if="item.city">{{ item.city }}</view>
                <view class="address-item" v-if="item.area && item.area.length<4">{{ item.area }}</view>
              </view>
              <view class="address adrs" v-else>
                <view class="address-item address-item-before" v-if="item.province">{{ item.province }}</view>
                <view class="address-item" v-if="item.city">{{ item.city.length>=4?item.city.substring(0,4):item.city }}</view>
                <!--                  <view class="address-item" v-if="item.area && item.area.length<4">{{item.area}}</view>-->
              </view>
            </view>
          </view>
          <view class="uni-flex flex">
            <view class="flex-item-10 t_item">
              <view class="tags flexWrap">
                <text class="tag" v-for="(tag,tindex) in item.tagsList" :key="tindex" v-show="tag !=='普通本科'">
                  {{ tag }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="container" @click="loadMore" v-if="vipInfo && vipInfo.vipFlag">
        <uni-load-more :status="tk.status" :content-text="contentText"/>
      </view>
    </view>
  </view>
  <!--判断vip-->
  <view v-if="tk && tk.schoolList && tk.schoolList.length>0">
    <my-checkvip :vip-flag="(vipInfo && vipInfo.vipFlag)"/>
  </view>
  <view class="top" style="transition: 0.3s;" :style="{'display':(topFlag===true? 'block':'none')}">
    <uni-icons class="topc" type="arrowthinup" size="40" @click="top"></uni-icons>
  </view>
</template>

<style scoped lang="scss">
.head {
  padding: 20rpx 10rpx;
  text-align: center;
  background-color: white;
}

.body {
  //padding-top: 100rpx;
}

/*院校列表*/
.school-list {
  padding: 30rpx 10rpx;

  .school-item {
    margin-bottom: 20rpx;
    padding: 30rpx;
    background-color: white;
    border-radius: 15rpx;
    //box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
  }
}

/*省市区*/
.adrs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 0 0 auto;
}

.address .address-item-before {
  margin-left: 0 !important;
}

.address .address-item {
  margin-left: 10rpx;
  color: #8999a3;
  font-size: 23rpx;
  line-height: 40rpx;
}

/*标签*/
.tags .tag {
  color: #8999a3;
  font-size: 23rpx;
  line-height: 40rpx;
  margin-right: 10rpx;
  margin-bottom: 5rpx;
  border: 1rpx solid #52c6c6;
  border-radius: 10rpx;
  padding: 0 8rpx;
  text-align: right;
}


.topTitle {
  width: 100%;
  font-size: 35rpx;
  transition: 0.3s;
}

/*选择的tab*/
.topTitle-active {
  font-size: 40rpx;
  //border-bottom: 6rpx solid #42c6c6;
}

.bottom-active {
  margin: 0 auto;
  width: 60rpx;
  border-bottom: 6rpx solid #42c6c6;
}


/* 回到顶部 start*/
.top {
  position: relative;
  display: none; /* 先将元素隐藏 */
  transition: 0.5s;
}

.topc {
  position: fixed;
  right: 10rpx;
  //background: #F0F0F0;
  background: #e1e1e1;
  border-radius: 50%;
  top: 80%;
  height: 40px;
  line-height: 40px;
}

/* 回到顶部 end*/
</style>


