<template>
  <view class="container">
    <view class="content" style="width: 100%;">
      <home v-if="navIndex === 0" />
      <mine v-else />
    </view>

    <!-- 底部菜单 -->
    <nav-bottom @change="onNavChange" @scan="onScan" class="nav-bottom"></nav-bottom>

    <!-- 获取用户信息的授权组件 -->
    <auth />
  </view>
</template>

<script>
import Home from './components/home.vue';
import Mine from './components/mine.vue';

export default {
  components: { Home, Mine },
  data() {
    return {
      navIndex: 0,
    };
  },
  // 分享
  onShareAppMessage() {
    return {
      title: '健康码小程序',
      path: '/pages/index/index?scene=1008',
    };
  },

  methods: {
    /**
     * 监听nav-bottom的点击事件
     * @param {number} index nav-bottom按钮的索引值
     */
    onNavChange(index) {
      this.navIndex = index;
    },

    // 扫一扫
    // 只允许通过相机扫码
    onScan() {
      wx.scanCode({
        onlyFromCamera: true,
        scanType: ['qrCode', 'wxCode'],
        success: res => {
          console.log('res: ', res);
          // 如果有路径
          if (res && res.path) {
            const pathArr = res.path.split('?scene=');
            const query = encodeURIComponent(pathArr[1]);
            const path = `/${pathArr[0]}?scene=${query}&scan=true`;
            this.openPage(path);
          } else {
            uni.showModal({
              title: '提示',
              content: '您的微信版本不支持此功能, 请使用微信APP的扫码功能',
              success: function(res) {},
            });
          }
        },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;

  .content {
    flex: 1;
    overflow-y: auto;
  }
  .nav-bottom {
    width: 100%;
  }
}
</style>
