<!--
文化分测算 详情页 页面
-->
<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-detail",
  components: {},
  computed: {
    ImagesConstant() {
      return ImagesConstant
    },
    StaticConstant() {
      return StaticConstant
    }
  },
  data() {
    return {
      schoolCode: '',
      year:'2022',
      schoolInfo: {},
      collectSchoolList: [],//已关注院校信息
      collectFlag: false,//是否激活关注按钮
      majorIndex:0,
      majorArray: [
        {
          majorName: '设计学类(环境设计、视觉传达设计)',

        }
      ],//专业列表
    }
  },
  onLoad(e) {
    console.log(e)
    if (e.schoolCode) {
      this.schoolCode = e.schoolCode
    }
    this.getSchoolInfo()
  },
  onShareAppMessage(){
    return {
      title: "文化分测算", //分享标题
      path: "/pages/zyb/testCultural/detail?schoolCode="+this.schoolCode,//分享链接
    }
  },
  // 分享到微信朋友圈
  onShareTimeline(res) {
    return {
      title: "文化分测算", //分享标题
      path: "/pages/zyb/testCultural/detail?schoolCode="+this.schoolCode,//分享链接
    }
  },
  methods: {
    gotoSchoolDetail() {
      uni.navigateTo({
        url: '/pages/zyb/school/detail?schoolCode=' + this.schoolCode
      })
    },
    /*院校详情信息*/
    getSchoolInfo() {
      request.get(ApiConstant.School.schoolInfo, {
        schoolCode: this.schoolCode
      }).then(r => {
        console.log(r)
        if (r.success) {
          this.schoolInfo = r.result
          if (this.schoolInfo.city.includes(this.schoolInfo.province)) {
            this.schoolInfo.cityProvince = true
          }
        }
        this.checkCollect()
        this.getTestCultural()
      }).catch(err => {
      }).finally(() => {
      });
    },
    checkCollect() {
      // 判断该院校是否关注了
      if (this.schoolInfo && this.schoolInfo.schoolCode) {
        let collectSchoolList = uni.getStorageSync('collectSchoolList')
        if (collectSchoolList === undefined || collectSchoolList === null || collectSchoolList === '') {
          collectSchoolList = []
        }
        for (let i = 0; i < collectSchoolList.length; i++) {
          if (collectSchoolList[i].schoolCode === this.schoolInfo.schoolCode) {
            //关注了
            this.collectFlag = true
            this.collectIndex = i
            break
          }
        }
      }
    },
    /*关注按钮点击事件*/
    clickCollectSchool() {
      let collectSchoolList = uni.getStorageSync('collectSchoolList')
      console.log(collectSchoolList)
      if (collectSchoolList === undefined || collectSchoolList === null || collectSchoolList === '') {
        collectSchoolList = []
      }
      if (this.collectFlag === true) {
        //取消收藏
        //获取 收藏的学校列表中，当前的index
        this.checkCollect()
        this.collectFlag = false
        //移除
        collectSchoolList.splice(this.collectIndex, 1)
      } else {
        //收藏
        this.collectFlag = true
        collectSchoolList.push(this.schoolInfo)
      }
      uni.setStorageSync('collectSchoolList', collectSchoolList)
    },
    bindMajorArrayPickerChange(e){
      this.majorIndex = e.detail.value
    },
    getTestCultural(){
      request.get(ApiConstant.Major.testCultural, {
        schoolCode: this.schoolCode,
        year:this.year
      }).then(r => {
        console.log(r)
        if (r.success) {
          this.majorArray = r.result
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    /**/
    shareToggle() {
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        type: 1,
        summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
        success: function (res) {
          console.log("success:" + JSON.stringify(res));
        },
        fail: function (err) {
          console.log("fail:" + JSON.stringify(err));
        }
      });
    }
  }
}
</script>

<template>
  <view class="head">
    <view class="school-item">
      <view class="uni-flex flex">
        <view class="flex-item-25 t_item">
          <image :src="schoolInfo.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="flex-item-6 t_item" style="display: flex;height: 80rpx;">
              <text style="font-size: 35rpx;">{{ schoolInfo.schoolName }}</text>
            </view>
            <view class="flex-item-4 t_item" style="display: flex;height: 60rpx;font-size: 30rpx;">
              <view class="address adrs" v-if="schoolInfo.cityProvince">
                <!--直辖市-->
                <view class="address-item address-item-before" v-if="schoolInfo.city">{{ schoolInfo.city }}</view>
                <view class="address-item" v-if="schoolInfo.area && schoolInfo.area.length<4">{{ schoolInfo.area }}
                </view>
              </view>
              <view class="address adrs" v-else>
                <view class="address-item address-item-before" v-if="schoolInfo.province">{{ schoolInfo.province }}
                </view>
                <view class="address-item" v-if="schoolInfo.city">{{ schoolInfo.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" style="display: flex;">
              <view class="tags">
                <text class="tag" v-for="(tag,tindex) in schoolInfo.tagsList" :key="tindex" v-show="tag !=='普通本科'">
                  {{ tag }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="uni-flex flex other">
        <view class="flex-item-33 t_item center" @click="gotoSchoolDetail">
          <view class="t-item-b">
            <view style="display: flex">
              <image :src="ImagesConstant.yxjs"/>
            </view>
            <text class="text">院校介绍</text>
          </view>
        </view>
        <view class="flex-item-33 t_item center" @click="gotoSchoolDetail">
          <view class="t-item-b">
            <view style="display: flex">
              <image :src="ImagesConstant.zlsj"/>
            </view>
            <text class="text">招录数据</text>
          </view>
        </view>
        <view class="flex-item-33 t_item center end" @click="gotoSchoolDetail">
          <view class="t-item-b">
            <view style="display: flex">
              <image :src="ImagesConstant.lqxx"/>
            </view>
            <text class="text">录取信息</text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="body">
    <view class="detail">
      <picker @change="bindMajorArrayPickerChange" :value="majorIndex" :range="majorArray" range-key='majorNameAll'>
        <view class="flex">
          <view style="width: 80%">
            <view class="flex majorTitle">专业名称</view>
            <view class="flex" style="padding: 0 30rpx 30rpx 30rpx">
              <view class="majorName">{{ majorArray[majorIndex].majorNameAll }}</view>
            </view>
          </view>
          <view class="" style="width: 20%;margin: auto 0">
            <image :src="ImagesConstant.keyboard.arrowDown" style="width: 70rpx;height: 55rpx;background-color: #42c6c6;border-radius: 10rpx"/>
            <text class="flex">共{{majorArray.length}}个</text>
          </view>
        </view>

      </picker>

    </view>
    <view class="detail">
      <view class="flex">
        <view class="title darkturquoise">
          测算结果
        </view>
      </view>
      <!--分数限制-->
      <view class="flex" v-if='!majorArray[majorIndex].score'>
        <view class="mntext marginCenter">
          未收录信息
        </view>
      </view>
      <view  v-else>
        <view class="flex">
          <view class="mntext marginCenter">
            <text v-if="majorArray[majorIndex].rulesEnrollProbability==='专过文排'">文化需达院校控线{{majorArray[majorIndex].score}}分</text>
            <text v-else-if="majorArray[majorIndex].rulesEnrollProbability==='文过专排'">专业需达院校控线{{majorArray[majorIndex].score}}分</text>
            <text v-else>文化及专业总分需达院校控线{{majorArray[majorIndex].score}}分</text>
          </view>
        </view>
        <view style="border-bottom:5rpx solid #f4f4f4">
          <view class="flex" style="padding:0 30rpx">
            <view class="mnTitle">注:</view>
          </view>
          <view class="flex" style="padding:0 30rpx">
            <view class="mntext">
              <text>{{year}}河南文化分控线为
                <text class="darkturquoise">{{ majorArray[majorIndex].culturalScore}}</text>
                分
              </text>
            </view>
          </view>
          <view class="flex" style="padding:0 30rpx">
            <view class="mntext">
              <text>{{year}}河南专业分控线为
                <text class="darkturquoise">{{ majorArray[majorIndex].specialScore}}</text>
                分
              </text>
            </view>
          </view>
        </view>
        <!--录取限制-->
        <view style="padding: 30rpx 20rpx">
          <view class="flex">
            <view class="mntext2">
              <text>录取方式</text>
            </view>
          </view>
          <view class="flex">
            <view class="mntext3 darkturquoise">
              <text>{{ majorArray[majorIndex].rulesEnrollProbability}}</text>
            </view>
          </view>
          <view class="flex">
            <view class="mntext2">
              <text>院校限制</text>
            </view>
          </view>
          <view class="flex">
            <view class="mntext3 darkturquoise">
              <text>身体要求：非色盲、色弱</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--收藏按钮-->
    <view class="uni-flex flex" style="margin-top: 20rpx;">
      <view style="width: 50%;">
        <view :class="collectFlag?'collect-active':'collect'" @click="clickCollectSchool">
          <view class="uni-flex flex">
            <view class="flex-item-2">
              <image :src="collectFlag? ImagesConstant.loveWhile:ImagesConstant.loveDarkturquoise"
                     style="width: 50rpx;height: 50rpx;"/>
            </view>
            <view class="flex-item-7">
              <text style="font-size: 30rpx;line-height: 50rpx;">收藏院校</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view>
    <!-- 分享示例 -->
    <uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
      <uni-popup-share></uni-popup-share>
    </uni-popup>
  </view>
  <!--底部固定-->
  <view class="bottom">
    <view class="shareBtn" open-type="share">分享给朋友一起测</view>
  </view>
</template>

<style scoped lang="scss">
/*院校列表*/
.school-item {
  padding: 30rpx;
  background-color: white;
  border-radius: 15rpx;

  .other {
    margin-top: 60rpx;
    height: 100rpx;
  }

  .other .t_item {
    border-right: 1rpx solid #efeaea;
    height: 60rpx;
  }

  .t-item-b {
    position: relative;
    top: -30rpx;

    image {
      width: 80rpx;
      height: 80rpx;
      margin: 0 auto 10rpx auto;
    }
  }

  .other .end {
    border: none;
  }
}

.majorTitle {
  font-size: 35rpx;
  color: #939292;
  padding: 30rpx;
}

.majorName {

}

.body {
  padding: 30rpx;
  height: 80%;

  .detail {
    background-color: white;
    border-radius: 30rpx;
    margin-bottom: 30rpx;
    /*标题*/
    .title {
      font-size: 40rpx;
      margin: 40rpx auto 30rpx auto;
    }

    .mntext {
      font-size: 25rpx;
      color: #939292;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
    }

    .mntext2 {
      font-size: 30rpx;
      color: #939292;
      line-height: 40rpx;
    }

    .mntext3 {
      font-size: 26rpx;
      line-height: 40rpx;
    }

    .mnTitle {
      font-size: 25rpx;
      color: #939292;
    }
  }
}

.bottom {
  position: fixed;
  bottom: 0;
  border-radius: 30rpx 30rpx 0 0;
  height: 200rpx;
  width: 100%;
  background: linear-gradient(#ffffff, #f9f58f);

  .shareBtn {
    width: 60%;
    text-align: center;
    margin: 50rpx auto;
    border-radius: 50rpx;
    background: linear-gradient(45deg, #f9a418, #fad81d, #f9a418);
    padding: 30rpx;
    color: white;
    font-weight: 600;
    font-size: 40rpx;
    font-style: italic; //字体倾斜
    -webkit-animation-name: animationScale; /*关键帧名称*/
    -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
    -webkit-animation-iteration-count: infinite; /*动画播放的次数*/
    -webkit-animation-duration: 4s; /*动画所花费的时间*/
  }
}

.center {
  text-align: center;
  margin: 0 auto;
}

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

.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;
  border: 1rpx solid #52c6c6;
  border-radius: 10rpx;
  padding: 0 8rpx;
  text-align: right;
}


.introduceBlock {
  text-indent: 2em;
}

// 二
.introduceBlock::before {
  content: "\2003";
}

.darkturquoise{
  font-weight: 600;
}

//关注院校 按钮样式
.collect {
  background-color: white;
  color: darkturquoise;
  height: 50rpx;
  border-radius: 15rpx;
  padding: 30rpx 0 30rpx 30rpx;
  text-align: center
}

.collect-active {
  background-color: darkturquoise;
  color: white;
  height: 50rpx;
  border-radius: 15rpx;
  padding: 30rpx 0 30rpx 30rpx;
  text-align: center
}

// 动画
@keyframes animationScale {
  0% {
    transform: scale(1); /*开始为原始大小*/
  }
  25% {
    transform: scale(1.1); /*放大1.1倍*/
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
}
</style>
