<template>
  <div class="quicknav">
    <div class="box" v-if="showNavs">
      <div class="nav-item" v-if="navs.home.opened" @click="goHome">
        <img :src="navs.home.picUrl" />
      </div>
      <button
        class="nav-item"
        v-if="navs.customerService.opened"
        show-message-card="true"
        :send-message-path="currentParent"
        open-type="contact"
      >
        <img :src="navs.customerService.picUrl" />
      </button>
      <div class="nav-item" v-if="navs.tel.opened" @click="goPhone(navs.tel.number)">
        <img :src="navs.tel.picUrl" />
      </div>
      <div class="nav-item" v-if="navs.web.opened" @click="goUrl(navs.web.url)">
        <img :src="navs.web.picUrl" />
      </div>
      <navigator
        v-if="navs.mApp.opened"
        target="miniProgram"
        open-type="navigate"
        :app-id="navs.mApp.appId"
        :path="navs.mApp.page"
        version="develop"
        class="nav-item"
      >
        <img :src="navs.mApp.picUrl" />
      </navigator>
      <div
        class="nav-item"
        v-if="navs.mapNav.opened"
        @click="goLocation(navs.mapNav.location)"
      >
        <img :src="navs.mapNav.picUrl" />
      </div>
      <div
        class="nav-item"
        v-if="navs.customize.opened"
        @click="goLink(navs.customize.link_url)"
      >
        <img :src="navs.customize.picUrl" />
      </div>
    </div>
    <div class="nav-item" v-if="showArrow" @click="changeShow">
      <img :src="arrowImg" />
    </div>
  </div>
</template>

<script>
export default {
  props: ["navs"],
  data() {
    return {
      showArrow: true,
      showNavs: false,
      arrowImg: "",
      currentParent: ""
    };
  },
  created() {
    this.showArrow = this.navs.navStyle == 1;
    this.showNavs = !this.showArrow;
    this.arrowImg = this.navs.closedPicUrl;
    this.currentParent = `/${this.$parent.$mp.page.route}`;
  },
  methods: {
    changeShow(e) {
      this.showNavs = !this.showNavs;
      this.arrowImg = this.showNavs
        ? this.navs.openedPicUrl
        : this.navs.closedPicUrl;
    },
    goHome() {
      let t = getCurrentPages();
      let crtPath = "/" + t[t.length - 1].route;
      if (crtPath != "/pages/index/index") {
        uni.redirectTo({ url: "/pages/index/index" });
      }
    },
    goLink(url) {
      if (url && url.length > 0) {
        uni.redirectTo({
          url: url
        });
      }
    },
    goPhone(num) {
      uni.makePhoneCall({
        phoneNumber: num
      });
    },
    goUrl(url) {
      if (url && url.length > 0) {
        uni.redirectTo({
          url: "/pages/webbox/webbox?u=" + encodeURIComponent(url)
        });
      }
    },
    goLocation(locastring) {
      let loca = [0, 0];
      if (locastring && locastring.length > 5) {
        let temp = locastring.split(",");
        if (temp.length == 2) {
          loca = temp;
        }
      }
      uni.openLocation({
        latitude: loca[0],
        longitude: loca[1],
        scale: 28
      });
    }
  }
};
</script>

<style>
.quicknav {
  position: fixed;
  bottom: 15%;
  right: 5%;
  height: auto;
  width: 40px;
  z-index: 99999999999;
  display: flex;
  flex-direction: column;
}
.quicknav .box {
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
}
.quicknav .nav-item {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  margin-top: 12px;
  border: none;
  outline: none;
  background: transparent;
  padding: 0px;
}
.quicknav .nav-item::after {
  border: none;
  outline: none;
}
.quicknav .nav-item img {
  width: 40px;
  height: 40px;
}
</style>
