<template>
  <div class="container" style="background: #fff;">
    <menu-modal></menu-modal>

    <div class="main-container"  id="scroll-area">
      <banner
        :list = "bannerList"
        :looptime="looptime"
        :width="width"
        :height="height"
        :background="background"
        :color="color"
        :fontSize="fontSize"
        @prev="prev"
        @next="next"
        @change="changeBanner"
        @click="bannerClick"
        class="mb-50">
      </banner>
      <div class="flex-fdc-jcc video-container">
        <div class="tc title">3分钟了解欣新房车</div>
        <div class="flex-aic-jcb more-container">
          <div style="width: 1100px;text-align: center">
            <div class="line-title"></div>
          </div>
        </div>
        <img src="https://mgmt.dfangche.com/xxfccn/image/home/television.png" style="width: 1200px;"/>
        <!--autoplay="autoplay"-->
        <video class="video-play" width="320" height="240" preload="auto" controls  muted poster="https://mgmt.dfangche.com/xxfccn/image/home/video.jpg">
          <source src="https://mgmt.dfangche.com/xxfccn/xxfccn.mp4"  type="video/mp4">
          您的浏览器不支持 HTML5 video 标签。
        </video>
      </div>

      <div class="flex-fdc-jcc activity-container" style="padding: 30px 0;">
        <div class="tc title" style="color: #fff;">最新活动 <span style="font-size: 16px;margin: 0 5px;">●</span> 从这里启程</div>
        <div class="flex-aic-jcb more-container">
          <div style="width: 1070px;text-align: center">
            <div class="line-title"></div>
          </div>
          <nuxt-link to="/activity"><div>MORE<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></div></nuxt-link>
        </div>
        <banner-activity
          :list = "activityList"
          :looptime="looptime"
          :width="width"
          :height="height"
          :background="background"
          :color="color"
          :fontSize="fontSize"
          @prev="prev"
          @next="next"
          class="mb-50">
        </banner-activity>
      </div>
      <div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;">
        <div class="tc title">精选房车游 <span style="font-size: 16px;margin: 0 5px;">●</span> 说走就走的房车之旅</div>
        <div class="flex-aic-jcb more-container">
          <div style="width: 1029px;text-align: center">
            <div class="line-title"></div>
          </div>
        </div>
        <div class="flex-aic-jca min-win-hc">
          <div class="tour-t">
            <div>
              <div class="tour-t-s"> 01 </div>
              <div class="tour-t-s-b"> </div>
            </div>
            <div style="margin-left: 12px;">
              <div class="tour-t-s-t">主题线路</div>
              <div class="ft-12">特色旅游线路</div>
              <div class="ft-12">倡导全新旅程生活方式</div>
            </div>
          </div>
          <div class="tour-t">
            <div>
              <div class="tour-t-s"> 02 </div>
              <div class="tour-t-s-b"> </div>
            </div>
            <div style="margin-left: 12px;">
              <div class="tour-t-s-t">全程服务</div>
              <div class="ft-12">欣新领队全程陪同</div>
              <div class="ft-12">个性化服务</div>
            </div>
          </div>
          <div class="tour-t">
            <div>
              <div class="tour-t-s"> 03 </div>
              <div class="tour-t-s-b"> </div>
            </div>
            <div style="margin-left: 12px;">
              <div class="tour-t-s-t">详尽攻略</div>
              <div class="ft-12">详尽旅游攻略</div>
              <div class="ft-12">打造轻松的房车旅行</div>
            </div>
          </div>
          <div class="tour-t">
            <div>
              <div class="tour-t-s"> 04 </div>
              <div class="tour-t-s-b"> </div>
            </div>
            <div style="margin-left: 12px;">
              <div class="tour-t-s-t">贴心售后</div>
              <div class="ft-12">7X24小时在线咨询热线</div>
              <div class="ft-12">全天为您服务</div>
            </div>
          </div>
        </div>
        <div style="position: relative;margin-top: 30px;"  v-if="tourList.length>0" >
          <div style="display: flex;">
            <nuxt-link :to="/tourDetails/+ tourList[0].id" v-if="tourList.length>0">
              <div class="tour-t-l-00">
                <img :src="tourList[0].imgUrl" style="width: 518px;height: 348px;"/>
                <div class="show-detail">
                  <span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></span>
                </div>
              </div>
            </nuxt-link>
            <div style="margin-left: 9px;width: 518px;justify-content: space-between;display: flex;margin-bottom: 5px;">
              <nuxt-link :to="/tourDetails/+ tourList[1].id" v-if="tourList.length>1">
                <div class="tour-t-r-01">
                  <img :src="tourList[1].imgUrl" style="width: 255px;height: 160px;"/>
                  <div class="show-detail">
                    <span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></span>
                  </div>
                </div>
              </nuxt-link>
              <nuxt-link :to="/tourDetails/+ tourList[2].id" v-if="tourList.length>2">
                <div class="tour-t-r-02">
                  <img :src="tourList[2].imgUrl" style="width: 255px;height: 160px;"/>
                  <div class="show-detail">
                    <span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></span>
                  </div>
                </div>
              </nuxt-link>
            </div>
          </div>
          <div style="display: flex;margin-top: 5px;">
            <div style="width: 518px;justify-content: space-between; display: flex;">
              <nuxt-link :to="/tourDetails/+ tourList[3].id" v-if="tourList.length>3">
                <div class="tour-t-l-03">
                  <img :src="tourList[3].imgUrl" style="width: 255px;height: 160px;"/>
                  <div class="show-detail">
                    <span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></span>
                  </div>
                </div>
              </nuxt-link>
              <nuxt-link :to="/tourDetails/+ tourList[4].id" v-if="tourList.length>4">
                <div class="tour-t-l-04">
                  <img :src="tourList[4].imgUrl" style="width: 255px;height: 160px;"/>
                  <div class="show-detail">
                    <span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></span>
                  </div>
                </div>
              </nuxt-link>
            </div>
            <nuxt-link :to="/tourDetails/+ tourList[5].id" v-if="tourList.length>5">
              <div class="tour-b-r-05">
                <img :src="tourList[5].imgUrl" style="width: 518px;height: 348px;position: absolute; top: 170px;left: 527px;"/>
                <div class="show-detail">
                  <span class="tour-detail" style="border: 1px solid #fff;">查看详情<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></span>
                </div>
              </div>
            </nuxt-link>
          </div>
        </div>
      </div>
      <div class="flex-fdc-jcc vehicle-container vehicle-bg" style="padding: 30px 0 155px 0;background-position: bottom;">
        <div class="tc title">热门房车 <span style="font-size: 16px;margin: 0 5px;">●</span> 多款房车任你选择</div>
        <div class="flex-aic-jcb more-container">
          <div style="width: 1160px;text-align: center">
            <div class="line-title"></div>
          </div>
          <nuxt-link to="/vehicle"><div>MORE<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></div></nuxt-link>
        </div>
        <div class="min-win">
          <ul class="v-type-ul">
            <li class="v-type" :class="tabIndex== 0?'v-type-active':''" @click="changeVehicle(0)">上汽大通</li>
            <li class="v-type" :class="tabIndex== 1?'v-type-active':''" @click="changeVehicle(1)">格林卡诺C2</li>
            <li class="v-type" :class="tabIndex== 2?'v-type-active':''" @click="changeVehicle(2)">齐星依维柯</li>
            <li class="v-type" :class="tabIndex== 3?'v-type-active':''" @click="changeVehicle(3)">奔驰斯宾特</li>
          </ul>
          <div class="banner-vehicle">
            <div class="gallery-top-box">
              <div class="swiper-container gallery-top swiper-container-top" ref="mySwiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide"  v-for="item in vehicleList0" :key="item.id">
                    <img :src="item.url">
                  </div>
                </div>
                <div class="swiper-button-next swiper-button-black">
                  <img style="width: 20px;height: 20px;" src="https://mgmt.dfangche.com/xxfccn/image/home/next.png"/>
                </div>
                <div class="swiper-button-prev swiper-button-black">
                  <img  style="width: 20px;height: 20px;" src="https://mgmt.dfangche.com/xxfccn/image/home/pre.png"/>
                </div>
              </div>
              <div class="gallery-thumbs-box">
                <div class="swiper-container gallery-thumbs">
                  <div class="swiper-wrapper swiper-wrapper-thu flex-aic-jcb">
                    <div class="swiper-slide"  v-for="(item,index) in vehicleList0" :key="item.id"  @click="changeImgIndex(index)">
                      <img :src="item.url"  :class="preIndex==index?'active':''" alt="">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-fdc-jcc" style="background: #fff;padding: 30px 0;">
        <div class="tc title">新闻动态 <span style="font-size: 16px;margin: 0 5px;">●</span> 最新资讯与你分享</div>
        <div class="flex-aic-jcb more-container">
          <div style="width: 1029px;text-align: center">
            <div class="line-title"></div>
          </div>
          <nuxt-link to="/news"><div>MORE<img src="https://mgmt.dfangche.com/xxfccn/image/home/more.png"/></div></nuxt-link>
        </div>
        <div class="flex-aic-jcb-warp min-win">
          <div class="item-c flex-aic" v-for="item in newsList" :key="item.id" >
            <nuxt-link :to="'/newsList/'+item.id" class="flex-aic">
              <img :src="item.coverImage" class="item-c-img" :alt="item.title"/>
              <div class="item-c-r">
                <div class="ellipsis new-tt">{{item.title}}</div>
                <div class="desc ellipsis2">{{item.epitome}}</div>
                <div class="time">{{item.addTime.substring(0,10)}}</div>
              </div>
            </nuxt-link>
          </div>
        </div>
      </div>
      <div class="map-container" >
        <img style="width: 100%;" src="https://mgmt.dfangche.com/xxfccn/image/home/map.jpg"/>
        <div class="map-city">
          <div>{{cityNum}}+</div>
          <div class="ft-16">城市</div>
        </div>
        <div class="map-company">
          <div>{{comppanyNum}}+</div>
          <div class="ft-16">分公司</div>
        </div>
      </div>
    </div>
    <go-top></go-top>
    <footer-modal></footer-modal>
  </div>
