<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");
  /* 整个平台区域 */
  .platTabs {
    display: flex;
    flex-direction: column;
  }

  /* tabs 导航 */
  .platTabs-nav {
    display: flex;
    gap: 53px;
    margin-bottom: 12px;
  }

  .platTabs-tab {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.3s;
  }

  .platTabs-tab:hover,
  .platTabs-tab.active {
    color: #fff;
  }

  .platTabs-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #052032, #fff, #052032);
  }

  /* 内容区，防止切换时高度抖动 */
  .platTabs-content {
    min-height: 170px;
    display: flex;
  }

  /* 二维码容器：从左 → 右，自动换行 */
  .plat-qrs {
    width: 440px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    /* 可改为 flex-start */
  }

  /* 单个二维码 */
  .plat-qrs img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    display: block;
  }

  .plat-qrs{
    font-size: 12px;
  }

</style>
<template>
  <div class="relative newHor_BtmContent" v-if="dataList&&dataList.Config">
    <div class="homeContainer">
      <div v-if="dataList.Config.FootLogo2" class="row justify-center" style="margin-bottom: 30px;">
        <q-img :src="dataList.Config.FootLogo2" style="width:40px;height:auto;" />
      </div>

      <div class="row justify-between items-center no-wrap">
        <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>
            <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">service@oytour.com</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">400-616-5510</a>
            </li>
          </ul>
        </div>
        <div class="col" :class="[!$q.platform.is.desktop?'hidden':'']">
          <ul class="l-footer--list row justify-center no-wrap">
            <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>
      <div class="row q-pt-lg q-mt-lg">
        <div 
        style="width: 414px;"
        class="column items-start"
        :class="[$q.platform.is.desktop?'':'q-pt-lg']">
          <ul class="text-xs font-light newHor-right">
            <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">
              <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 class="platTabs col items-center">
          <!-- tabs -->
          <div class="platTabs-nav">
            <span v-for="tab in tabs" :key="tab.key" :class="['platTabs-tab', { active: activeTab === tab.key }]"
              @mouseenter="activeTab = tab.key">
              {{ tab.label }}
            </span>
          </div>
          <!-- content -->
          <div class="platTabs-content">
            <!-- 公众号 / 微博 -->
            <div v-show="activeTab === 'mp'" class="plat-qrs">
              <div class="column text-center">
                <img v-if="yyzlImg" :src="yyzlImg" />
                <div class="q-pt-sm tracking-2 opacity-70">公众号</div>
              </div>
              <div class="column text-center">
                <img v-if="wbImg" :src="wbImg" />
                <div class="q-pt-sm tracking-2 opacity-70">微博</div>
              </div>
            </div>
            <!-- 小红书 -->
            <div v-show="activeTab === 'xhs'" class="plat-qrs">
              <img v-for="(item, index) in xhsImgList" :key="index" :src="item" />
            </div>
            <!-- 企业微信 -->
            <div v-show="activeTab === 'qw'" class="plat-qrs">
              <img v-for="(item, index) in qwImgList" :key="index" :src="item" />
            </div>
          </div>
        </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: {},
        yyzlImg: "", //印象之旅
        xhsImgList: [], //小红书
        wbImg: "", //微博
        qwImgList: [], //企业微信
        activeTab: 'mp',
        tabs: [{
            key: 'mp',
            label: '公众号 / 微博'
          },
          {
            key: 'xhs',
            label: '小红书'
          },
          {
            key: 'qw',
            label: '企业微信'
          }
        ],
      };
    },
    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

      var baseInfo = JSON.parse(window.localStorage.getItem('baseifo'));
      if (baseInfo && baseInfo.Config && baseInfo.Config.platObj) {
        if (baseInfo.Config.platObj.yyzlImg) {
          this.yyzlImg = baseInfo.Config.platObj.yyzlImg;
        }
        if (baseInfo.Config.platObj.xhsImgList && baseInfo.Config.platObj.xhsImgList.length > 0) {
          this.xhsImgList = baseInfo.Config.platObj.xhsImgList;
        }
        if (baseInfo.Config.platObj.qwImgList && baseInfo.Config.platObj.qwImgList.length > 0) {
          this.qwImgList = baseInfo.Config.platObj.qwImgList;
        }
        if (baseInfo.Config.platObj.wbImg) {
          this.wbImg = baseInfo.Config.platObj.wbImg;
        }
      }
    },
    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>
