<template>
  <div
    class="tour-detail-page"
    style="margin-top:1.87733rem;">
    <Head/>
    <detail-banner
      :list = "detail.pictureList"
      :looptime="looptime"
      :width="width"
      :height="height"
      :background="background"
      :color="color"
      class="mb-50"
      @prev="prev"
      @next="next"
      @change="changeBanner"
      @click="bannerClick"/>
    <div class="detail-main-container">
      <div>
        <h1 class="tour-detail-name">{{ detail.name }}</h1>
        <div class="tour-detail-info">
          <div
            class="flex-aic">
            <span style="color: #666;font-size: 14px;">出发地</span>
            <div>
              <div style="font-size: 14px;">{{ detail.addressTo.name }}</div>
              <div style="font-size: 12px;color: #999;">({{ detail.addressTo.provinceName }} {{ detail.addressTo.cityName }} {{ detail.addressTo.address }})</div>
            </div>
          </div>
          <div
            class="flex-aic"
            style="margin: 13px 0;">
            <span style="color: #666;font-size: 14px;">目的地</span>
            <div> {{ detail.addressGo.provinceName }} {{ detail.addressGo.cityName }} {{ detail.addressGo.address }}</div>
          </div>
          <div class="flex-aic">
            <span style="color: #666;font-size: 14px;">出发日期</span>
            <div>{{ detail.time.startTime| formatDate('MM/dd') }} {{ detail.time.weekStart }} {{ detail.addressTo.departTime | formatDate('hh:mm') }} ~  {{ detail.time.endTime| formatDate('MM/dd') }} {{ detail.time.weekEnd }}</div>
          </div>
        </div>
      </div>
      <div>
        <div style="height: 10px;background: #eee;"/>
      </div>
      <div
        id="nav"
        :class="searchBarFixed == true ? 'isFixed' :''"
        class="scroll">
        <div
          style="border-bottom: 1px solid #dfdfdf;"
          class="flex-aic-jcb detail-list" >
          <ul class="select-tab flex-aic-jcb">
            <li
              :class="{active:active=='activity'}"
              class="select-tab-li-l mui-control-item"
              @click="activity()">行程亮点</li>
            <li
              :class="{ active:active=='lastest'}"
              class="select-tab-li-l mui-control-item"
              @click="lastest()">行程介绍</li>
            <li
              :class="{ active:active=='rank'}"
              class="select-tab-li-l mui-control-item"
              @click="rank()" >报名须知</li>
          </ul>
        </div>
      </div>
      <div>
        <!--详细内容-->
        <div
          id="activityIntro"
          class="scroll0" >
          <div class="base-set">
            行程亮点
          </div>
          <div
            class="bt-line"
            v-html="detail.content"/>
        </div>
        <div
          id="lastestDubbing"
          class="scroll1" >
          <div class="base-set">
            行程介绍
          </div>
          <div
            class="bt-line"
            v-html="detail.introduce"/>
        </div>
        <div
          id="rankLlistDetail"
          class="scroll3">
          <div class="base-set" >
            报名须知
          </div>
          <div
            v-html="notice[0].value"/>
        </div>
      </div>
    </div>
    <detail-footer-btn/>
    <go-top/>
  </div>
</template>

