<style>
  .line_list{
    margin-bottom: 30px;
    padding: 30px;
    background-color: #FFFFFF;
  }
  .line_list>.el-col-5{
    position: relative;
    height: 440px;
    width: 210px;
  }
  .line_list>.el-col-19{
    width: 81.16667%;
  }
  .line_list .left_top{
    display: flex;
    padding: 4px 0 4px 20px;
  }
  .line_list .font_color_wt{
    color: white;
  }
  .line_list .bg_blue{
    background-color: #409EFF;
  }
  .line_list .bg_green{
    background-color: #C2DE9A !important;
  }
  .line_list .bg_yellow{
    background-color: #F8C94F !important;
  }
  .line_list .bg_orange{
    background-color: #F8924F !important;
  }
  .line_list .bg_red{
    background-color: #FF5868 !important;
  }
  .line_list .bg_skyBlue{
    background-color: #6AD7FF !important;
  }
  .line_list .bg_grape{
    background-color: #9D9FFF !important;
  }
  .line_list .bg_blue>p{
    font-size: 22px;
  }
  .line_list .bg_blue div{
    padding-left: 3px;
    font-size: 12px;
    opacity: .5;
  }
  .line_list .left_bottom{
    position: absolute;
    height: 400px;
    width: 100%;
  }
  .line_list .left_bottom .box{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
    transition: all 1s;
    backface-visibility: hidden;
    cursor: pointer;
  }
  .line_list .left_bottom .box img{
    width: 100%;
    height: 400px;
  }
  .line_list .left_bottom .b2{
    height: 400px;
    background-color: #EE4454;
    transform: rotateY(-180deg);
    color: white;
    align-items: center;
    text-align: center;
  }
  .line_list .left_bottom .b2 p{
    margin-top: 80px;
    font-size: 12px;
    padding: 0 15px;
  }
  .line_list .left_bottom .b2 .bottom{
    margin: 20px auto;
    font-size: 12px;
    border:1px solid rgba(255,255,255,1);
    width: 98px;
    height: 28px;
    line-height: 28px;
  }
  .line_list .left_bottom:hover .b1{
    transform: rotateY(180deg);
  }
  .line_list .left_bottom:hover .b2{
    transform: rotateY(0deg);
  }
  .line_list #tab-none{
    padding-left: 30px;
  }
  .line_list .right .el-tabs__nav-scroll{
    height: 40px;
    line-height: 40px;
  }
  .line_list .right .el-tabs__active-bar{
    bottom: 3px;
  }
  .line_list .right .right_top_tabs{
    height: 40px;
    overflow: hidden;
    border-bottom: 1px solid #E9E9E9;
    padding: 0 120px 0 50px;
    position: relative;
  }
  .line_list .right .el-tabs__item:hover {
    color: #111111;
  }
  .line_list .right .el-tabs__item{
    color: #888888;
  }
  .line_list .right .el-tabs__item.is-active{
    color: #111111;
  }
  .line_list .right .el-tabs__active-bar{
    background-color: #EE4454;
  }
  .line_list .right .right_top_tabs .more{
    position: absolute;
    right: 0;
    top: 14px;
    font-size: 12px;
    color: #888888;
    cursor: pointer;
  }
  .line_list .right .right_top_tabs .more:hover{
    color: #111111;
  }
  .line_list .right .right_bottom{
    padding: 20px 0 0 20px;
  }
  .line_list .right .right_bottom .rb_left .img img{
    width: 100%;
    height: 250px;
    display: block;
  }
  .line_list .right .right_bottom .rb_left .info{
    padding: 18px 20px;
    box-shadow: 0 0px 7px #eaeaea;
    /* border-bottom: 1px solid #E9E9E9; */
  }
  .line_list .right .right_bottom .rb_left .info .tit{
    font-size: 14px;
    max-width: 395px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333333;
  }
  .line_list .right .right_bottom .rb_left .info .day{
    display: flex;
    align-items: flex-end;
    font-size: 12px;
    color: #999999;
    justify-content: space-between;
    margin-top: 10px;
  }
  .line_list .right .right_bottom .rb_left .info .day span:nth-child(1) span{
    font-size: 14px;
    color: #666666;
  }
  .line_list .right .right_bottom .rb_left .info .day span:nth-child(2){
    float: right;
    color: #409EFF;
  }
  .line_list .right .right_bottom .rb_left .info .money{
    margin-top: 17px;
  }
  .line_list .right .right_bottom .rb_left .info .money .num{
    color: #EE4454;
    font-size: 22px;
  }
  .line_list .right .right_bottom .rb_left .info .money small.num{
    font-size: 12px;
  }
  .line_list .right .right_bottom .rb_left .info .money .qi{
    color: #777777;
  }
  .line_list .right .right_bottom .rb_left .info .money .btn{
    width:56px;
    height:32px;
    background:rgba(238,68,84,1);
    border-radius:3px;
    display: block;
    float: right;
    color: white;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
  }
  .line_list .right .right_bottom .rb_left .info .money .btn.noBtn{
    background-color: #CCCCCC;
    cursor: inherit;
  }
  .line_list .right .right_bottom .rb_right .item.marginb10 {
    margin-bottom: 14px;
  }
  .line_list .right .right_bottom .rb_right .item .img img{
    width: 100%;
    height: 120px;
    display: block;
  }
  .line_list .right .right_bottom .rb_right .item .info{
    padding: 4px 9px;
    box-shadow: 0 0px 7px #eaeaea;
  }
  .line_list .right .right_bottom .rb_right .item .info .tit{
    font-size: 12px;
    max-width: 189px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333333;
  }
  .line_list .right .right_bottom .rb_right .item .info .day{
    display: flex;
    align-items: flex-end;
    font-size: 12px;
    color: #999999;
    justify-content: space-between;
    margin-top: 10px;
  }
  .line_list .right .right_bottom .rb_right .item .info .money{
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .line_list .right .right_bottom .rb_right .item .info .num{
    color: #EE4454;
    font-size: 22px;
  }
  .line_list .right .right_bottom .rb_right .item .info small.num{
    font-size: 12px;
  }
  .line_list .right .right_bottom .rb_right .item .info .qi{
    color: #777777;
  }
  .line_list .right .right_bottom .rb_right .item .info .btn{
    width: 46px;
    height: 22px;
    background:rgba(238,68,84,1);
    border-radius:3px;
    display: block;
    float: right;
    color: white;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
  }
  .line_list .right .right_bottom .rb_right .item .info .btn.noBtn{
    background-color: #CCCCCC;
    cursor: inherit;
  }
  .line_list .noImg{
    width: 100%;
    height: 250px;
    background-color: #E0E0E0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
   .line_list .noImg.small{
    width: 100%;
    height: 120px;
    background-color: #E0E0E0;
  }
  .line_list .noImg img{
    width: 50% !important;
    height: auto !important;
    margin: 0 auto;
  }
</style>
<template>
  <el-row class="line_list" v-loading="loading">
    <el-col :span="5">
      <div class="left_top bg_blue font_color_wt" :class="{bg_green: index === 1, bg_yellow: index === 2, bg_orange: index === 3, bg_red: index === 4, bg_skyBlue: index === 5, bg_grape: index === 6}">
        <p>{{dataList.name.replace('出境', '')}}</p>
        <div>
          <p>{{'Outbound'.toUpperCase()}}</p>
          <p>{{'travel'.toUpperCase()}}</p>
        </div>
      </div>
      <div class="left_bottom">
        <div class="box b1">
          <img :src='compressImg(dataList.broadsideImage, "filt", 210, "")' style="width:100%" v-if='dataList.broadsideImage'/>
          <img src="../../../assets/img/img-03.png" style="width:100%" v-else /> 
        </div>
        <div class="box b2">
          <!-- <p>这里是广告占位，讲述图片内容的详细讲解，位置有限，显示不完整的地方就用...</p> -->
          <div class="bottom">
            <router-link style="color:#ffffff;text-decoration: none;" :to="{ path: '/search',query:{'keywords':'','lineName':dataList.name,'lineId':dataList.id} }">查看详情</router-link>
            </div>
        </div>
      </div>
    </el-col>
    <el-col :span="19" class="right">
      <el-row class="right_top_tabs">
        <el-tabs v-model="activeName" @tab-click="loadModuleDataNoLoop">
          <el-tab-pane label="精选" :name="`0_${index}`"></el-tab-pane>
          <template v-for="(lineItem, it) in dataList.lineTeam" >
            <el-tab-pane :label="lineItem.name" :name="`${lineItem.id}_${index}`"></el-tab-pane>
          </template>
        </el-tabs>
        <div class="more"><router-link style="color:#888888;text-decoration: none;" :to="{ path: '/search',query:{'keywords':'','lineName':dataList.name,'lineId':dataList.id} }">更多特惠>></router-link></div>
      </el-row>
      <el-row class="right_bottom" :gutter="20">
        <template v-if="dataList.pageData && dataList.pageData.length > 0">
          <el-col :span="12">
            <div class="rb_left">
              <div class="img">
                <img v-if='dataList.pageData[0].imgCover!=null&&dataList.pageData[0].imgCover.length' onerror="../../../assets/img/bg_c2@3x.png" :src='compressImg(JSON.parse(dataList.pageData[0].imgCover)[0].Url, "filt", 245, "")' alt="">
                <img v-else src="../../../assets/img/bg_c2@3x.png" alt="">
              </div>
              <div class="info">
                <p class="tit" :title="dataList.pageData[0].title">{{dataList.pageData[0].title}}</p>
                <p class="day"><span>最近团期：<span>{{dataList.pageData[0].startDate}}</span></span><span>{{dataList.pageData[0].dayNum}}天</span></p>
                <p class="money"><small class="num">￥</small><span class="num">{{isLogin!==1 ? dataList.pageData[0].b2CPrice : dataList.pageData[0].b2BPrice}}</span><span class="qi"> 起</span> <span class="btn" @click="goUrl(dataList.pageData[0].id, dataList.pageData[0])">预订</span></p>
              </div>
            </div>
          </el-col>
          <el-col :span="12" class="rb_right">
            <el-row :gutter="20">
              <template v-for="(item, index) in dataList.pageData" v-if="index > 0">
                <el-col :span="12" class="item" :class="{'marginb10': index < 3}">
                  <div class="img">
                    <img v-if='item.imgCover!=null && item.imgCover.length' onerror="../../../assets/img/bg_c2@3x.png" :src='compressImg(JSON.parse(item.imgCover)[0].Url, "filt", 245, "")' alt="">
                    <img v-else src="../../../assets/img/bg_c2@3x.png" alt="">
                  </div>
                  <div class="info">
                    <p class="tit" :title="item.title">{{item.title}}</p>
                    <p class="money"><span><small class="num">￥</small><span class="num">{{isLogin!==1 ? item.b2CPrice : item.b2BPrice}}</span><span class="qi"> 起</span></span><span class="btn" @click="goUrl(item.id, item)">预订</span></p>
                  </div>
                </el-col>
              </template>
              <template v-if="chaList.length > 0">
                <el-col :span="12" class="item" v-for="(item, index) in chaList" :key="index" :class="{'marginb10': index < 2}">
                  <div class="img noImg small">
                    <img src="../../../assets/img/logo_t.png" alt="">
                  </div>
                  <div class="info">
                    <p class="tit">更多产品敬请期待</p>
                    <p class="money"><span><small class="num">备货中</small><span class="num"></span><span class="qi"> </span></span><span class="btn noBtn">预订</span></p>
                  </div>
                </el-col>
              </template>
            </el-row>
          </el-col>
        </template>
        <template v-else>
          <el-col :span="12">
            <div class="rb_left">
              <div class="img noImg">
                <img src="../../../assets/img/logo_t.png" alt="">
              </div>
              <div class="info">
                <p class="tit" >更多产品敬请期待</p>
                <p class="day"><span>最近团期：<span>暂无</span></span><span>无</span></p>
                <p class="money"><small class="num">备货中</small><span class="num"></span><span class="qi"></span> <span class="btn noBtn">预订</span></p>
              </div>
            </div>
          </el-col>
          <el-col :span="12" class="rb_right">
            <el-row :gutter="20">
              <template v-for="(item, index) in none">
                <el-col :span="12" class="item" :class="{'marginb10': index < 2}">
                  <div class="img noImg small">
                    <img src="../../../assets/img/logo_t.png" alt="">
                  </div>
                  <div class="info">
                    <p class="tit">更多产品敬请期待</p>
                    <p class="money"><span><small class="num">备货中</small><span class="num"></span><span class="qi"> </span></span><span class="btn noBtn">预订</span></p>
                  </div>
                </el-col>
              </template>
            </el-row>
          </el-col>
        </template>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props:['dataList', 'index', 'isLogin'],
  data () {
    return {
      activeName: '精选',
      loading: false,
      none: [1,2,3,4],
      chaList: []
    }
  },
  watch: {
    'dataList.pageData':{
      handler(val, oldval){ 
        if (val) {
          this.jiCha()
        }
      }
    }
  },
  methods: {
    
    goUrl(id, obj){
      let path = 'detailTwo'
      path=`${path}/${encodeURIComponent(id)}/${obj.tcid}`;
      this.$router.push({ path })
    },
    loadModuleDataNoLoop: function (tab) {
      this.loading = true
      this.$emit('sonMethods', tab, this.index)
    },
    reloaditem: function (val) {
      if (val === this.index) {
        this.$forceUpdate()
        this.loading = false
        this.jiCha()
      }
    },
    jiCha: function () {
      let cha = 5 - this.dataList.pageData.length
      this.chaList = [];
      for(let i = 0; i < cha; i ++) {
        this.chaList.push(i)
      }
    }
  },
  mounted(){
    console.log("dataList",this.dataList)
  },
  created () {
    this.MsgBus.$on('reloadList', this.reloaditem)
  }
}
</script>
