<script>
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'

let request = new Request()
export default {
  data() {
    return {
      majorTypeName: '',
      majorInfo: {},
      schoolName: '',
      tabs: [
        {
          id: 1,
          name: '基本信息'
        }, {
          id: 2,
          name: '就业分析'
        }, {
          id: 3,
          name: '开设院校'
        }
      ],
      scrollLeft: 0,
      currentTab: 0,
      old: {
        scrollTop: 0
      },
      tabCurrent: '1',
      schoolResult: {
        current: 1,
        size: 5,
        total: 0,
        pages: 0,
        list: []
      },
      status: 'more',
      statusTypes: [
        {
          value: 'more',
          text: '加载前',
          checked: true
        }, {
          value: 'loading',
          text: '加载中',
          checked: false
        }, {
          value: 'noMore',
          text: '没有更多',
          checked: false
        }],
      contentText: {
        contentdown: '查看更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多'
      }
    }
  },
  onLoad(e) {
    if (e.majorCode) {
      this.majorCode = e.majorCode;
      console.log('majorCode ', this.majorCode)
      this.getMajorDetailInfo()
    }
    if (e.majorTypeName) {
      this.majorTypeName = e.majorTypeName
    }
  },
  methods: {
    swichMenu(id) {
      this.currentTab = id
      console.log(id)
      //this.tabCurrent = 'tabNum'+ id
      // 滑动swiper后，每个选项距离其父元素最左侧的距离
      this.scrollLeft = 0;
      for (let i = 0; i < id; i++) {
        this.scrollLeft += 60
        console.log(this.scrollLeft, 60, id)
      }
    },
    /*获取专业详情*/
    getMajorDetailInfo() {
      let that = this
      request.get(ApiConstant.Major.majorInfo, {
        majorCode: this.majorCode,
      }).then(r => {
        console.log(r)
        if (r.success) {
          this.majorInfo = r.result
          that.getSchoolList()
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    /*加载就业岗位分布*/
    loadJobDistributionData() {
      if (this.majorInfo.jobDistribution) {
        let jobDistributionSList = this.majorInfo.jobDistribution.split('、')
        let jobDistributionList = []
        let jobDistribution = null
        console.log(jobDistributionSList)
        jobDistributionSList.for(j => console.log(j))
        for (let i = 0; i < jobDistributionSList.length; i++) {
          //jobDistribution = jobDistributionList[i].split('：')
          //jobDistributionList.push({name:jobDistribution[0],value:jobDistribution[1]})
        }
        //模拟从服务器获取数据时的延时
        setTimeout(() => {
          //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
          let res = {
            series: [
              {
                data: jobDistributionList
              }
            ]
          };
          this.chartData.jobDistribution = JSON.parse(JSON.stringify(res));
        }, 500);
      }

    },

    getSchoolList() {
      let that = this
      that.status = 'loading'
      request.get(ApiConstant.School.searchSchoolList, {
        majorCode: this.majorCode,
        schoolName: this.schoolName,
        pageNum: this.schoolResult.current,
        pageSize: this.schoolResult.size
      }).then(r => {
        console.log(r)
        if (r.success) {
          that.schoolResult.current = r.result.current
          that.schoolResult.size = r.result.size
          that.schoolResult.total = r.result.total
          //追加到列表数据中
          that.schoolResult.list = [...that.schoolResult.list, ...r.result.records]
          if (r.result.current >= r.result.pages) {
            that.status = 'noMore'
          } else {
            that.status = 'more'
          }
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    searchSchoolClick() {
      this.schoolResult.current = 1
      this.schoolResult.list = []
      this.schoolResult.total = 0
      this.getSchoolList()
    },
    clearSchoolInput() {
      this.schoolName = ''
      this.schoolResult.current = 1
      this.schoolResult.list = []
      this.schoolResult.total = 0
      this.getSchoolList()
    },
    onReachBottom() {
      console.log("onReachBottom");
    },
    loadMore() {
      if (this.status === 'noMore') {
        return;
      }
      console.log('加载中')
      this.schoolResult.current++;
      this.getSchoolList()
    },
    goto(url) {
      uni.navigateTo({
        url: url
      })
    }
  }
}
</script>
<template>
  <view class="body-view">
    <view class="head">
      <view class="info">
        <view class="majorName">
          <text>{{ majorInfo.majorName }}</text>
        </view>
        <view class="majorType">
          <text style="margin-right: 10rpx" v-if="majorTypeName">{{ majorTypeName }}</text>
          <text>专业代码：{{ majorInfo.majorCode }}</text>
        </view>
        <view class="semeterRow">
          <view :class="majorInfo.educationalLevel==='1'?'flex-item-33':'flex-item-5'" class="border-right">
            <view style="display: flex">
              <text style="color: white;font-size: 30rpx;margin: 0 auto;">
                {{ majorInfo.educationalLevel === '1' ? '本科' : '专科' }}
              </text>
            </view>
            <view style="display: flex">
              <text style="color: #b6c8fe;font-size: 26rpx;margin: 0 auto;">学历层次</text>
            </view>
          </view>
          <view :class="majorInfo.educationalLevel==='1'?'flex-item-33 border-right':'flex-item-5'">
            <view style="display: flex">
              <text style="color: white;font-size: 30rpx;margin: 0 auto;">{{ majorInfo.semester }}年</text>
            </view>
            <view style="display: flex">
              <text style="color: #b6c8fe;font-size: 26rpx;margin: 0 auto;">学制年限</text>
            </view>
          </view>
          <view class="flex-item-33" v-if="majorInfo.educationalLevel==='1'">
            <view style="display: flex">
              <text style="color: white;font-size: 30rpx;margin: 0 auto;">{{ majorInfo.degree || '未知' }}</text>
            </view>
            <view style="display: flex">
              <text style="color: #b6c8fe;font-size: 26rpx;margin: 0 auto;">学位</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="top-body">
      <!-- 使用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>
      <!-- 内容 -->
      <view>
        <!--基本信息-->
        <view class="jbxx" v-if="currentTab===0">
          <view class="example-body">
            <!--专业简介-->
            <view class="uni-box">
              <uni-title class="h3" type="h3" title="专业简介"></uni-title>
            </view>
            <view class="uni-text" v-if="majorInfo.ssm">
              <mote-lines-divide :dt="majorInfo.ssm" :line="3" expandtext="展开" foldhint="收起"/>
            </view>
            <view class="uni-text" v-else>暂未收录...</view>
            <!--学什么-->
            <view class="uni-box">
              <uni-title class="h3" type="h3" title="学什么"></uni-title>
            </view>
            <view class="uni-text" v-if="majorInfo.xsm">
              <mote-lines-divide :dt="majorInfo.xsm" :line="3" expandtext="展开" foldhint="收起"/>
            </view>
            <view class="uni-text" v-else>暂未收录...</view>
            <!--干什么-->
            <view class="uni-box">
              <uni-title class="h3" type="h3" title="干什么"></uni-title>
            </view>
            <view class="uni-text" v-if="majorInfo.gsm">
              <mote-lines-divide :dt="majorInfo.gsm" :line="3" expandtext="展开" foldhint="收起"/>
            </view>
            <view class="uni-text" v-else>暂未收录...</view>
            <!--数据统计-->
            <view class="uni-box">
              <uni-title class="h3" type="h3" title="数据统计"></uni-title>
            </view>
            <view class="uni-text" v-if="majorInfo.sexRatio">
              <view class="">{{majorInfo.sexRatio}}</view>
            </view>

          </view>
        </view>
        <!--就业分析-->
        <view class="jyfx" v-if="currentTab===1">
          <view class="uni-box">
            <uni-title class="h3" type="h3" title="就业岗位分布"></uni-title>
          </view>
          <view>
            <text class="uni-text">
              {{ majorInfo.jobDistribution || '暂未收录...' }}
            </text>
          </view>
          <view class="uni-box">
            <uni-title class="h3" type="h3" title="就业行业分布"></uni-title>
          </view>
          <view>
            <text class="uni-text">
              {{ majorInfo.industryDistribution || '暂未收录...' }}
            </text>
          </view>
          <view class="uni-box">
            <uni-title class="h3" type="h3" title="就业地区分布"></uni-title>
          </view>
          <view>
            <text class="uni-text">
              {{ majorInfo.regionDistribution || '暂未收录...' }}
            </text>
          </view>
        </view>
        <!--开设院校-->
        <view class="ksyx" v-if="currentTab===2">
          <view style="display: flex;height: 100rpx;border-bottom: 1px solid #f5f5f5;">
            <view style="width: 80%">
              <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 class="schoolList">
            <view v-for="(item,index) in schoolResult.list" :key="index"
                  :class="index === schoolResult.list.length-1?'school-item school-item-end':'school-item'"
                  @click="goto('/pages/zyb/school/detail?schoolCode='+item.schoolCode)">
              <view class="uni-flex flex">
                <view class="flex-item-2">
                  <image :src="item.schoolIcon" style="width: 100rpx;height: 100rpx" mode="aspectFill"/>
                </view>
                <view class="flex-item-8" style="padding: 0;">
                  <view class="uni-flex flex">
                    <text class="schoolName">{{ item.schoolName }}</text>
                  </view>
                  <view class="uni-flex flex">
                    <view class="tags">
                      <view class="tag" v-for="(tag,i) in item.tagsList" :key="i">
                        <text>{{ tag }}</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="container" @click="loadMore">
              <uni-load-more :status="status" :content-text="contentText"/>
            </view>
          </view>

        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
/*头部部分*/
.head {
  background-color: #4975fd;
  min-height: 450rpx;

  .info {
    padding: 30rpx;

    .majorName {
      color: white;
      font-size: 50rpx;
      font-weight: 600;
      display: flex;
      margin: 20rpx 30rpx;
    }

    .majorType {
      font-size: 30rpx;
      display: flex;
      margin: 0 30rpx;
      color: #b6c8fe;
    }

    .semeterRow {
      margin: 40rpx 30rpx;
      display: flex;
    }
  }
}

.body-view {
  width: 100%;
  overflow: hidden;
}

.top-body {
  margin: 30rpx;
  padding: 30rpx;
  background-color: white;
  border-radius: 30rpx;
  position: relative;
  top: -150rpx;
}

/*tabs 栏*/
.top-menu-view {
  display: flex;
  //position: fixed;
  z-index: 100;
  //top: 84rpx;
  /* #ifdef H5 */
  top: 84rpx;
  /* #endif */
  /* #ifndef H5 */
  top: 0rpx;
  /* #endif */
  left: 0;
  white-space: nowrap;
  width: 100%;
  background-color: white;
  height: 86rpx;
  line-height: 86rpx;
  //border-top: 1rpx solid #d8dbe6;
  border-bottom: 1px solid #f5f5f5;

  .menu-topic-view {
    display: inline-block;
    white-space: nowrap;
    height: 86rpx;
    position: relative;
    width: 33.3%;
    text-align: center;

    .menu-topic-text {
      font-size: 30rpx;
      color: #303133;
      padding: 10rpx 40rpx;
      font-weight: 500;
    }

    .menu-topic-bottom {
      position: absolute;
      bottom: 0;
      width: 100%;

      .menu-topic-bottom-color {
        width: 40rpx;
        height: 4rpx;
      }
    }

    .menu-topic-act .menu-topic-bottom {
      display: flex;
      justify-content: center;
    }

    .menu-topic-act .menu-topic-text {
      color: #4975fd;
    }


    .menu-topic-act .menu-topic-bottom-color {
      background: #4975fd;
    }
  }
}

.jbxx {
  padding: 20rpx 10rpx;
}

.jyfx {
  padding: 20rpx 10rpx;
}

.ksyx {

}

.uni-text {
  line-height: 50rpx;
  color: #acadba;
}

:deep(.uni-searchbar) {
  padding: 15rpx 10rpx !important;
}

.school-item {
  padding: 30rpx 0;
  border-bottom: 1px solid #f5f5f5;

  .schoolName {
    font-size: 35rpx;
  }

  .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: 10rpx 20rpx 10rpx 0;
  }
}

.border-right {
  border-right: 3rpx solid #6d91fd
}

.school-item-end {
  border-bottom: none !important;
}
</style>
