<template>
  <div class="service" id="service-first-page">
    <div class="banner">
      <SearchBar class="search-bar" @search="onSearch"></SearchBar>
    </div>
    
    <menu>
      <router-link class="entry" :to="{name: 'RecommendedPath'}">
        <img src="@/assets/img/service/路线.png" alt="" draggable="false">
        <div>推荐路线</div>
      </router-link>
      <router-link class="entry" :to="{name: 'DontMiss'}">
        <img src="@/assets/img/service/景点.png" alt="" draggable="false">
        <div>必玩景点</div>
      </router-link>
      <router-link class="entry" to="/">
        <img src="@/assets/img/service/美食.png" alt="" draggable="false">
        <div>美食</div>
      </router-link>
      <router-link class="entry" to="/">
        <img src="@/assets/img/service/出行.png" alt="" draggable="false">
        <div>出行</div>
      </router-link>
      <router-link class="entry" :to="{name: 'HotelList'}">
        <img src="@/assets/img/service/酒店住宿.png" alt="" draggable="false">
        <div>酒店住宿</div>
      </router-link>
    </menu>

    <div class="travel-route-1">
      <router-link class="entry" to="/">一日游推荐路线</router-link>
    </div>

    <div class="travel-route-2">
      <h3>推荐路线</h3>
      <router-link class="more" :to="{name: 'RecommendedPath'}">更多  》</router-link>
      <div class="grid-wrap">
        <div class="left-wrap card">
          <img src="@/assets/img/service/一日游.png" alt="" draggable="false">
          <h4>一日游</h4>
        </div>
        <div class="right-wrap">
          <div class="card">
            <img src="@/assets/img/service/【快速浏览】.png" alt="" draggable="false">
            <h4>【快速浏览】</h4>
          </div>
          <div class="card">
            <img src="@/assets/img/service/【西洋建筑】.png" alt="" draggable="false">
            <h4>【西洋建筑】</h4>
          </div>
          <div class="card">
            <img src="@/assets/img/service/【古建筑】.png" alt="" draggable="false">
            <h4>【古建筑】</h4>
          </div>
        </div>
      </div>
    </div>

    <div class="travel-plague">
      <h3>出游防疫</h3>
      <router-link class="more" :to="{name: 'TravelPlague'}">更多  》</router-link>
      <TabbarSmall :tabList="['景点开放', '出行政策']" @change="onTravelPlageTabbarChange"></TabbarSmall>
      <div class="open-status" v-show="travelPlagueActiveIdx === 0">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="@/assets/img/service/【古建筑】.png" alt="">
              <div class="title-wrap">
                <h4>芜湖方特旅游区</h4>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="@/assets/img/service/【快速浏览】.png" alt="">
              <div class="title-wrap">
                <h4>芜湖方特旅游区</h4>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="@/assets/img/service/【西洋建筑】.png" alt="">
              <div class="title-wrap">
                <h4>芜湖方特旅游区</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="open-status" v-show="travelPlagueActiveIdx === 1">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="@/assets/img/service/【古建筑】.png" alt="">
              <div class="title-wrap">
                <h4>电话1</h4>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="@/assets/img/service/【快速浏览】.png" alt="">
              <div class="title-wrap">
                <h4>电话2</h4>
              </div>
            </div>
            <div class="swiper-slide">
              <img src="@/assets/img/service/【西洋建筑】.png" alt="">
              <div class="title-wrap">
                <h4>电话3</h4>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="help-center">
      <h3>帮助中心</h3>
      <router-link class="more" :to="{name: 'HelpCenter'}">更多  》</router-link>
      <TabbarSmall :tabList="['常见问题', '服务电话']" @change="onHelpCenterTabbarChange"></TabbarSmall>
      <ul class="questions" v-show="helpCenterActiveIdx === 0">
        <div v-for="n in 10" :key="n">
          <h4>芜湖全员核酸检测点最新安排出炉</h4>
          <span class="name">佚名用户</span>
          <span class="time">2022-10-10</span>
        </div>
      </ul>
      <ul class="phones" v-show="helpCenterActiveIdx === 1">
        <div v-for="n in 10" :key="n">
          <h4>电话电话电话</h4>
          <span class="name">佚名用户</span>
          <span class="time">2022-10-10</span>
        </div>
      </ul>
    </div>

    <BackTop class="back-top" :targetId="'service-first-page'">
      <img src="@/assets/img/service/back-top.png" alt="" draggable="false">
    </BackTop>
  </div>
