<style lang="scss" scoped>
.newHor_BtmContent {
  width: 100%;
  background: $primary;
  padding-top: 60px;
}
.newLogoText span:last-child{
  font-size: 1.1rem;
  top: -4px;
}
.tracking-0{
  transition: all .3s;
}
.tracking-0:hover{
  /* opacity: .5; */
}
.tracking-1{
  color: #fff;
}
.tracking-1 a{
  color: inherit;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  transition: opacity .3s;
}
.tracking-1 a:hover{
  /* opacity: .5; */
}
.tracking-1 span::after {
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    right: -3px;
    top: calc(50% - 0.5px);
    transform: rotate(-50deg) translateY(-50%);
    background-color: #fff;
    width: 6px;
}
.l-footer--list a,.newHorw a{
  text-decoration: none;
}
.l-footer--list li::after{
  background: linear-gradient(to bottom, $primary, #fff, $primary);
  content: "";
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
}
.l-footer--list li a p:first-child{
  font-size: 1rem;
  transition: all .3s;
}
.l-footer--list li a:hover p:first-child{
  opacity: .5;
}
.l-footer--list li{
  padding: 0 20px;
}
.l-footer--list li:last-child::after{
  width: 0;
}
.newHorText{
  padding: 60px 0;
}
.newHorText a{
  text-decoration: none;
  color: #fff;
  position: relative;
  padding: 0 20px;
}
.newHorText a span{
  transition: all .3s;
}
.newHorText a:hover span{
  opacity: .5;
}
.newHorText a::after{
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  right: -3px;
  top: calc(50% - 0.5px);
  transform: rotate(-50deg) translateY(-50%);
  background-color: #fff;
  width: 6px;
}
.newHorText a:last-child::after{
  width: 0;
}
.newHorw{
  opacity: .5;
  padding: 12px 0;
}
.newHorw,.newHorw a{
  color: #fff;
}
.newHor-right span{
  position: relative;
}
.newHor-right span::after{
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  right: -3px;
  top: calc(50% - 0.5px);
  transform: rotate(-50deg) translateY(-50%);
  background: #fff;
  width: 6px;
}
</style>
<style scoped>
  @import url("../../assets/css/home.css");
  @import url("../../assets/css/app.css");
</style>
<template>
  <div class="relative newHor_BtmContent" v-if="dataList&&dataList.Config">
    <div class="homeContainer">
      <div class="row justify-center " style="margin-bottom: 30px;">
        <q-img :src="dataList.Config.Logo" style="width:40px;height:auto;"/>
      </div>

      <div class="row justify-between items-end">
        <div class="column">
          <div class="row newLogoText q-pb-lg">
            <span class="text-logo">和平旅行社</span>
            <span class="font-serifEn q-ml-lg relative">PEACE TOURS</span>
          </div>
          <p class="cursor-pointer tracking-0"><span>四川省成都市锦江区青和里南段55号1栋23楼2310、2311、2312号</span></p>
          <ul class="tracking-1">
            <li class="flex q-py-xs">
              <span class="inline-block icon-slash icon-slash-white relative q-pr-md">服务热线</span>
              <a href="" class="transition-base q-pl-md">{{ dataList.Config.Tel }}</a>
            </li>
            <li class="flex q-py-xs">
              <span class="inline-block icon-slash icon-slash-white relative q-pr-md"> 服务时间</span>
              <a href="" class="transition-base q-pl-md">08:00 至 21:00</a>
            </li>
          </ul>
        </div>
        <div :class="[windowWidth<1300?'hidden':'']">
          <ul class="l-footer--list row">
            <li class="l-footer--list__item relative cursor-pointer" v-for="(item,index) in plugData.MenuList">
              <a @click="OpenNewUrl(item.LinkUrl)"
              class="flex justify-center group">
              <p class="font-serif writing-modes-vertical leading-28 tracking-5 text-white
               transition-base pointer-events-none">{{item.MenuName}}</p>
              <p class="font-serifEn writing-modes-vertical text-s
              tracking-normal text-stone pointer-events-none">{{item.MenuSubName}}</p>
              </a>
            </li>
          </ul>
        </div>

        <div :class="[$q.platform.is.desktop?'':'q-pt-lg']">
          <ul class="text-xs font-light newHor-right">
            <!-- <li class="flex -mx-4 my-2 tracking-1 sm:justify-end">
              <span class="inline-block px-4 icon-slash icon-slash-white opacity-70">follow us</span>
              <div class="px-5 -mx-1">
                <a href="https://www.facebook.com/GoodayTravel" target="_blank"
                class="px-1 opacity-70 md:hover:opacity-100 transition-base">
                  <i class="icon-facebook h5 pointer-events-none"></i>
                </a>
                <a href="https://line.me/R/ti/p/%40497wwbbn" target="_blank"
                  class="px-1 opacity-70 md:hover:opacity-100 transition-base">
                  <i class="icon-line h5 pointer-events-none"></i>
                </a>
                <a href="https://www.youtube.com/channel/UCpDO62H5e0dY-PcQc2aTfcQ/featured"
                target="_blank" class="px-1 opacity-70 md:hover:opacity-100 transition-base">
                  <i class="icon-youtube h5 pointer-events-none"></i>
                </a>
             </div>
            </li> -->
            <li class="flex -mx-4 my-2 tracking-2 sm:justify-end opacity-70">
              <span class="inline-block px-4 icon-slash icon-slash-white">代表人</span>
              <p class="px-4">{{dataList.Config.Behalf}}</p>
              <span class="inline-block px-4 icon-slash icon-slash-white">联络人</span>
              <p class="px-4">{{dataList.Config.Behalf}}</p>
            </li>
            <li class="flex -mx-4 my-2 tracking-2 sm:justify-end opacity-70">
              <p class="px-4">{{dataList.Config.Name}}</p>
            </li>
            <!-- <li class="flex -mx-4 my-2 tracking-2 sm:justify-end opacity-70">
              <span class="inline-block px-4 icon-slash icon-slash-white">代理旅行社</span>
              <p class="px-4">{{dataList.Config.TypeStr}}</p>
            </li> -->
            <li class="flex -mx-4 my-2 tracking-2 sm:justify-end opacity-70">
              <p class="px-4">四川省成都市锦江区青和里南段</p>
            </li>
            <li class="flex -mx-4 my-2 tracking-2 sm:justify-end opacity-70">
              <p class="px-4">55号1栋23楼2310、2311、2312号</p>
            </li>
          </ul>
        </div>
      </div>

      <div class="row newHorText justify-center"
      :class="[$q.platform.is.desktop?'':'hidden']">
        <a @click="OpenNewUrl(item.LinkUrl)" v-for="(item,index) in plugData.BottomList"
        target="_self" class="text-xs font-serif icon-slash icon-slash-white transition-base cursor-pointer">
          <span>{{item.LinkTitle}}</span>
        </a>
      </div>

    </div>

    <div class="container newHorw">
      <div class="flex items-center justify-center font-light text-xs">
        <div class="hidden icon-slash icon-slash-white">
          <a href=""></a>
        </div>
        <div :class="[$q.platform.is.desktop?'text-center':'text-left q-px-md']">
          <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"
          style="text-decoration: none;">蜀ICP备13000760号 ©</a> 2010-{{year}} {{ dataList.Config.Name }}. All Rights Reserved. 旅行社业务经营许可证 {{ dataList.Config.UnifyCode }}
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  export default {
    props: ["dataList"],
    data() {
      return {
        year: '',
        windowWidth: window.innerWidth,
        HomeData: [],
        plugData: {}
      };
    },
    destroyed() {
      window.removeEventListener('resize', this.handleResize);
    },
    created() {
      window.addEventListener('resize', this.handleResize);
    },
    mounted() {
      //获取当前年
      var myDate = new Date();
      this.year = myDate.getFullYear();
      var jObj = JSON.parse(window.localStorage.getItem('HomeData'));
      this.HomeData = jObj.filter(x=>{ return x.Id == 'index_nav' })
      if(this.HomeData.length>0) this.plugData = this.HomeData[0].plugData
    },
    computed: {
      handleResize() {
        this.windowWidth = window.innerWidth;
      },
      getAdLeftList() {
        var tempArray = [];
        var showId = this.getShowId();
        if (this.dataList && this.dataList.AdLeftList) {
          this.dataList.AdLeftList.forEach(item => {
            if (item.ShowPage.indexOf(showId) > -1) {
              tempArray.push(item);
            }
          });
        }
        return tempArray;
      },
      getAdRightList() {
        var tempArray = [];
        var showId = this.getShowId();
        if (this.dataList && this.dataList.AdRightList) {
          this.dataList.AdRightList.forEach(item => {
            if (item.ShowPage.indexOf(showId) > -1) {
              tempArray.push(item);
            }
          });
        }
        return tempArray;
      }
    },
    methods: {
      navigateTo(urlInfo) {
        if(urlInfo.IsNewOpen === 1) {
          window.open(urlInfo.NavUrl)
        } else {
          window.location.href = urlINfo.NavUrl
        }
      },
      getShowId() {
        let locationName = this.GetDomain();
        var routeStr = this.$route.path.toLowerCase();
        var showId = 0;
        switch (routeStr) {
          case "/index":
            showId = 1;
            break;
          case '/search':
            showId = 2;
            break;
          case '/trip':
            showId = 3;
            break;
          case '/self':
            showId = 4;
            break;
        }
        return showId;
      }
    },
  };

</script>
