<script>
import StaticConstant from "@/common/StaticConstant";
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'
import ImagesConstant from "@/common/ImagesConstant";
import {arrayIsNotEmpty, yearAbridge} from "@/common/util";

let request = new Request()
export default {
  name: "school-list",
  computed: {
    ImagesConstant() {
      return ImagesConstant
    },
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      schoolName: '',
      defaultIcon: ImagesConstant.defaultIcon,//默认图片
      /*筛选项 参数 start*/
      selectForm: {
        addressList: [],
        institutionTypeList: [],
        schoolType: "",
        tagsList: [],
        schoolNatureList: []
      },
      defaultSelected: [],
      menuList: StaticConstant.schoolMenuData,
      /*筛选项 参数 end*/
      options: [
        {
          title: "省控线",
          icon: ImagesConstant.skx,
          url: "/pages/zyb/historyScoreControlLine/index"
        },
        {
          title: "测文化",
          icon: ImagesConstant.cwh,
          url: "/pages/zyb/testCultural/index"
        },
        {
          title: "查位次",
          icon: ImagesConstant.cwc,
          url: "/pages/zyb/other/checkRanking"
        },
        {
          title: "算投档",
          icon: ImagesConstant.std,
          url: "/pages/zyb/other/calculateInvestment"
        }
      ],
      userInfo: {},
      vipInfo: {},
      topFlag: false,
      nowProvince: {
        status: 'more',
        schoolList: [],
        pages: 0,
        current: 1,
        size: 5,
        total: 0
      },//本省
      otherProvince: {
        schoolList: [],
        pages: 0,
        current: 1,
        size: 10,
        total: 0
      },//外省
      statusTypes: StaticConstant.loadStatusTypes,
      contentText: StaticConstant.loadContentText
    }
  },
  onShow() {

  },
  onLoad() {
    this.getSchoolList()
    this.userInfo = uni.getStorageSync('userInfo')
    this.vipInfo = uni.getStorageSync('vipInfo')
  },
  onReachBottom() {
    console.log("已经滚动到底部了")
    if (this.vipInfo && this.vipInfo.vipFlag) {
      this.loadMore()
    }
  },
  onShareAppMessage() {
    return {
      title: '查院校', //分享标题
      path: "/pages/zyb/school/list"
    }
  },
  // 分享到微信朋友圈
  onShareTimeline(res) {
    return {
      title: '查院校', //分享标题
      path: "/pages/zyb/school/list"
    }
  },
  methods: {
    yearAbridge,
    search(res) {
      uni.showToast({
        title: '搜索：' + res.value,
        icon: 'none'
      })
    },
    /*跳转页面*/
    goto(url) {
      uni.navigateTo({
        url: url
      })
    },
    onConfirm(e) {
      console.log('onConfirm')
      if (e.type === 'filter' && e.children) {
        for (let i = 0; i < e.children.length; i++) {
          if (e.children[i].title === '院校标签') {
            this.selectForm.tagsList = e.children[i].value
            if (this.selectForm.tagsList === null) {
              this.selectForm.tagsList = []
            }
          } else if (e.children[i].title === '院校层次') {
            this.selectForm.schoolType = e.children[i].value
          } else if (e.children[i].title === '办学类型') {
            this.selectForm.schoolNatureList = e.children[i].value
            if (this.selectForm.schoolNatureList === null) {
              this.selectForm.schoolNatureList = []
            }
          } else if (e.children[i].title === '地区') {
            this.selectForm.addressList = e.children[i].value
          } else if (e.children[i].title === '院校类型') {
            this.selectForm.institutionTypeList = e.children[i].value
          }
        }
      }
      console.log(e)
      this.clearData()
      this.getSchoolList()
    },
    onChange(e, index) {
      console.log('onChange')
      console.log(e, index)
    },
    clearData() {
      this.nowProvince.schoolList = []
      this.nowProvince.current = 1
    },
    /*点击 操作菜单*/
    optionItemChange(e) {
      console.log(e)
      if (this.options && this.options[e.detail.index].url) {
        this.goto(this.options[e.detail.index].url)
      }
    },
    /*院校列表*/
    getSchoolList() {
      this.nowProvince.status = 'loading'
      //地区
      let province = ''
      if (arrayIsNotEmpty(this.selectForm.addressList)) {
        province = this.selectForm.addressList.join(",")
      }
      //院校类型
      let institutionType = ''
      if (arrayIsNotEmpty(this.selectForm.institutionTypeList)) {
        institutionType = this.selectForm.institutionTypeList.join(",")
      }
      //院校标签
      let tagsStrs = ''
      if (arrayIsNotEmpty(this.selectForm.tagsList)) {
        tagsStrs = this.selectForm.tagsList.join(",")
      }
      //办学类型
      let schoolNatureStrs = ''
      if (arrayIsNotEmpty(this.selectForm.schoolNatureList)) {
        schoolNatureStrs = this.selectForm.schoolNatureList.join(",")
      }
      request.get(ApiConstant.School.searchSchoolList, {
        schoolName: this.schoolName,
        province: province,
        institutionType: institutionType,
        tagsStrs: tagsStrs,
        schoolNatureStrs: schoolNatureStrs,
        schoolType: this.selectForm.schoolType,
        pageNum: this.nowProvince.current, pageSize: this.nowProvince.size
      }, {showLoad: false}).then(r => {
        console.log(r)
        if (r.success) {
          this.nowProvince.current = r.result.current
          this.nowProvince.pages = r.result.pages
          this.nowProvince.size = r.result.size
          this.nowProvince.total = r.result.total
          //追加到列表数据中
          this.nowProvince.schoolList = [...this.nowProvince.schoolList, ...r.result.records]
          if (r.result.current >= r.result.pages) {
            this.nowProvince.status = 'noMore'
          } else {
            this.nowProvince.status = 'more'
          }
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    searchSchoolClick() {
      this.checkVip()
      this.nowProvince.current = 1
      this.nowProvince.schoolList = []
      this.nowProvince.total = 0
      this.nowProvince.pages = 0
      this.getSchoolList()
    },
    clearSchoolInput() {
      this.schoolName = ''
      this.nowProvince.current = 1
      this.nowProvince.schoolList = []
      this.nowProvince.total = 0
      this.nowProvince.pages = 0
      this.getSchoolList()
    },
    loadMore() {
      if (this.nowProvince.status === 'noMore') {
        return;
      }
      //加载中
      this.nowProvince.current++;
      this.getSchoolList()
    },
    top() { //回到顶部
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },

    /*判断vip*/
    checkVip() {
      if (!this.vipInfo || !this.vipInfo.vipFlag) {
        uni.showToast({
          title: '开通VIP无限次查询',
          duration: 1000,
          icon: "none"
        });
        return
      }
    }
  },
  onPageScroll(e) { //根据距离顶部距离是否显示回到顶部按钮
    //当距离大于600时显示回到顶部按钮，//当距离小于600时隐藏回到顶部按钮
    this.topFlag = e.scrollTop > 600;
  }
}
</script>

<template>
  <view class="header">
    <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="请输入院校名称" v-model="schoolName"
                          @clear="clearSchoolInput" cancelButton="none" @confirm="searchSchoolClick"/>
        </view>
        <view style="width: 10%;line-height: 100rpx">
          <text @click="searchSchoolClick">搜索</text>
        </view>
      </view>
    </view>
    <!--其他按钮-->
    <view class="options">
      <uni-grid :column="4" :highlight="true" :show-border="false" @change="optionItemChange">
        <uni-grid-item v-for="(item, index) in options" :index="index" :key="index">
          <view class="grid-item-box">
            <image :src="item.icon?item.icon:defaultIcon"
                   style="height: 90rpx;width: 90rpx;"/>
            <text class="text">{{ item.title }}</text>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>
    <!--筛选项-->
    <le-dropdown v-if="vipInfo && vipInfo.vipFlag"
                 v-model:menuList="menuList"
                 themeColor="#3d76fd"
                 :duration="200"
                 :isCeiling="true"
                 @onConfirm="onConfirm"
                 @onChange="onChange"></le-dropdown>
  </view>
  <view class="body">
    <!--院校列表-->
    <view class="school-list">
      <view class="school-item uni-flex" v-for="(item,index) in nowProvince.schoolList" :key="index"
            @click="goto('/pages/zyb/school/detail?schoolCode='+item.schoolCode)">
        <view class="flex-item-10">
          <view class="flex">
            <view class="flex-item-22 t_item">
              <image lazy-load :src="item.schoolIcon||ImagesConstant.defaultIcon" class="icon128 margin-left-10"
                     mode="aspectFill"/>
            </view>
            <view class="flex-item-8 t_item">
              <view class="uni-flex flex">
                <view class="flex-item-10 t_item" style="display: flex;height: 60rpx;line-height: 60rpx">
                  <text class="font-size-mini2">{{ item.schoolName }}</text>
                  <view class="address adrs" v-if="item.cityProvince">
                    <!--直辖市-->
                    <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 }}</view>
                  </view>
                </view>
              </view>
              <view class="tags">
                <text class="tag" v-for="(tag,tindex) in item.tagsList" :key="tindex">
                  {{ tag }}
                </text>
              </view>
            </view>
          </view>
          <!--校考-->
          <view class="flex" style="height: 30rpx;line-height: 30rpx" v-if="item.kslx && item.kslx==='校考'">
            <view class="flex-item-2">
              <view style="text-align: center;margin: 0 20rpx;border-radius: 10rpx;" class="xk-background">
                <text class="font-size-mini font-weight-550 xk-color">{{ item.kslx }}</text>
              </view>
            </view>
<!--            <view class="flex-item-42">
              <view class="font-size-mini-mini" v-if="item.zdf">
                <text class="slateGray">{{ yearAbridge(item.zdfYear) }}年录取最低分:</text>
                <text class="font-weight-b xk-color">{{ item.zdf }}分</text>
              </view>
            </view>-->
            <view class="flex-item-4">
              <view class="font-size-mini-mini float-right" v-if="item.jhs">
                <text class="slateGray">23年省内计划录取:</text>
                <text class="font-weight-b xk-color">{{ item.jhs }}人</text>
              </view>
            </view>
          </view>
          <!--统考-->
          <view class="flex" style="height: 30rpx;line-height: 30rpx" v-else>
            <view class="flex-item-2">
              <view style="text-align: center;margin: 0 20rpx;border-radius: 10rpx;" class="tk-background">
                <text class="font-size-mini font-weight-550 tk-color">{{ item.kslx }}</text>
              </view>
            </view>
            <view class="flex-item-4">
              <view class="font-size-mini-mini" v-if="item.zdf">
                <text class="slateGray">{{ yearAbridge(item.zdfYear) }}年录取最低分:</text>
                <text class="font-weight-b tk-color">{{ item.zdf }}分</text>
              </view>
            </view>
            <view class="flex-item-4">
              <view class="font-size-mini-mini float-right" v-if="item.jhs">
                <text class="slateGray">{{item.luquYear}}年省内计划录取:</text>
                <text class="font-weight-b tk-color">{{ item.jhs }}人</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="container" @click="loadMore" v-if="vipInfo && vipInfo.vipFlag">
      <uni-load-more :status="nowProvince.status" :content-text="contentText"/>
    </view>
  </view>
  <!--判断vip-->
  <view v-if="nowProvince && nowProvince.schoolList && nowProvince.schoolList.length>0">
    <my-checkvip :vip-flag="(vipInfo && vipInfo.vipFlag)"/>
  </view>
  <view class="top" :style="{'display':(topFlag===true? 'block':'none')}">
    <uni-icons class="topc" type="arrowthinup" size="40" @click="top"></uni-icons>
  </view>
</template>

<style scoped lang="scss">
//顶部
.header {
  border-top: 3rpx solid #f6f6f6;
  background-color: white;
  //min-height: 500rpx;
  //搜索栏
  .search-view {
    width: 95%;
    margin: 0 auto;
    border-bottom: 3rpx solid #f6f6f6;
  }

  //操作菜单
  .options {
    border-radius: 10rpx;
    padding: 8rpx;
    background-color: white;
    position: relative;
    //top: 100rpx;
    border-bottom: 3rpx solid #f6f6f6;
  }
}

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

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

.t_item {
  margin-bottom: 10rpx;
}

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

.address .address-item {
  margin-right: 10rpx;
  color: #8999a3;
  font-size: 25rpx;
  font-weight: 550;
}

/*标签*/
.tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.tags .tag {
  margin-bottom: 5rpx;
  margin-right: 10rpx;
  color: #8999a3;
  font-size: 25rpx;
  border: 3rpx solid #acadba;
  border-radius: 8rpx;
  padding: 5rpx;
}

/*宫格 start*/
.image {
  width: 25px;
  height: 25px;
}

.text {
  font-size: 14px;
  margin-top: 5px;
}

.example-body {
  /* #ifndef APP-NVUE */
  // display: block;
  /* #endif */
}

.grid-dynamic-box {
  margin-bottom: 15px;
}

.grid-item-box {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.grid-item-box-row {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.grid-dot {
  position: absolute;
  top: 5px;
  right: 15px;
}

.swiper {
  height: 420px;
}

/* #ifdef H5 */
@media screen and (min-width: 768px) and (max-width: 1425px) {
  .swiper {
    height: 630px;
  }
}

@media screen and (min-width: 1425px) {
  .swiper {
    height: 830px;
  }
}

/* #endif */
/*宫格 end*/


/*搜索栏*/
:deep(.uni-searchbar) {
  padding: 15rpx 10rpx !important;
}

/* 回到顶部 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*/
.tk-color {
  color: #7568e9 !important;
}

.xk-color {
  color: #f96543 !important;
}

.tk-background {
  background-color: #eaecff;

}

.xk-background {
  background-color: #fef4f4;
}
</style>
