<!--
左右翻形式
-->
<script>
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'
import ImagesConstant from "@/common/ImagesConstant";

let request = new Request()
export default {
  computed: {
    ImagesConstant() {
      return ImagesConstant
    }
  },
  data() {
    return {
      majorName: '',
      tabs: [
        {
          id: 1,
          name: '本科'
        }, {
          id: 2,
          name: '高职高专'
        }
      ],
      scrollLeft: 0,
      currentTab: 0,
      old: {
        scrollTop: 0
      },
      tabCurrent: '1',
      // Tab切换内容
      artMiniMajorList: [],
    }
  },
  onLoad() {
    this.getMajorList()
  },
  methods: {
    openMajorDetail: function (e,majorTypeName) {
      console.log(e)
      uni.navigateTo({
        url: '/pages/zyb/major/detail?majorCode='+e.majorCode+"&majorTypeName="+majorTypeName
      })
    },
    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)
      }
      this.getMajorList()
    },
    getMajorList() {
      let that = this
      request.get(ApiConstant.Major.miniMajorList, {
        majorName: this.majorName,
        educationalLevel:this.tabs[this.currentTab].id
      }).then(r => {
        console.log(r)
        if (r.success) {
          that.artMiniMajorList = r.result
        }
      }).catch(err => {
      }).finally(() => {
      });

    }
  }
}
</script>
<template>
  <view class="body-view">
    <!-- 使用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 class="bodyl">
      <view v-for="(m,i) in artMiniMajorList" :key="i" :style="i>0?'margin-top:50rpx':''">
          <view class="majorTypeTitle">
            <text class="name">{{ m.majorTypeName }}</text>
            <view class="majorNum"><text style="float: right">共{{ m.majorList.length }}个</text></view>
          </view>
        <scroll-view class="nav-bar" scroll-x>
          <!-- 要想使用flex布局实现横向滚动，就要在scroll-view里加一层容器block包裹，并且使用子组件才会出现滚动效果 -->
          <view class="nav-bar-wrap">
            <block v-for="(item, index) in m.majorList" :key="index">
              <view class="nav-bar-item">
                <view class="majorItem" @click="openMajorDetail(item,m.majorTypeName)">
                  <view style="display: flex;">
                    <view style="width: 90%">
                      <view style="display: flex;">
                        <text class="majorName" style="font-size: 30rpx">{{ item.majorName }}</text>
                      </view>
                      <view style="display: flex;margin-top: 30rpx">
                        <view class="semester" style="width: 50%;font-size: 25rpx">
                          <text style="color:#8999a3">学制</text>
                          <text v-if="item.semester">{{item.semester}}</text>年
                        </view>
                        <view class="schoolNum" style="width: 40%;font-size: 25rpx;">
                          <view style="float: right">
                            <text style="color:#8999a3">开设院校</text>
                            <text>{{ item.schoolNum||'0'}}</text>个
                          </view>
                        </view>
                      </view>
                    </view>
                    <view style="width: 10%">
                      <image :src="ImagesConstant.keyboard.arrowRightWhite"
                             style="position:relative;left: 10rpx;top: 30rpx;border-radius: 30rpx;background-color: #3d7dfd;width: 40rpx;height: 40rpx"/>
                    </view>
                  </view>
                </view>
              </view>
            </block>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.body-view {
  width: 100%;
  overflow: hidden;
  background-color: white;
}

/*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;

  .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;
    }
  }
}

.swiper-box-list {
  width: 95%;
  padding: 20rpx 40rpx;
  flex: 1;
  background-color: #FFFFFF;
  height: calc(100vh - 251rpx);

  .swiper-topic-list {
    width: 100%;
  }
}

/* 隐藏滚动条，但依旧具备可以滚动的功能 */
:deep(.uni-scroll-view::-webkit-scrollbar) {
  display: none
}

.bodyl {
  margin-top: 85rpx;
  padding: 30rpx;
}

page {
  background-color: white !important;
}

/*横向滚动列表 start*/
scroll-view {
  white-space: nowrap;
}

/* 去除滚动条 */
::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}

.nav-bar-wrap { //  关键的样式
  display: flex;
  flex-flow: row wrap;
  width: 2600rpx;
}

.nav-bar-item {
  width: 500rpx;
  display: flex;
  height: 170rpx;
  margin-top: 18rpx;
  margin-right: 18rpx;
  position: relative;
}

/*横向滚动列表 end*/
.majorItem {
  padding: 30rpx;
  border-radius: 10rpx;
  width: 500rpx;
  background-color: #f0f0f0;
}

.majorTypeTitle {
  display: flex;
  height: 50rpx;
  line-height: 50rpx;
}

.majorTypeTitle .name{
  font-size: 30rpx;
  font-weight: 600;
  width: 80%;
}
.majorTypeTitle .majorNum{
  color:#3d7dfd;
  width: 20%;
}
</style>