</template>

<script>
import BackTop from "@/components/BackTop.vue";
import TabbarSmall from "@/components/TabbarSmall.vue";
import Swiper from "../../assets/libs/swiper.js";
import SearchBar from "@/components/SearchRedBtn.vue";

export default {
components: {
  BackTop,
  TabbarSmall,
  SearchBar,
},
data() {
  return {
    searchKeyword: '',
    travelPlagueActiveIdx: '',
    helpCenterActiveIdx: '',
  };
},
computed: {},
watch: {},
methods: {
  onSearch(v) {
    console.log('search: ', v);
  },
  onTravelPlageTabbarChange(idx) {
    this.travelPlagueActiveIdx = idx
    this.$nextTick(() => {
      new Swiper(".swiper-container", {
        slidesPerView: 1.4,
        spaceBetween: 15,
        centeredSlides: true,
      })
    })
  },
  onHelpCenterTabbarChange(idx) {
    this.helpCenterActiveIdx = idx
  }
},
created() {

},
mounted() {
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
@import "~@/assets/libs/swiper.css";
.service {
  background-color: #f0f0f0;
  height: calc(100% - 80px);
  overflow: auto;
  .banner {
    height: 31.9vw;
    background-image: url(~@/assets/img/service/banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    margin-bottom: 3.3vw;
    .search-bar {
      margin: 6.1vw 4.4vw 0 4.4vw;
    }
  }

  > menu {
    margin: 0 0.8vw 4vw 0.8vw;
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 23.5vw;
    border-radius: 1.1vw;
    > .entry {
      width: 12.1vw;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      font-size: 2.9vw;
      font-weight: bold;
      color: #535353;
      line-height: 1.1em;
      > img {
        width: 100%;
        height: auto;
        margin-bottom: 2.7vw;
      }
    }
  }

  > .travel-route-1 {
    margin: 0 0 4vw 0;
    height: 41.5vw;
    background-image: url(~@/assets/img/service/travel-route-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    position: relative;
    .entry {
      position: absolute;
      top: 1.5vw;
      right: 0.7vw;
      padding: 3.1vw 1.5vw;
      background: rgba(15, 5, 9, 0.39);
      font-size: 3.5vw;
      font-weight: bold;
      color: #FFFAFA;
    }
  }

  > .travel-route-2 {
    border-radius: 1.1vw;
    margin: 0 0.7vw 4vw 0.7vw;
    overflow: hidden;
    position: relative;
    padding: 1.9vw 3.5vw 4.5vw;
    background: #fff;
    > h3 {
      font-size: 3.5vw;
      font-weight: bold;
      color: #000000;
    }
    .more {
      position: absolute;
      top: 2.7vw;
      right: 3.6vw;
      font-size: 2.7vw;
      color: #333333;
    }
    .grid-wrap {
      margin-top: 3.1rem;
      display: flex;
      align-items: center;
      .left-wrap {
        flex: 0 1 auto;
        display: inline-block;
        position: relative;
        width: 41.9vw;
        height: 56.8vw;
        border-radius: 1.3vw;
        margin-right: 2vw;
        > img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
        > h4 {
          position: absolute;
          left: 3.9vw;
          top: 3.1vw;
          font-size: 6.4vw;
          letter-spacing: 0.3em;
          font-weight: bold;
          color: #FFFFFF;
          text-shadow: 0px 4px 4px #3A180F;
          writing-mode: vertical-rl;
        }
      }
      .right-wrap {
        display: inline-block;
        flex: 0 1 auto;
        width: 47.5vw;
        > .card {
          position: relative;
          width: 100%;
          height: 18.4vw;
          margin-bottom: 0.8vw;
          &:last-of-type {
            margin-bottom: initial;
          }
          > img {
            position: absolute;
            right: 0;
            top: 0;
            width: 100%;
            height: 100%;
          }
          > h4 {
            position: absolute;
            right: 1.1vw;
            height: 100%;
            font-size: 2.7vw;
            font-weight: 500;
            color: #FEFEFE;
            writing-mode: vertical-rl;
            text-align: center;
            letter-spacing: 0.12em;
          }
        }
      }
    }
  }

  > .travel-plague {
    border-radius: 1.1vw;
    margin: 0 0.7vw 4vw 0.7vw;
    overflow: hidden;
    position: relative;
    padding: 1.9vw 3.5vw 4.5vw;
    background: #fff;
    > h3 {
      font-size: 3.5vw;
      font-weight: bold;
      color: #000000;
    }
    .more {
      position: absolute;
      top: 2.7vw;
      right: 3.6vw;
      font-size: 2.7vw;
      color: #333333;
    }
    .open-status {
      margin-top: 6vw;
      .swiper-slide {
        width: 75.5vw;
        height: 31.2vw;
        > img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
        > .title-wrap {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 8.5vw;
          background-color: rgba(15, 5, 9, 0.54);
          display: flex;
          justify-content: center;
          align-items: center;
          > h4 {
            font-size: 3.2vw;
            font-weight: 600;
            color: #FFFFFF;
          }
        }
      }
    }
  }

  > .help-center {
    border-radius: 1.1vw;
    margin: 0 0.7vw 4vw 0.7vw;
    position: relative;
    padding: 1.9vw 3.5vw 4.5vw;
    background: #fff;
    // 滚动条整体部分，其中的属性有width,height,background,border等。
    ::-webkit-scrollbar { width: 1.3vw; height: 1.3vw; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
    // 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，改变颜色。
    ::-webkit-scrollbar-button { display: none; }
    // 滑动轨道。可以用display:none让其不显示，也可以添加背景图片，改变颜色。另外还有::webkit-scrollbar-track-piece这个是内层轨道？有吗？
    ::-webkit-scrollbar-track { background: rgba(84, 84, 84, 0.11); border-radius: 0.5vw; }
    // 滑块
    ::-webkit-scrollbar-thumb { background: linear-gradient(0deg, #FF615C 0%, #FF9877 100%); border-radius: 0.5vw; }
    // 横竖滚动条轨道交汇处
    ::-webkit-scrollbar-corner { display: none; }
    ::-webkit-scrollbar-resizer { display: none; }
    > h3 {
      font-size: 3.5vw;
      font-weight: bold;
      color: #000000;
    }
    .more {
      position: absolute;
      top: 2.7vw;
      right: 3.6vw;
      font-size: 2.7vw;
      color: #333333;
    }
    > ul {
      margin-top: 6vw;
      height: 42vw;
      overflow: auto;
      > div {
        border-bottom: 1px solid #E5E5E5;
        margin-bottom: 7.1vw;
        &:last-of-type {
          border-bottom: initial;
          margin-bottom: initial;
        }
        > h4 {
          font-size: 3.2vw;
          font-weight: bold;
          color: #000000;
          overflow: hidden;
          white-space: pre;
          text-overflow: ellipsis;
          margin-bottom: 3.9vw;
        }
        > span {
          display: inline-block;
          margin-right: 2em;
          margin-bottom: 1.5vw;
          font-size: 3.2vw;
          color: #DCDCDC;
        }
      }
    }
  }
  
  > .back-top {
    position: fixed;
    bottom: calc(1.7vw + 80px);
    right: 1.7vw;
    width: 9.3vw;
    height: 9.3vw;
    > img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>