<style>
  @import "../../assets/css/groupTour/index.css";
  .GroupTour .el-tabs__nav-wrap::after{
        background-color: transparent;
  }
  .typeLi{
    float: left;
    width: 200px; 
  }
</style>
<template>
  <el-row class="GroupTour">
    <!-- 顶部图片 -->
    <el-row class="GroupTour_top_bg" v-loading="lineLoad">
      <div class="bg" >
        <ul class="typeLi">
          <li class="alltype">所有分类</li>
           <li v-if="index<7" v-for="(item,index) in lineList" :key="index+100">
            <span class="right_border"></span>
            <p class="typeTile">{{item.lineShortName}}</p>
            <p class="typeAdress">
              <span v-if="item.sbuItem.lineTeamList.length>0">{{item.sbuItem.lineTeamList[0].ltName}}</span>
            </p>
            <div class="jumpHover">
              <!-- :src='compressImg(item.backgroundImage, "filt", 245, "")' -->
              <img v-if="item.backgroundImage" class="hoverImg" :src='compressImg(item.backgroundImage, "filt", 500, "")' alt="">
              <div style="z-index:1;position:relative">
                  <p class="jumpTitle"><span class="jumpTitleSpan">{{item.lineShortName}}</span></p>
                  <ul class="hoverUl" style="font-size:12px">
                    <li v-if="item.sbuItem.placeNames.length>0" style="margin-top:15px;">
                      <p style="color:#111111;font-family:'PingFangR'">热门目的地</p>
                      <div style="margin-top:6px"> 
                          <span @click="GostartCity(place)" v-for="(place,index) in item.sbuItem.placeNames" :key="index">
                            <span>{{place}}</span>
                            <span v-if="index!=item.sbuItem.placeNames.length-1" style="padding:0 6px">|</span>
                          </span>
                          
                      </div>
                      
                    </li>
                    <li v-if="item.sbuItem.hotTicketcouponsNames.length>0" style="margin-top:15px;">
                      <p style="color:#111111;font-family:'PingFangR'">热门景点</p>
                      <div style="margin-top:6px">
                        <span @click="TagGourl('LocalTourList',hot,2)" v-for="(hot,index) in item.sbuItem.hotTicketcouponsNames" :key="index+200">
                          <span>{{hot}}</span> 
                          <span style="padding:0 6px" v-if="index!=item.sbuItem.hotTicketcouponsNames.length-1">|</span>
                        </span>
                      </div>
                    </li>
                    <li v-if="item.sbuItem.lineTeamList.length>0" style="margin-top:15px;">
                      <p style="color:#111111;font-family:'PingFangR'">系列</p>
                      <div style="margin-top:6px">
                        <span @click="GoLine(item,line)" v-for="(line,index) in item.sbuItem.lineTeamList" :key="index+300">
                          <span>{{line.ltName}}</span> 
                          <span style="padding:0 6px" v-if="index!=item.sbuItem.lineTeamList.length-1">|</span>
                        </span>
                      </div>
                    </li>
                  </ul>
              </div>
              
            </div>
          </li>
        </ul>
      </div>
      <el-carousel style="width:100%;position:absolute;left:0;top:0" arrow="always" height="522px" :interval="10000" trigger="click">
                <el-carousel-item>
                  <router-link :to="{ path: '/search',query:{'keywords':'','lineName':'出境日本线','lineId':'14'}}">
                      <img src='../../assets/img/groupTour/01.jpg'>
                  </router-link>
                </el-carousel-item>
                <el-carousel-item>
                     <router-link :to="{ path: '/search',query:{'keywords':''}}">
                      <img src='../../assets/img/groupTour/02.jpg'>
                  </router-link>
                </el-carousel-item>
                <el-carousel-item>
                    <router-link :to="{ path: '/search',query:{'keywords':'','lineName':'出境韩国线','lineId':'5'}}">
                      <img src='../../assets/img/groupTour/03.jpg'>
                  </router-link>
                </el-carousel-item>
                <el-carousel-item>
                    <router-link :to="{ path: '/search',query:{'keywords':'','lineName':'出境东南亚线','lineId':'1'}}">
                      <img src='../../assets/img/groupTour/04.jpg'>
                  </router-link>
                </el-carousel-item>
                <el-carousel-item>
                    <router-link :to="{ path: '/search',query:{'keywords':'','lineName':'出境中南半岛线','lineId':'9'}}">
                      <img src='../../assets/img/groupTour/05.jpg'>
                  </router-link>
                </el-carousel-item>
        </el-carousel>
    </el-row>
    <el-row class="_list" v-loading="loading">
      <!-- 跳水特价 -->
      <div style="background:#ffffff">
        <Vdiving :data="tiaoshui" :isLogin="isLogin" class="w1180"/>
      </div>
      <!-- 线路列表 -->
      <div style="background:#F8F8F8">
        <p class="tit w1180" style="margin:20px auto;text-align:center;font-size:24px;color:#666666">出境跟团游</p>
        <template v-for="(item, index) in recoItems.line" v-if="recoItems.line && recoItems.line.length > 0 && index < 3 && (item.lineTeam && item.lineTeam.length > 0)">
          <Vlist :dataList="item" :index="index" :isLogin="isLogin" @sonMethods="loadModuleDataNoLoop" class="w1180"/>
        </template>
      </div>
      
      <!-- 热门 -->
      <div style="margin:20px 0">
        <Vhot :data="tehuis"/>
        
      </div>
      <!-- 线路列表 -->
      <template v-for="(item, index) in recoItems.line" v-if="recoItems.line && recoItems.line.length > 0 && index > 2 && (item.lineTeam && item.lineTeam.length > 0)">
        <Vlist :dataList="item" :index="index" :isLogin="isLogin" @sonMethods="loadModuleDataNoLoop" class="w1180"/>
      </template>
    </el-row>
  </el-row>
