<template>
  <!--<van-pull-refresh v-model="isLoading" @refresh="onRefresh">-->
  <div id="app">
    <transition :name="transitionName"
                mode="out-in">
      <router-view v-if="isRouterAlive" />
    </transition>
    <TabBar :active="active"
            v-if="tabShow"></TabBar>

    <div id="click-to-top"
         v-if="topIsShow">
      <van-icon name="arrow-up"
                size=".3rem"
                @click="scrollTop" />
    </div>
  </div>
  <!--</van-pull-refresh>-->
</template>

<script>
  import TabBar from "@/components/TabBar";
  // import { UEShare } from "@/assets/js/weixinShare.js";
  import { setInterval, clearInterval } from "timers";
  import { reqGetWeixinSign } from './api/activityCenter/activityCenter'
  export default {
    name: "app",
    components: { TabBar },
    provide() {
      return {
        reload: this.reload
      }
    },
    data() {
      return {
        isRouterAlive: true,
        isLoading: false,
        active: "", //tab页面
        transitionName: "lj",
        topIsShow: false // 点击回到顶部是否显示
      };
    },
    methods: {
      reload() {
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true
        })
      },

      onRefresh() {
        setTimeout(() => {
          this.$toast("刷新成功");
          this.isLoading = false;
        }, 500);
      },
      scrollPage() {
        let sTop = document.scrollingElement.scrollTop;
        if (sTop > 100) {
          // 显示top
          this.topIsShow = true;
        } else {
          this.topIsShow = false;
        }
      }
    },
    created() {
      // 设置滚动事件 出现点击滚动到顶部
      document.addEventListener("scroll", this.scrollPage, false);

      console.log("当前处于" + process.env.VUE_APP_Name);

      // 分享
      /*       var index = 0;
            var timeId = setInterval(() => {
              index++;
              if (typeof UEShare == "function" || index > 10) {
                console.count("分享方法");
                window["UEShare"] = UEShare;
                clearInterval(timeId);
              }
            }, 2000); */
    },
    async mounted() {
      const { data: response } = await reqGetWeixinSign()
      console.log("response: ", response)
      // if (response.success !== 1) return this.$toast('服务器异常,请稍后重试!')
      wx.config({
        debug: false, // 是否开启调试模式
        appId: response.result.appId, //appid
        timestamp: response.result.timestamp, // 时间戳
        nonceStr: response.result.nonceStr, // 随机字符串
        signature: response.result.signature, // 签名
        jsApiList: [
          "hideOptionMenu",
          "onMenuShareTimeline",
          "onMenuShareAppMessage",
          "onMenuShareQQ",
          "onMenuShareWeibo",
          "onMenuShareQZone",
          "openLocation",
          "chooseWXPay"
        ],
        openTagList: [
          'wx-open-launch-weapp',  //跳转小程序
          'wx-open-launch-app'      //跳转app
        ]
      });
      wx.ready(function () {
        console.log("JS-SDK配置成功")
      });
      wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
        console.log("配置错误: ", res)
      });



/* ue.360lj.com 获取微信签名信息配置 */
   
      /* const { data: response } = await this.$http.GetSing()   
      wx.config({
        debug: false, // 是否开启调试模式
        appId: response.ResultObject.appId, //appid
        timestamp: response.ResultObject.timestamp, // 时间戳
        nonceStr: response.ResultObject.nonceStr, // 随机字符串
        signature: response.ResultObject.signature, // 签名
        jsApiList: [
          "hideOptionMenu",
          "onMenuShareTimeline",
          "onMenuShareAppMessage",
          "onMenuShareQQ",
          "onMenuShareWeibo",
          "onMenuShareQZone",
          "openLocation",
          "chooseWXPay"
        ],
        openTagList: [
          'wx-open-launch-weapp',  //跳转小程序
          'wx-open-launch-app'      //跳转app
        ]
      });
      wx.ready(function () {
        console.log("JS-SDK配置成功")
      });
      wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
        console.log("配置错误: ", res)
      }); */
    },
    watch: {
      $route(to, from) {
        // window.scrollTo(0, 0); // 顶部

        if (to.meta.title) {
          this.active = to.name;
          document.title = to.meta.title;
        }

        // 分享
        // if (to.name != "friendHelp") window["UEShare"] && window["UEShare"]();
      }
    },
    computed: {
      // 导航显示
      tabShow() {
        let active = this.active;
        return (
          active == "specialist" ||
          active == "test" ||
          active == "healthyVideo" ||
          active == "PatientUser"
        );
      }
    }
  };
</script>

<style lang='less'>
  // 样式初始化
  textarea {
    resize: none;
    border: 1px solid rgba(71, 139, 251);
    border-radius: 5px;
  }

  // animated动画全局时长

  .animated {
    animation-duration: 0.5s !important;
  }

  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    font-size: 0.22rem;
    height: 100%;
    background-color: #fff;
    min-height: 100vh;
    text-align: center;
    width: 7.5rem;

    // 点击跳转到顶部
    #click-to-top {
      position: fixed;
      right: 0.2rem;
      bottom: 2rem;
      padding: 0.1rem;
      opacity: 1;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0px 1px 0.1rem 0 #bababa;
      z-index: 1000;
      background-color: #fff;
    }
  }
  input,
  button {
    outline: none;
  }

  input,
  button {
    outline: none;
  }

  //省略号
  .ellips {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: normal;
  }

  //省略号2行
  .ellips2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; //作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
    -webkit-line-clamp: 2;
  }

  // 阴影
  .shadow {
    box-shadow: 0rem 0.05rem 0.14rem 0rem rgba(153, 153, 153, 0.2);
  }

  // 标签
  .lj-tag {
    display: inline-block;
    font-size: 0.22rem;
    width: 0.78rem;
    height: 0.3rem;
    background-color: #fd5b5b;
    color: #fff;
    text-align: center;
    line-height: 0.3rem;
    border-radius: 0.05rem;
  }

  // flex垂直居中
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .button {
    display: inline-block;
    width: 4rem;
    height: 0.8rem;
    background-color: #00a0e9;
    border-radius: 25px;
    text-align: center;
    color: #fff;
    font-size: 0.3rem;
    line-height: 0.8rem;
    border: none;
    margin-top: 0.5rem;
    box-shadow: 0px 4px 9px 0px #abcff8;
  }

  /* 滚动槽 */
  ::-webkit-scrollbar {
    width: 2px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 1px;
    background: rgba(0, 0, 0, 0.06);
  }
  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    border-radius: 1px;
    background: rgba(0, 0, 0, 0.12);
  }

  // 过渡效果
  .lj-enter-active {
    animation: fadeIn 0.2s both;
  }
  .lj-leave-active {
    animation: fadeOut 0.1s linear both;
  }

  @keyframes fadeOut {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes slideInTop {
    0% {
      transform: translateY(90%);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes slideOutRight {
    0% {
      transform: translateZ(0);
    }
    100% {
      transform: translate3d(100%, 0, 0);
    }
  }
  @keyframes slideInTop {
    0% {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }
    100% {
      opacity: 1;
      transform: translateZ(0);
    }
  }
  @keyframes slideInRight {
    0% {
      opacity: 0;
      transform: translate3d(100%, 0, 0);
    }
    100% {
      opacity: 1;
      transform: translateZ(0);
    }
  }
  @keyframes Scale {
    0% {
      transform: scale(0.9);
    }
    100% {
      transform: scale(1.04);
    }
  }

  .img-round {
    border-radius: 50%;
  }
</style>