</template>

<script>
import axios from '../plugins/axios'
import banner from "../components/banner"
import bannerActivity from "../components/bannerActivity"
import menuModal from "../components/menu"
import footerModal from "../components/footer"
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import GoTop from "../components/goTop";


export default {
  transition: 'bounce',

  components: {
    menuModal,
    footerModal,
    banner,
    bannerActivity,
    GoTop
  },
  data () {
    return {
      items: [],
      curId: 0,
      items1: {},
      curId1: 0,
      looptime: 4000, // 循环时间
      width: 400,
      height:200,
      background: 'red',
      color: '#fff',
      fontSize: '70px',
      cityNum:0,//分公司城市
      comppanyNum: 0,//分公司
      vehicleList0: [
        {id: 1, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg', name:'上汽大通',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg"},
        {id: 2, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/18.jpg', name:'上汽大通',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/18.jpg"},
        {id: 3, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/19.jpg', name:'上汽大通',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/19.jpgg"},
        {id: 4, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/20.jpg', name:'上汽大通',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/20.jpg"}
      ],
      items2: [],
      industryList: [],
      hasIndustry: !1,
      tabIndex: 0,//当前选中车型
      preIndex: 0,//当前轮播选中图
    }
  },
  mounted: function () {

  },
  created(){
    if (typeof window !== 'undefined') {
      window.addEventListener('scroll', this.handleScroll);
    }
  },
  async asyncData({ env }) {
    function formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      }
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + ''
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
        }
      }
      return fmt
    }
    function padLeftZero(str) {
      return ('00' + str).substr(str.length)
    }
    function timestamp2Date(timestamp) {
      let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
    }
    function timestamp2DateNoTime(timestamp) {
      let date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      return formatDate(date, 'yyyy-MM-dd');
    }
    try {
      // 首页活动
      const { data } = await axios.get( '/api/uccn/summitActivity/app/unauth/home?limit=3');
      let cc = data.data;
      cc.map(function(item){
        item.startTime = timestamp2DateNoTime(item.startTime);
        item.endTime = timestamp2DateNoTime(item.endTime);
      });
      //首页banner
      let tempBannerData = await axios.get('/api/app/banner/app/unauth/findBannerlist?type=0&platform=1');
      let banner = tempBannerData.data.data;
      //首页新闻
      let newsData = await axios.get('/api/uccn/article/app/unauth/homePage/1');
      let news = newsData.data.data;
      // 首页推荐旅游
      let tourData = await axios.get('/api/uccn/app/unauth/tour/shopList?page=1&limit=6');
      let tour = tourData.data.data;
      // 首页seo
      let headData = await axios.get('/api/uccn/seo/app/unauth/officialWebsite/1');
      let head = headData.data.data;
      return { activityList: cc, bannerList: banner, newsList: news, tourList: tour , headList : head}
    } catch (e) {
      console.log('interface timeout or format error =&gt; ', e)
      return {}
    }
  },
  methods: {
    handleScroll: function () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      // 设备/屏幕高度
      let scrollObj = document.getElementById("scroll-area"); // 滚动区域
      if(scrollObj){
        let scrollHeight = scrollObj.scrollHeight; // 滚动条的总高度
        let _t = this;
        //滚动条到底部的条件
        if(scrollHeight-scrollTop<1000){
//          _t.cityNum = 0;
//          _t.comppanyNum = 0;
          var t = setInterval(function(){
            _t.cityNum = _t.cityNum + 20;
            if( _t.cityNum>=500){
              _t.cityNum = 500;
              clearInterval(t);
            }
          },100);

          let c = setInterval(function(){
            _t.comppanyNum = _t.comppanyNum + 35;
            if( _t.comppanyNum>=700){
              _t.comppanyNum = 700;
              clearInterval(c);
            }
          },100);
        } else{
          _t.cityNum = 0;
          _t.comppanyNum = 0;
        }
      }
    },
    /**
     * 车型切换
     */
    changeVehicle(index){
      let t = this;
      this.tabIndex = index;
      if(index == 0){
        this.vehicleList0 =[
          {id: 1, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg', name:'上汽大通',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/17.jpg"},
          {id: 2, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/18.jpg', name:'上汽大通',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/18.jpg"},
          {id: 3, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-03/5.jpg', name:'上汽大通',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-03/5.jpg"},
          {id: 4, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-03/6.jpg', name:'上汽大通',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-03/6.jpg"}
        ];
      } else if(index == 1){
        this.vehicleList0 =[
          {id: 1, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/9.jpg', name:'格林卡诺',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/9.jpg"},
          {id: 2, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/10.jpg', name:'格林卡诺',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/10.jpg"},
          {id: 3, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/11.jpg', name:'格林卡诺',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/11.jpg"},
          {id: 4, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/12.jpg', name:'格林卡诺',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/12.jpg"}
        ];
      } else if(index == 2){
        this.vehicleList0 = [
          {id: 1, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/13.jpg', name:'齐星依维柯',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/13.jpg"},
          {id: 2, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/14.jpg', name:'齐星依维柯',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/14.jpg"},
          {id: 3, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/15.jpg', name:'齐星依维柯',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/15.jpg"},
          {id:4, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/16.jpg', name:'齐星依维柯',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/16.jpg"}
        ];
      } else if(index == 3){
        this.vehicleList0 =[
          {id: 1, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/5.jpg', name:'奔驰斯宾特',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/5.jpg"},
          {id: 2, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/6.jpg', name:'奔驰斯宾特',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/6.jpg"},
          {id: 3, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/7.jpg', name:'奔驰斯宾特',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/7.jpg"},
          {id: 4, url:'https://mgmt.dfangche.com/xxfccn/image/2019-09-02/8.jpg', name:'奔驰斯宾特',sUrl:"https://mgmt.dfangche.com/xxfccn/image/2019-09-02/8.jpg"}
        ];
      }
    },
    /**
     * 缩略图点击切换大图
     */
    changeImgIndex(index){
      this.$refs.mySwiper.swiper.slideTo(index+1, 1000, true);
    },
    // 点击下一页回调
    prev () {
    },
    // 点击下一页回调
    next () {
    },
    // 鼠标移入状态点回调
    changeBanner () {
    },
    bannerClick (e) {
      debugger
    }
  },
  mounted(){
    let t = this;
    t.changeVehicle(0);
    this.swiperTabG = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
    });
    this.swiperTabT = new Swiper('.gallery-top', {
      spaceBetween: 10,
      loop:true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      on: {
        slideChangeTransitionEnd: function () {
          t.preIndex = this.activeIndex-1;
          if(t.preIndex == 4){
            t.$refs.mySwiper.swiper.slideTo(1, 1000, true);
            t.preIndex = 0;
          } else if(t.preIndex == -1){
            t.preIndex = 3;
          }
        },
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      thumbs: {
        swiper: t.swiperTabG
      }
    });
  },
  head () {
    return {
      title: this.headList.title,
      meta: [
        { hid: 'keywords', name: 'keywords', content: this.headList.keywords },
        { hid: 'description', name: 'description', content: this.headList.description }
      ],
    }
  }
}
</script>
