<template>
  <div class="index-page" v-bind:style="{ paddingTop: isActive[0]+25*isActive[1] + 'rpx'}">
    <p class="navigator_text" v-bind:style="{ top: isActive[0]-4*isActive[1]+ 'rpx'}">我的手机</p>
    <img src="../../assets/img/index-bg.jpg" class="index-bg" />
    <img src="../../assets/img/index-bg-cover.png" class="index-bg-cover" />
    <img src="../../assets/img/index-start-button.jpg" class="index-start-button" @click="handleStart" />
    <navigator v-if="config.more_fun && !config.more_fun.hide" class="navigator" path="" target="miniProgram" open-type="navigate" :app-id="config.more_fun.appid">
      <img src="../../assets/img/btn-more.png" class="btn-more" @tap="handleMore" v-if="config.more_fun && !config.more_fun.hide" />
    </navigator>
  </div>
</template>

<script>
import store from '@/store'
export default {
  computed: {
    config() {
      return store.state.indexPage.config
    },
    isActive() {
      console.warn('show')
      let height = 0,pixelRatio=1;
      wx.getSystemInfo({
        success: res => {
          this.pageStyle = 'padding-top:' + res.statusBarHeight + 'rpx'
          console.warn(res.statusBarHeight)
          console.warn(res.pixelRatio)
          // res.pixelRatio
          height = res.statusBarHeight*res.pixelRatio;
          pixelRatio = res.pixelRatio
        }
      })
      return [height,pixelRatio];
    }
  },
  onLoad() {
    // console.log(
    //   this.$root.$mp.query,
    //   this.$root.$mp.appOptions,
    //   this.$root.$mp
    // );
  },
  onShow() {},
  onPageScroll() {
    // console.log('page is scroll')
  },
  beforeCreate() {
    // console.log('page is before create')
  },
  data() {
    return {
      userInfo: {}
    }
  },

  components: {},

  methods: {
    handleStart() {
      wx.setStorageSync('commited', false)
      wx.navigateTo({
        url: '/pages/counter/main'
      })
    },
    handleMore() {
      return false
      wx.navigateToMiniProgram({
        appId: this.config.more_fun.appid,
        path: '',
        success() {
          // console.log("打开成功");
        }
      })
    }
  },

  created() {},
  mounted() {}
}
</script>

<style scoped lang="scss">
.index-page {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #c9baa8;
  text-align: center;
  padding: 30rpx 0 0;
  padding-top: 160rpx;
}
.index-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.index-bg-cover {
  position: relative;
  width: 659rpx;
  height: 798rpx;
  z-index: 1;
}
.index-start-button {
  position: relative;
  width: 489rpx;
  height: 123rpx;
  z-index: 3;
  margin: 50rpx 0 30rpx;
}
.btn-more {
  position: relative;
  width: 489rpx;
  height: 123rpx;
  z-index: 4;
}
.navigator {
  opacity: 1;
  background: rgba(0, 0, 0, 0);
}
.navigator_text {
  text-align: center;
  font-size: 40rpx;
  color: #555555;
  position: fixed;
  top: 60rpx;
  font-family: 'Microsoft Yahei';
  width: 100%;
  z-index: 100;
}
</style>
