<script>
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'
import StaticConstant from "@/common/StaticConstant";
import {stringIsNotEmpty} from "../../../common/util";
//import mrsongCharts from '@/uni_modules/mrsong-charts/components/mrsong-charts/mrsong-charts.vue';

let request = new Request()
export default {
  components: {
    // mrsongCharts
  },
  data() {
    return {
      majorTypeName: '',
      majorInfo: {},
      vipInfo: {},
      schoolName: '',
      tabs: [
        {
          id: 1,
          name: '基本信息'
        }, {
          id: 2,
          name: '开设院校'
        }
      ],
      scrollLeft: 0,
      currentTab: 0,
      old: {
        scrollTop: 0
      },
      bpts: {
        jobDistribution: StaticConstant.opts,//就业岗位分析
      },
      chartData: {
        sexRatio: {},//男女分布
        jobDistribution: {},//就业岗位分析
        industryDistribution: {},//就业行业分布
        regionDistribution: {},//就业地区分布
      },
      tabCurrent: '1',
      schoolResult: {
        current: 1,
        size: 8,
        total: 0,
        pages: 0,
        list: []
      },
      status: 'more',
      statusTypes: StaticConstant.loadStatusTypes,
      contentText: StaticConstant.loadContentText
    }
  },
  onLoad(e) {
    if (e.majorCode) {
      this.majorCode = e.majorCode;
      console.log('majorCode ', this.majorCode)
      this.getMajorDetailInfo()
    }
    if (e.majorTypeName) {
      this.majorTypeName = e.majorTypeName
    }
    this.vipInfo = uni.getStorageSync('vipInfo')
  },
  onReachBottom() {
    console.log("已经滚动到底部了")
    if ((this.vipInfo && this.vipInfo.vipFlag) && this.currentTab === 1) {
      this.loadMore()
    }
  },
  methods: {
    swichMenu(id) {
      let that = this
      if (!this.vipInfo || !stringIsNotEmpty(this.vipInfo.vipLevel) || !this.vipInfo.vipFlag) {
        uni.showModal({
          title: 'VIP专享',
          // 提示文字
          content: '该功能为增值内容，开通会员后即可免费查看！',
          // 取消按钮的文字自定义
          cancelText: "取消",
          // 确认按钮的文字自定义
          confirmText: "开通服务",
          //删除字体的颜色
          confirmColor: 'red',
          //取消字体的颜色
          cancelColor: '#dddddd',
          success: function (res) {
            if (res.confirm) {
              // 执行确认后的操作
              that.goto('/pages/zyb/vip/index')
            }
          }
        })
        return
      }
      this.currentTab = id
      console.log(id)
      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
          this.loadManData()
          this.loadJobDistributionData()
          this.loadIndustryDistributionData()
          this.loadRegionDistributionData()
          that.getSchoolList()
        }
      }).catch(err => {
      }).finally(() => {
      });
    },
    /*加载男女分布*/
    loadManData() {
      if (this.majorInfo.sexRatio) {
        let sList = this.majorInfo.sexRatio.split('、')
        let list = []
        for (let i = 0; i < sList.length; i++) {
          let r = sList[i].split('：')
          list.push({name: r[0].replace('\\', ''), value: parseFloat(r[1].replace('%', ''))})
        }
        console.log(list)
        this.chartData.sexRatio = {series: [{data: list}]}
      }
    },
    /*加载就业岗位分布*/
    loadJobDistributionData() {
      if (this.majorInfo.jobDistribution) {
        let jobDistributionSList = this.majorInfo.jobDistribution.split('、')
        let jobDistributionList = []
        for (let i = 0; i < jobDistributionSList.length; i++) {
          let jobDistribution = jobDistributionSList[i].split('：')
          jobDistributionList.push({
            name: jobDistribution[0].replace('\\', ''),
            value: parseFloat(jobDistribution[1].replace('%', ''))
          })
        }
        this.chartData.jobDistribution = {series: [{data: jobDistributionList}]}
      }
    },
    /*加载就业行业分布*/
    loadIndustryDistributionData() {
      if (this.majorInfo.industryDistribution) {
        let sList = this.majorInfo.industryDistribution.split('、')
        let list = []
        for (let i = 0; i < sList.length; i++) {
          let r = sList[i].split('：')
          list.push({name: r[0].replace('\\', ''), value: parseFloat(r[1].replace('%', ''))})
        }
        this.chartData.industryDistribution = {series: [{data: list}]}
      }
    },
    /*加载就业地区分布*/
    loadRegionDistributionData() {
      if (this.majorInfo.regionDistribution) {
        let sList = this.majorInfo.regionDistribution.split('、')
        let list = []
        for (let i = 0; i < sList.length; i++) {
          let r = sList[i].split('：')
          list.push({name: r[0].replace('\\', ''), value: parseFloat(r[1].replace('%', ''))})
        }
        this.chartData.regionDistribution = {series: [{data: list}]}
      }
    },

    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
      },{showLoad:false}).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">
            <!--专业简介-->
            <uni-section title="专业简介" type="line">
              <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>
            </uni-section>
            <!--学什么-->
            <uni-section title="学什么" type="line">
              <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>
            </uni-section>
            <!--干什么-->
            <uni-section title="干什么" type="line">
              <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>
            </uni-section>
            <!--数据统计-->
            <uni-section title="男女比例" type="line" v-if="majorInfo.sexRatio">
              <view class="charts-box padding20">
                <qiun-data-charts type="pie" :opts="chartData.jobDistribution"
                                  :chartData="chartData.sexRatio"/>
              </view>
            </uni-section>
            <uni-section title="就业岗位分布" type="line" v-if="majorInfo.jobDistribution">
              <view class="charts-box padding20">
                <!--              <mrsongCharts type='pie' title="" align='left' :charts-data="chartData.jobDistribution"/>-->
                <qiun-data-charts type="pie" :opts="chartData.jobDistribution" :chartData="chartData.jobDistribution"/>
              </view>
            </uni-section>
            <uni-section title="就业行业分布" type="line" v-if="majorInfo.industryDistribution">
              <view class="charts-box padding20">
                <qiun-data-charts type="pie" :opts="chartData.jobDistribution"
                                  :chartData="chartData.industryDistribution"/>
              </view>
            </uni-section>
            <uni-section title="就业地区分布" type="line" v-if="majorInfo.regionDistribution">
              <view class="charts-box padding20">
                <qiun-data-charts type="pie" :opts="chartData.jobDistribution"
                                  :chartData="chartData.regionDistribution"/>
              </view>
            </uni-section>
          </view>
        </view>
        <!--开设院校-->
        <view class="ksyx" v-if="currentTab===1">
          <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: 50%;
    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;
}


.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.chart-title {
  padding: 0 10rpx;
}

.chart-unit {
  display: flex;
  justify-content: flex-end;
  padding: 0 10rpx;
}
</style>
