/*
    柯桥：一行一个，图片在上
 */
<template>
  <div class="tab_content abroad" :class="notab?'notab':''" @scroll="orderScroll" ref="viewBox">
    <div class="padding_box"  >
      <template v-for="(item,index) in list">
        <div class="cardBox" :key="index"  @click="handleUniDetail(item)" >
            <div class="cardBox_pic"><img style="width:100%;height:67.5vw" :src="item.coverUrl?item.coverUrl:defaultImg" alt=""></div>
            <div class="cardBox_title">
              <div>{{item.course_name}}</div>
              <div class="cardBox_title_red">
                <span v-if="item.showPrice > 0">¥{{item.showPrice}}</span>
                <span v-else>免费</span>
              </div>
            </div>
            <div class="cardBox_main">
              {{item.course_info}}
            </div>
            <div class="cardBox_bottom">
              <div>
                <div class="tag_box">
                  <template v-for="(tag,index2) in item.course_labels">
                    <span class="tag" v-if="tag" :key="index2">{{tag}}</span>
                  </template>
                </div>
              </div>
              <div>
                  <div class="count">
                    <van-icon name="eye-o" /> {{item.read_count}}
                  </div>
              </div>
            </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: []
    },
    notab: {
      type: Boolean,
      default: false
    }
  },
  mounted(){
    // window.onscroll = function() {
    //   //为了保证兼容性，这里取两个值，哪个有值取哪一个
    //   //scrollTop就是触发滚轮事件时滚轮的高度
    //   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    //   console.log("滚动距离" + scrollTop);
    // }
     
    // this.$refs.viewBox.addEventListener('scroll', (event) => {
    //   console.log('滚动',event)
    //     console.log(this.$refs.viewBox.scrollTop)
    //       event.returnValue = false;
    // },false)
  },
  data () {
    return {
      active: 0,
      defaultImg: require('@/assets/service/defCoure.jpg'),
    }
  },
  methods: {
    handleUniDetail (item) {
      const publicName = sessionStorage.getItem('publicName');
      this.$router.push({ name: 'ServiceAbroadDetail', query: { courseId: item.id,publicName:publicName } })
    },
    orderScroll() {
      //  console.log(this.$refs.viewBox.scrollTop)
    }
  }
}
</script>
<style lang="scss" scoped>
.tab_content {
  // height: calc(100vh - 140px - 196px);
  box-sizing: border-box;
  overflow: auto;
  &.notab {
    // height: calc(100vh - 196px);
    background-color: #F5F7FA !important;
  }
}
.tab_btn_box {
  .tab_btn {
    width: 178px;
    height: 52px;
    border-radius: 16px;
    border: none;
    background: rgba(255, 255, 255, 0.36);
    color: #666666;
    padding: 0;
    margin-right: 16px;
    &.active {
      background: #ffffff;
      color: #4092ff;
    }
  }
}
.abroad {
  padding: 18px 0;
  .padding_box {
    padding: 0 5vw;
    padding-bottom: 16px;
  }
  .cardBox {
    // width: calc(100vw - 56px);
    width: 90vw;
    // height: 92.5vw;
    height: 70vw;
    margin-bottom: 20px;
    background-color: #fff;

    .cardBox_pic {
        // height: 67.5vw;
        height: 45vw;
        width: 90vw;
        flex-shrink: 0;
        border-radius: 20px;
        overflow: hidden;

        img {
          transform: translateY(-20vw);
        }
    }
    .cardBox_title {
        height: 10vw;
        width: 100%;
        padding: 0 3vw;
        box-sizing: border-box;
        font-size: 30px;
        font-weight: bold;
        // background-color: cadetblue;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .cardBox_title_red {
          width: 15vw;
          color: red;
          text-align: right;
        }
    }
    .cardBox_main {
        width: 100%;
        padding: 0 3vw;
        box-sizing: border-box;
        font-size: 24px;
        color: #999;
    }
    .cardBox_bottom {
      height: 8vw;
      width: 100%;
      padding: 0 3vw;
      box-sizing: border-box;
      // font-size: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .tag_box {
        padding-top: 6px;
        .tag {
          display: inline-block;
          margin-bottom: 10px;
          margin-right: 10px;
          color: #EE5959;
          font-size: 20px;
          border-radius: 4px;
          border: 2px solid #EE5959;
          padding: 0px 6px;
        }
      }
      .count {
        font-size: 24px;
        color: #999;
      }
    }
  }
}
</style>