<script setup>
import FooterContent from './FooterContent.vue'
import weptoolbarlogo from "@/assets/MobileToolbar/weptoolbarlogo.png";
import closeweptoolbar from "@/assets/MobileToolbar/closeweptoolbar.png";
</script>

<template>
  <div id="mobilebarroot">
    <div id="barcontent">
      <div id="weptoplogo" class="image-wrapper_2 flex-row justify-between">
        <a href="/">
          <img
              id="image_1"
              referrerpolicy="no-referrer"
              :src="weptoolbarlogo"
          />
        </a>
        <span style="width: 100%;"></span>
        <a href="javascript:;" @click="hide_toolbar">
          <img
              id="thumbnail_1"
              referrerpolicy="no-referrer"
              :src="closeweptoolbar"
          />
        </a>
      </div>
      <div id="barlist">
        <a href="/Examples"
           style="text-decoration: none; color: inherit;">
          <div class="baritem">行业案例</div>
        </a>
        <a href="/ServiceProcess"
           style="text-decoration: none; color: inherit;">
          <div class="baritem">服务流程</div>
        </a>
        <a href="/Aboutus"
           style="text-decoration: none; color: inherit;">
          <div class="baritem">关于我们</div>
        </a>
        <a href="/ContactUs"
           style="text-decoration: none; color: inherit;">
          <div class="baritem">联系我们</div>
        </a>
      </div>
    </div>
    <div id="barbottom">
      <FooterContent></FooterContent>
    </div>
  </div>
</template>

<script>
export default {
  name: "MobileToolbar",
  mounted() {
    this.$nextTick(function() {
      this.contain_toolbartop();
    });
  },
  methods: {
    hide_toolbar:function (){
      document.getElementById('mobilebarroot').style.visibility="collapse";
      const videos = document.getElementsByClassName('bannervideos');
      for (let i = 0; i < videos.length; i++) {
        videos[i].style.display = ''; // 或者 'block'，取决于视频元素之前的 display 状态
        videos[i].style.left=0+'px';
        videos[i].play();
      }
    }
  },
  contain_toolbartop:function (){
    window.onscroll = function(){
      if(window.scrollY==0){
        document.getElementById("weptoplogo")
            .style.backgroundColor='rgba(0, 0, 0, 0)';
      }
      else{
        document.getElementById("weptoplogo")
            .style.backgroundColor="black";
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import "node_modules/bootstrap/scss/_functions.scss";
@import "node_modules/bootstrap/scss/_variables.scss";
@import "node_modules/bootstrap/scss/_mixins.scss";

#mobilebarroot{
  position: fixed;
  z-index: 100;
  transform: translateZ(3px); // 添加这行
  -webkit-transform: translateZ(3px); // 添加这行
  will-change: transform; // 添加这行
  @include media-breakpoint-between(xs, md) {
    background-color: black;
    display: flex;
    //position: -webkit-fixed;
    width: 100%;
    flex-direction: column;
    height: 100vh;
    visibility: collapse;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    top: 0;
    left: 0;
    overflow: auto; /* 关键点 */
  }
  @include media-breakpoint-up(md) {
    visibility: collapse!important;
    height:0!important;
  }
}

#barcontent{
  visibility: inherit;
  @include media-breakpoint-between(xs, md) {
    display: flex;
    flex-direction: column;
    position: relative;
    flex:1;
    width: 100%;
    //min-height: 100%;
  }
  @include media-breakpoint-up(md) {
    //visibility: collapse!important;
  }
}

#barbottom{
  display: flex;
  visibility: inherit;
  @include media-breakpoint-between(xs, md) {
    width: 100%;
    justify-content: left;
    padding-left: 32px;
    margin-top: 72px;
    //padding-bottom: 72px;
  }
  @include media-breakpoint-up(md) {
    //visibility: collapse!important;
  }
}

.image-wrapper_2 {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding-left: 32px;
  padding-top: 24px;
  padding-right: 32px;
  position: fixed;
  top:0px;
  z-index: 20;
}

#image_1 {
  width: 88px;
  height: 16px;
  margin: 3px 0 1px 0;
}

#thumbnail_1 {
  width: 20px;
  height: 20px;
  float: right;
}

#barlist{
  margin-top: 87px;
  width: 100%;
}

.baritem{
  display: flex;
  width: 100%;
  padding-left: 32px;
  padding-right: 32px;
  height:72px;
  color: rgba(255, 255, 255, 1);
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  align-items: center;
}

.baritem:hover{
  background-color: white;
  color: black;
}
</style>
