/*
    柯桥：一行一个，图片在上
 */
<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>
      <van-empty v-if="list.length==0" description="暂无活动" />
      <about-des></about-des>
    </div>
  </div>
</template>
<script>
import AboutDes from './aboutDes.vue'
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) {
      this.$router.push({ name: 'ServiceAbroadDetail', query: { courseId: item.id } })
    },
    orderScroll () {
      //  console.log(this.$refs.viewBox.scrollTop)
    }
  },
  components:{
    AboutDes
  }
}
</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-bottom: 146px;
  .padding_box {
    padding: 0 5vw;
    // padding-bottom: 126px;
  }
  .cardBox {
    // width: calc(100vw - 56px);
    width: 90vw;
    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 {
      min-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: 20vw;
        color: red;
        text-align: right;
      }
    }
    .cardBox_main {
      width: 100%;
      padding: 0 3vw;
      box-sizing: border-box;
      font-size: 24px;
      color: #999;
    }
    .cardBox_bottom {
      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>
<style lang="scss">
// 长辈版
.elder {
  .abroad {
    .cardBox {
      .cardBox_title {
        font-size: 44px;
      }
      .cardBox_main {
        font-size: 44px;
      }
      .cardBox_bottom {
        .tag_box {
          .tag {
            font-size: 40px;
          }
        }
        .count {
          font-size: 44px;
        }
      }
    }
  }
}
</style>