<script>
  import axios from '../../plugins/axios'
  import Head from "~/components/head";
  import DetailBanner from '~/components/detailBanner'
  import GoTop from "~/components/goTop";
  import DetailFooterBtn from "~/components/detailFooterBtn";

  export default {
    components: {
      Head,
      DetailBanner,
      GoTop,
      DetailFooterBtn
    },
    data() {
      return {
        showBanner: !0,
        looptime: 4000, // 循环时间
        touchend: false,////没有更多数据
        dataType: [],
        totalCount: "",
        dataDetail: [],
        width: 400,
        height:200,
        background: 'red',
        color: '#fff',
        fontSize: '70px',
        active: 'activity',
        searchBarFixed:false,
      };
    },
    async asyncData({ route }) {
      const { data } = await axios.get("/api/uccn/app/unauth/tour/detail/" + route.query.id);
      let user = data.data;
      let pic = [];
      data.data.bannerDTOS.map(function(item){
        pic.push(item.cover);
      });
      user.pictureList = pic;
      user.pictureNum = pic.length;
      let startAddress = data.data.tourDepartVo;
      for(var i = 0;i<startAddress.length;i++){
        if(startAddress[i].type == 0){
          user.addressTo = startAddress[i];
        }
        if(startAddress[i].type == 2){
          user.addressGo = startAddress[i];
        }
      }
      let tourTimeVo = data.data.tourDepartTimeVo
      for(var i = 0;i<tourTimeVo.length;i++){
        if(tourTimeVo[i].overdue == 0){
          user.time = tourTimeVo[i];
          break
        }else{
          user.time = tourTimeVo[i];
        }
      }
      var weekday=["周日","周一","周二","周三","周四","周五","周六"]
      user.time.weekStart = weekday[user.time.startWeek];
      user.time.weekEnd = weekday[user.time.endWeek];
      user.introduce = user.introduce.replace(/<img/g,"<img style='width:100%'");
      user.content = user.content.replace(/<img/g,"<img style='width:100%'");
      if (!user) {
        return error({ message: 'User not found', statusCode: 404 })
      }

      let noticeData = await axios.get('/api/app/cofig/app/unauth/types?types=14');
      let notice = noticeData.data.data;
      notice[0].value = notice[0].value.replace(/<ul/g,"<ul style='width:100% !important;'");
      return {detail: user, notice: notice}
    },
    created() {
      window.addEventListener('scroll', this.handleScroll);
    },
    methods: {
      // 点击下一页回调
      prev () {},
      // 点击下一页回调
      next () {},
      // 鼠标移入状态点回调
      changeBanner () {},
      bannerClick () {},
      handleScroll: function () {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        let path = $nuxt.$route.path;
        if(path == '/tourDetail'){
          var menuTop = document.querySelector('#nav').offsetTop;
          //滑动到指定位置菜单吸顶
          if (scrollTop > menuTop + 180) {
            this.searchBarFixed = true;
          }

          //滑动到指定位置相应菜单高亮
          var top1 = document.querySelector('#activityIntro').offsetTop;
          var top2 = document.querySelector('#lastestDubbing').offsetTop;
          var top3 = document.querySelector('#rankLlistDetail').offsetTop;
          if (scrollTop < top1 + 180) {
            this.active = 'activity';
            this.searchBarFixed = false;
          }
          if (scrollTop < top2+180) {
            this.active = 'activity';
          } else if (scrollTop >= top2+180 && scrollTop < top3+180) {
            this.active = 'lastest';
          } else if (scrollTop >= top3+180) {
            this.active = 'rank';
          }
        }
      },
      lastest(){//行程介绍
        this.active = "lastest";
        let top1 = document.querySelector('#lastestDubbing').offsetTop;
        if(this.searchBarFixed){
          document.body.scrollTop = document.documentElement.scrollTop = top1 + 180;
        } else {
          document.body.scrollTop = document.documentElement.scrollTop = top1+132;
        }
        this.searchBarFixed = true;
      },
      activity(){
        //行程亮点
        this.active = "activity";
        let top = document.querySelector('#nav').offsetTop;
        var top1 = document.querySelector('#activityIntro').offsetTop;
        if(this.searchBarFixed){
          document.body.scrollTop = document.documentElement.scrollTop = top1 + 180;
        } else {
          document.body.scrollTop = document.documentElement.scrollTop = top1+132;
        }
        this.searchBarFixed = true;
      },
      rank(){
        //报名须知
        this.active = "rank";
        let top1 = document.querySelector('#rankLlistDetail').offsetTop;
        if(this.searchBarFixed){
          document.body.scrollTop = document.documentElement.scrollTop = top1 + 180;
        } else {
          document.body.scrollTop = document.documentElement.scrollTop = top1+132;
        }
        this.searchBarFixed = true;
      },
    },
  };

