<script>
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 {
      culturalScore: '',//我的文化分
      professionalScore: '',//我的专业分
      category: '文科',//
      schoolInfo: {},//学校信息
      schoolCode: '',//学校编码
      collectStatus: false,
      collectIndex: 0,
      tabs: [{id: 'jbjs', name: '基本介绍'}, {id: 'zlxx', name: '招录信息'}, {id: 'kszy', name: '开设专业'}],
      tab: 'zlxx',
      scrollLeft: 0,
      chartData: {},
      opts: {
        color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
        padding: [5, 5, 5, 5],
        enableScroll: false,
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: true,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      },
      fsxIndex: 0,//分数线选择
      tdxIndex: 0,//投档线选择
      majorList: [],//
      professionalCategoryIndex: 0,//批次专业选择
      professionalCategoryList: StaticConstant.professionalCategoryList,//
      historyScoreControlLineList: [],//批次线数据
    }
  },
  onShow() {
  },
  onLoad(e) {
    if (e.schoolCode) {
      this.schoolCode = e.schoolCode;
    }
    // this.schoolCode = '2090'
    this.getSchoolDetailInfo()

    let scoreInfo = uni.getStorageSync('scoreInfo')
    if (scoreInfo) {
      this.culturalScore = scoreInfo.culturalScore
      this.professionalScore = scoreInfo.professionalScore
      this.category = scoreInfo.cognitioPolyclinic
    }

  },
  methods: {
    goto(e){
      uni.navigateTo({
        url: e
      })
    },
    swichMenu(id) {
      this.currentTab = id
      console.log(id)
      // 滑动swiper后，每个选项距离其父元素最左侧的距离
      this.scrollLeft = 0;
      for (let i = 0; i < id; i++) {
        this.scrollLeft += 60
        console.log(this.scrollLeft, 60, id)
      }
    },
    /*获取专业详情*/
    getSchoolDetailInfo() {
      let that = this
      request.get(ApiConstant.School.schoolInfo, {
        schoolCode: this.schoolCode,
      }).then(r => {
        console.log(r)
        if (r.success) {
          that.schoolInfo = r.result
          //判断是否收藏了
          that.checkCollect()
          //加载 男女比例
          this.loadManData()
          //获取院校开设专业
          this.getSchoolMajorList()
          //加载 批次线
          this.getHistoryList()
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    //收藏院校
    collect() {
      let collectSchoolList = uni.getStorageSync('collectSchoolList')
      console.log(collectSchoolList)
      if (collectSchoolList === undefined || collectSchoolList === null || collectSchoolList === '') {
        collectSchoolList = []
      }
      if (this.collectStatus === true) {
        //取消收藏
        //获取 收藏的学校列表中，当前的index
        this.checkCollect()
        this.collectStatus = false
        //移除
        collectSchoolList.splice(this.collectIndex, 1)
      } else {
        //收藏
        this.collectStatus = true
        collectSchoolList.push(this.schoolInfo)
      }
      uni.setStorageSync('collectSchoolList', collectSchoolList)
    },
    //判断收藏按钮
    checkCollect() {
      let collectSchoolList = uni.getStorageSync('collectSchoolList')
      if (collectSchoolList === undefined || collectSchoolList === null || collectSchoolList === '') {
        collectSchoolList = []
      }
      //遍历 缓存中 收藏的学校列表
      for (let i = 0; i < collectSchoolList.length; i++) {
        if (collectSchoolList[i].id === this.schoolInfo.id) {
          // 有收藏这个
          this.collectStatus = true
          this.collectIndex = i
        }
      }
    },
    //加载男女生饼图
    loadManData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          series: [
            {
              data: [{"name": "男生", "value": this.schoolInfo.maleRatio}, {
                "name": "女生", "value": this.schoolInfo.femaleRatio
              }]
            }
          ]
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
    //获取历年批次线
    getHistoryList() {
      request.get(ApiConstant.Score.historyScoreControlLineList, {
        professionalCategory: this.professionalCategoryList[this.professionalCategoryIndex].value,
        category: this.category,
        pageSize: 999
      }).then(res => {
        if (res.success) {
          this.historyScoreControlLineList = res.result.records
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    getSchoolMajorList(){
      request.get(ApiConstant.Major.schoolMajorList, {
        cognitioPolyclinic: this.category,
        schoolCode: this.schoolCode
      }).then(res => {
        if (res.success) {
          this.majorList = res.result
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    //选择批次线下拉
    bindPickerPcxChange(e) {
      this.professionalCategoryIndex = e.detail.value
      this.getHistoryList()
    },
    //选择投档线下拉
    bindPickerTdxChange(e) {
      this.tdxIndex = e.detail.value
    },
    //选择录取分数线下拉
    bindPicker_lqMajorChange(e) {
      this.fsxIndex = e.detail.value
    },
  }
}
</script>
<template>
  <!--头部-->
  <view class="head">
    <view class="schoolHead">
      <view class="uni-flex flex">
        <view class="flex-item-17 padding30">
          <image :src="schoolInfo.schoolIcon" style="width: 128rpx;height: 128rpx" mode="aspectFill"/>
        </view>
        <view class="flex-item-6" style="margin: 30rpx 0">
          <view class="flex" style="padding-bottom: 20rpx;height: 30rpx;line-height: 30rpx">
            <text class="schoolName">{{ schoolInfo.schoolName }}</text>
          </view>
          <view class="flex" style="padding-bottom: 20rpx;height: 30rpx;line-height: 30rpx">
            <text class="schoolNature" v-if="schoolInfo.schoolNature">{{ schoolInfo.schoolNature }}</text>
            <text class="institutionType" v-if="schoolInfo.institutionType">{{ schoolInfo.institutionType }}类</text>
          </view>

          <view style="display: flex;padding: 0;line-height: 30rpx">
            <view class="tags">
              <view class="tag" v-for="(tag,i) in schoolInfo.tagsList" :key="i">
                <text>{{ tag }}</text>
              </view>
            </view>
          </view>

          <view class="flex">
            <text class="address" v-if="schoolInfo.street">{{ schoolInfo.street }}</text>
          </view>
        </view>
        <view class="flex-item-15">
          <view>
            <text :class="collectStatus?'collectBtn collectBtn-active':'collectBtn'" plain="true" @click="collect">
              收藏
            </text>
          </view>
        </view>
      </view>
      <my-menu :tab="tab" :tab-list="tabs"/>
    </view>
  </view>
  <!--学校概括-->
  <view class="m-card padding20 margin20" v-if="tab === 'jbjs'">
    <uni-section title="学校介绍" type="line">
      <view class="padding20">
        <view class="content">
          <mote-lines-divide :dt="schoolInfo.baseInfo" :line="3" expandtext="展开" foldhint="收起"/>
        </view>
      </view>
    </uni-section>
    <uni-section title="国家特色专业" type="line">
      <view class="padding20">
        <view class="other-item">{{ schoolInfo.gjtszy }}</view>
      </view>
    </uni-section>
    <uni-section title="省特色专业" type="line">
      <view class="padding20">
        <view class="other-item">{{ schoolInfo.stszy }}</view>
      </view>
    </uni-section>
    <uni-section title="男女比例" type="line">
      <view class="charts-box padding20">
        <qiun-data-charts type="pie" :opts="opts" :chartData="chartData"/>
      </view>
    </uni-section>
    <uni-section title="其他信息" type="line">
      <view class="padding20">
        <view class="other-item" v-if="schoolInfo.schoolWebsiteAddress">
          <text class="b">官方网址：</text>
          <uni-link v-if="schoolInfo.schoolWebsiteAddress" :href="schoolInfo.schoolWebsiteAddress"
                    :text="schoolInfo.schoolWebsiteAddress"></uni-link>
        </view>
        <view class="other-item" v-if="schoolInfo.schoolPhone">
          <text class="b">招生电话：</text>
          {{ schoolInfo.schoolPhone }}
        </view>
        <view class="other-item" v-if="schoolInfo.street">
          <text class="b">校区地址：</text>
          {{ schoolInfo.street }}
        </view>

      </view>
    </uni-section>
  </view>
  <!--招录信息-->
  <view v-if="tab ==='zlxx'">
    <!--我的成绩-->
    <view class="m-card padding20 margin20">
      <view class="flex padding20">
        <view class="flex-item-5">
          我的成绩：文化分：
          <text class="red">{{ culturalScore || '-' }}</text>
        </view>
        <view class="flex-item-5">
          专业分：
          <text class="orange">{{ professionalScore || '-' }}</text>
        </view>
      </view>
    </view>
    <!--招生章程-->
    <view class="m-card padding20 margin20">
      <uni-section title="招生章程" type="line">
      </uni-section>
    </view>
    <!--批次线-->
    <view class="m-card padding20 margin20" v-if="false">
      <uni-section title="批次线" type="line">
        <view style="position: relative;bottom: 75rpx;float: right" class="flex-item-6">
          <picker @change="bindPickerPcxChange" :value="professionalCategoryIndex" :range="professionalCategoryList"
                  range-key="value">
            <view class="uni-input font-size-mini" style="float: right">
              {{ professionalCategoryList[professionalCategoryIndex].value }}
              <image :src="ImagesConstant.keyboard.arrowDown2" class="icon50 marginCenter"
                     style="vertical-align: middle"/>
            </view>
          </picker>
        </view>
        <view class="historyScoreLineList slateGray">
          <view class="hsl-item" v-for="(item,index) in historyScoreControlLineList" :key="index">
            <view class="other-item">
              <text>批次：</text>
              <text>{{ item.batch }}</text>
            </view>
            <view class="other-item right-item">
              <text>文化分：</text>
              <text v-if="item.culturalScore">{{ item.culturalScore }}</text>
            </view>

            <view class="other-item">
              <text>{{ item.professionalCategory }}{{ item.year }}年</text>
            </view>
            <view class="other-item right-item">
              <text>专业分：</text>
              <text v-if="item.specialScore">{{ item.specialScore }}</text>
            </view>
          </view>
        </view>
      </uni-section>
    </view>
    <!--历年投档线-->
<!--    <view class="m-card padding20 margin20">
      <uni-section title="历年投档线" type="line">
        <view style="position: relative;bottom: 75rpx;float: right" class="flex-item-6" v-if="majorList && majorList.length>0">
          <picker @change="bindPickerTdxChange" :value="tdxIndex" :range="majorList" range-key="majorName">
            <view class="uni-input font-size-mini" style="float: right">{{ majorList[tdxIndex].majorName }}
              <image :src=ImagesConstant.keyboard.arrowDown2 class="icon50 marginCenter"
                     style="vertical-align: middle"/>
            </view>
          </picker>
        </view>
        <view class="historyScoreLineList slateGray" v-if="majorList && majorList.length>0">
          <view class="hsl-item" v-for="(item,index) in majorList[tdxIndex].historyMajorEnrollList" :key="index">
            <view class="other-item">
              <text>批次：</text>
              <text>{{ item.batch }}</text>
            </view>
            <view class="other-item right-item">
              <text>{{ item.year }}</text>
            </view>
            <view class="other-item">
              <text>备注：-</text>
            </view>
            <view class="other-item">
              <text>投档方式：</text>
              <text>{{ item.rulesEnrollProbability || '未公布' }}</text>
            </view>
            <view class="other-item">
              <text>投档公式：</text>
              <text>{{ item.probabilityOperator || '未公布' }}</text>
            </view>
            <view class="other-item">
              <text>投档分数：</text>
              <text class="blue">未公布</text>
            </view>
            <view class="other-item">
              <text>考试类型：统考</text>
            </view>
          </view>
        </view>
      </uni-section>
    </view>-->
    <!--录取分数线-->
    <view class="m-card padding20 margin20">
      <uni-section title="录取分数线" type="line">
        <view style="position: relative;bottom: 75rpx;float: right" class="flex-item-6" v-if="majorList && majorList.length>0">
          <picker @change="bindPicker_lqMajorChange" :value="fsxIndex" :range="majorList" range-key="majorName">
            <view class="uni-input font-size-mini" style="float: right">{{ majorList[fsxIndex].majorName }}
              <image :src="ImagesConstant.keyboard.arrowDown2" class="icon50 marginCenter"
                     style="vertical-align: middle"/>
            </view>
          </picker>
        </view>
        <view class="historyScoreLineList slateGray" v-if="majorList && majorList.length>0">
          <view class="hsl-item" v-for="(item,index) in majorList[fsxIndex].historyMajorEnrollList" :key="index">
            <view class="other-item">
              批次：
              <text>{{ item.batch }}</text>
            </view>
            <view class="other-item right-item">
              <text>{{ item.year }}</text>
            </view>
            <view class="other-item">
              <text>备注：</text>
              <text>{{ item.detail || '-' }}</text>
            </view>
            <view class="other-item">
              <text>录取方式：</text>
              <text>{{ item.rulesEnrollProbability || '未公布' }}</text>
            </view>
            <view class="other-item">
              <text>录取公式：</text>
              <text>{{ item.probabilityOperator || '未公布' }}</text>
            </view>
            <view class="other-item">
              <text>录取分数：</text>
              <text class="blue">{{ item.admissionLine || '未公布' }}</text>
            </view>
            <view class="other-item">
              <text>考试类型：</text>
              <text>统考</text>
            </view>
          </view>
        </view>
      </uni-section>
    </view>
  </view>

  <!--开设专业-->
  <view v-if="tab ==='kszy'">
    <!--开设专业-->
    <view class="m-card padding20 margin20">
      <uni-section title="开设专业" type="line">
        <view class="historyScoreLineList slateGray" v-if="majorList && majorList.length>0">
          <view class="hsl-item" :class="index===0?'not-border':''" v-for="(item,index) in majorList" :key="index" @click="goto('/pages/zyb/major/detail?majorCode='+item.majorCode)">
            <view class="other-item">
              <text>{{ item.majorName }}</text>
            </view>
            <view class="other-item right-item">
              <image :src="ImagesConstant.keyboard.arrowRight" class="icon50"/>
            </view>
          </view>
        </view>
      </uni-section>
    </view>
  </view>
</template>
<!-- 使用scroll-view实现tabs滑动切换 -->
<!--<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="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>-->
<style scoped lang="scss">
/*头部部分*/
.head {
  background-color: white;
  min-height: 300rpx;
  border-bottom: 1rpx solid #4975fd;
  border-radius: 0 0 30rpx 30rpx;
}

/*顶部学校名称，图片，地址 信息*/
.schoolHead {
  background-color: white;
  min-height: 200rpx;
  /*院校名称*/
  .schoolName {
    font-size: 30rpx;
  }

  /*办学性质*/
  .schoolNature {
    color: #e2bf44;
    margin-right: 10rpx;
    font-size: 25rpx;
  }

  /*院校类型*/
  .institutionType {
    color: #b4b4b4;
    margin: 0 10rpx;
    font-size: 25rpx;
  }

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

  .tags .tag {
    line-height: 30rpx;
    font-size: 25rpx;
    color: #acadba;
    border: 3rpx solid #acadba;
    border-radius: 8rpx;
    padding: 5rpx;
    margin: 0 10rpx 10rpx 0;
  }

  .address {
    font-size: 25rpx;
    color: $uni-bg-color-mask;
  }

  /*收藏按钮*/
  .collectBtn {
    position: relative;
    top: 25rpx;
    font-size: 25rpx !important;
    border: 1rpx solid $uni-bg-color-mask;
    padding: 6rpx 20rpx;
    border-radius: 8rpx;
    transition: 0.3s;
  }

  /*机或者的收藏按钮*/
  .collectBtn-active {
    background-color: #3d76fd;
    border: 1rpx solid #3d76fd;
    color: white;
  }
}

/*其他信息*/
.other-item {
  display: block;
  font-size: 26rpx;
  line-height: 40rpx;

  .b {
    font-weight: 600;
  }
}

.right-item {
  position: relative;
  bottom: 40rpx;
  float: right;
}

/*学校介绍 点击展开更多*/
.content-close {
  max-height: 300rpx;

  text {
    height: 300rpx;
  }
}

/*录取分数线*/
.historyScoreLineList {
  padding: 20rpx;

  .hsl-item {
    padding: 20rpx 0;
    border-top: 4rpx solid #f2f2f2;
  }
}

.uni-input {
  height: 40rpx;
  line-height: 40rpx;
}

/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
.charts-box {
  padding: 20rpx;
  margin: 0 auto;
  width: 80%;
  height: 200px;
}


.content {
  /*font-size: 24rpx;
  text-indent:48rpx;*/
}
</style>
