<template>
  <navpage
    dataRole="none"
    :height="navBarHeight"
    :title="title"
    backgroundColor="#ff5898"
    titleColor="white"
    leftItemTitle="More"
    leftItemColor="white"
    rightItemSrc="http://gtms02.alicdn.com/tps/i2/TB1ED7iMpXXXXXEXXXXWA_BHXXX-48-48.png"
    @naviBarLeftItemClick="naviBarLeftItemClick"
    @naviBarRightItemClick="naviBarRightItemClick">
    <panel title="push a new page">
      <button type="primary" size="small" value="push" @click.native="push"></button>
    </panel>
    <panel title="pop to the last page">
      <button type="success" size="small" value="pop" @click.native="pop"></button>
    </panel>
  </navpage>
</template>

<script>
  var navigator = weex.requireModule('navigator')
  var getBaseURL = require('../include/base-url.js').getBaseURL
  module.exports = {
    data: function () {
      return {
        navBarHeight: 88,
        title: 'Navigator',
        dir: 'examples',
        baseURL: '',
        subPath: weex.config.env.platform === 'Web' ? 'vue-web/' : ''
      }
    },
    components: {
      panel: require('../include/panel.vue'),
      navpage: require('../include/navpage.vue'),
      button: require('../include/button.vue')
    },
    created: function() {
      this.$getConfig(function (config) {
        var env = config.env;
        if(env.platform == 'iOS'){
          var scale = env.scale;
          var deviceWidth = env.deviceWidth / scale;
          this.navBarHeight = 64.0 * 750.0 / deviceWidth;
        }
      }.bind(this));
      this.baseURL = getBaseURL(this)
    },
    methods: {
      naviBarLeftItemClick: function (e) {
        modal.toast({ message: 'naviBarLeftItemClick', duration: 2 })
      },
      naviBarRightItemClick: function (e) {
        modal.toast({ message: 'naviBarRightItemClick', duration: 2 })
      },
      push: function () {
        var params = {
          'url':  this.baseURL + this.subPath + 'vue/components/navigator.js?test=1',
          'animated' : 'true',
        }
        navigator.push(params, function () {});
      },
      pop: function () {
        var params = {
          'url':  this.baseURL + this.subPath + 'vue/components/navigator.js?test=1',
          'animated' : 'true',
        }
        navigator.pop(params, function () {});
      },
    }
  }
</script>