</script>

<style lang="scss">
  @import "../../assets/styles/mixin";

  .tour-detail-page {
    font-size: px2rem(26px);
    .tour-detail-name{
      padding: 15px px2rem(20px);
      font-size: px2rem(34px);
      font-weight: bold;
      border-bottom: 1px solid #dfdfdf;
    }
    .tour-detail-info{
      padding: 13px px2rem(20px);
      font-size: 14px;
      span{
        color: #666;
        min-width: 60px;
        margin-right: 13px;
      }
    }
    .detail-main-container{
      padding-bottom: 60px;
      border-radius: 7px 7px 0 0;
      box-shadow: 0px 0px 13px #666;
      margin-top: -10px;
      z-index: 99;
      position: relative;
      background: #fff;
      .vehicle-detail-name{
        padding: 14px px2rem(20px) 0 px2rem(20px);
        font-size: px2rem(34px);
        font-weight: bold;
      }
      .vehicle-detail-config{
        padding: 0 px2rem(20px);
        border-bottom: 1px solid #dfdfdf;
        .config{
          margin-right: 30px;
          margin-bottom: 13px;
          margin-top: 13px;
        }
      }
      .vehicle-lower{
        padding: 0 px2rem(20px);
        font-size: px2rem(30px);
        margin-top: px2rem(20px);
        margin-bottom: px2rem(20px);
        span{
          color: #F25B5B;
          font-size: px2rem(36px);
          font-weight: bold;
          margin-left: px2rem(30px);
          margin-right: px2rem(4px);
        }
      }
      .member-list{
        padding: 0 px2rem(20px);
      }
      .member-list-c img{
        width: 20px;
        height: 20px;
        margin-right: px2rem(20px);
      }
      .member-list-name{
        color: #666;
        font-size:px2rem(26px);
        margin-bottom: px2rem(20px);
      }
      .market-price{
        font-size: px2rem(30px);
        margin: px2rem(34px) 0;
        padding: 0 px2rem(20px);
      }
      .detail-list{
        height: px2rem(100px);
      }
      .select-tab{
        width: 100%;
        .select-tab-li-l{
          font-size:16px;
          color: #999;
          padding: 0 px2rem(20px);
        }
        .select-tab-li-l.active{
          color: #333;
          font-weight: bold;
          height: px2rem(100px);
          line-height: px2rem(100px);
          border-bottom: 2px solid #1bbb9f;
        }
      }
      .scroll0, .scroll1, .scroll2, .scroll3{
        padding: 0 px2rem(20px);
        .base-set{
          margin: 17px 0;
          font-size: 15px;
          font-weight: bold;
        }
        .base-set-name{
          font-size: 13px;
          color: #666;
          padding: 0 10px 6px 0;
        }
      }

      .mint-navbar {
        position: sticky;
        top: 0;
        z-index: 20;

        .mint-tab-item-label {
          font-size: px2rem(30px);
        }

        .mint-tab-item {
          padding: 10px 0;

          &.is-selected {
            color: inherit;
            border: none;
            position: relative;

            &::after {
              content: " ";
              display: inline-block;
              @include wh(20%, 2px);
              background: #2395ff;
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
            }
          }
        }
      }
      .left-item{
        width: 30%;
        border-left: 1px solid #c1c1c1;
        border-right: 1px solid #c1c1c1;
        height: 34px;
        padding-left: 10px;
        line-height: 34px;
      }
      .right-item{
        width:70%;
        border-right: 1px solid #ccc;
        height: 34px;
        line-height: 34px;
        padding-left: 10px;
      }
      .modal-item{
        border-top:1px solid #ccc;
      }
      .kr-article-article .modal-item:last-child{
        border-bottom: 1px solid #ccc;
      }
    }
  }
</style>