</template>

<script>
import diving from './block/diving'
import list from './block/list'
import hot from './block/hot'
import moment from 'moment'
export default {
  components: {
    Vlist: list,
    Vdiving: diving,
    Vhot: hot,
  },
  data () {
    return {
      VlistData: [],
      VhotData: [],
      site: 0,
      companyId: -1,
      recoItems: [],
      tehuis: [],
      tiaoshui: [],
      recoItemList: {
        line: []
      },
      imgs: [],
      isLogin: 1,
      loadingIndex: -1,
      loading: true,
      lineList:[],
      lineLoad:false,
      cityId:262,
      companyId:0,
    }
  },
  props:['changeCity'],
  watch:{
      changeCity: {
            handler: function(val, oldVal) {
                if(val){
                  this.cityId=localStorage.cityId;
                  this.companyId=parseInt(localStorage.site);
                  this.LineTeam();
                    this.loadTiaoshui()
                    this.loadRecoItems()
                }
            },
            deep: true
        }, 
  },
  created(){
    this.cityId=localStorage.cityId;
    this.companyId=parseInt(localStorage.site);
  },
  methods: {
    // 系列
    GostartCity(place){
      this.$router.push({ path:'/search',
         query:{tab:2,keywords:place} })
    },
    // 系列
    GoLine(item,line){
      this.$router.push({ path:'/search',
         query:{keywords:"",lineId:item.lineId,lineName:item.lineName,lineteamId:line.lineteamId,lineteamName:line.ltName} })
    },
    // 景点
    TagGourl(path,item,num){
      this.$router.push({ path:'/LocalTourList',
         query:{tab:2,searchKey:item} })
          
      },
    LineTeam(){
      let msg={companyId:this.companyId,cityId:this.cityId}; 
      this.lineLoad=true;
        this.apiJavaPost('/api/b2b/group/getHomeLineSort',msg,res=>{  
        this.lineLoad=false;
            if(res.data.resultCode==1){
                this.lineList=res.data.data;

            }else{
                this.Error(res.data.message);
            }
            },null)
    },
    loadModuleData(sno){
      if(sno < this.recoItems.line.length){
        let msg={
          pageIndex: 1,
          pageSize: 5,
          companyId: this.companyId,
          lineId: this.recoItems.line[sno].id,
          lineTeamId: 0
        }
        this.apipost('b2b_get_GetB2BHomeLineTravelPageList',msg,r=>{
          this.recoItems.line[sno] = Object.assign({}, this.recoItems.line[sno], {pageData: r.data.data.pageData})
          // console.log(this.recoItems.line[sno].pageData)
          this.loadModuleData(sno+1)
        },null)
      } else {
        // this.recoItemList = this.recoItems
        this.loading = false
        this.$forceUpdate()
      }
    },
    loadModuleDataNoLoop(tab, index){
      let sno = tab.name.split('_')[1], ltId = tab.name.split('_')[0]
      console.log(tab)
      this.loadingIndex=sno
      let msg={
        pageIndex: 1,
        pageSize: 5,
        companyId: this.companyId,
        cityId:this.cityId,
        lineId: this.recoItems.line[sno].id,
        lineTeamId: ltId
      }
      this.apipost('b2b_get_GetB2BHomeLineTravelPageList',msg,r=>{
        this.recoItems.line[sno].pageData=r.data.data.pageData
        this.loadingIndex=-1
        this.MsgBus.$emit('reloadList', index)
      },null)
    },
    loadRecoItems(){
      if (this.companyId!=-1) {
        this.apipost('b2b_get_GetHomeSearchItem',{'companyId': this.companyId,cityId:this.cityId, lineDirection: 2,}, r=> {
          r.data.data.line.forEach( x => {
              x.chosenLineTeam = '0'
          })
          this.recoItems = r.data.data
          this.activeName = r.data.data.recommend[0].id.toString()
          this.loadModuleData(0)
        },null)
      }
    },
    loadTiaoshui(){
        let msg = {
          pageIndex: 1,
          pageSize: 12,
          groupRecommendType: 1,
          companyId:this.companyId,
          cityId:this.cityId
        }
      this.apiJavaPost('/api/b2b/group/getHomeRecommendPrice',msg,res=>{  
            if(res.data.resultCode==1){
                this.tiaoshui=res.data.data.pageData;

            }else{
                this.Error(res.data.message);
            }
            },null)
      // if (this.companyId!=-1 ){
      //   let msg = {
      //     pageIndex: 1,
      //     pageSize: 12,
      //     companyId: this.companyId,
      //     recommendType: 2,
      //   }
      //   this.apipost('b2b_get_GetB2BHomeRecommendPageList', msg, r=>{
      //     this.tiaoshui = r.data.data.pageData
      //     this.tiaoshui.forEach(x=> {
      //       x.dataStr = moment(x.startDate).format('M-D')
      //     })
      //   }, null)
      // }
    },
    loadTehuis(){
      if(this.companyId!=-1){
        let msg={
          pageIndex: 1,
          pageSize: 1,
          companyId: this.companyId,
          cityId:this.cityId,
          recommendType: 1,
        }
        this.apipost('b2b_get_GetB2BHomeRecommendPageList',msg,r=>{
          this.tehuis = r.data.data.pageData
          this.tehuis.forEach(x=>{
            x.dataStr=moment(x.startDate).format('M-D')
          })
        },null)
      }
    },
  },
  mounted () {
    this.LineTeam();
    this.companyId=localStorage.site
    this.loadRecoItems();
    this.loadTehuis();
    this.loadTiaoshui();
  }
}
</script>
