<template>
  <div class="wrapper">
    <div class="toolbar" append="tree">
      <button type="primary" size="small" value="back"
        style="margin-left:30px;width:210px; margin-top:5px; margin-bottom:5px"
        @click.native="goback"></button>
      <button type="primary" size="small" value="forward"
        style="margin-left:30px;width:210px; margin-top:5px; margin-bottom:5px"
        @click.native="goforward"></button>
      <button type="primary" size="small" value="refresh"
        style="margin-left:30px;width:210px; margin-top:5px; margin-bottom:5px"
        @click.native="refresh"></button>
    </div>
    <web class="content" ref="webview" src='http://alibaba.github.io/weex/index.html'
      @pagestart="startload" @pagefinish="finishload" @error="failload"></web>
  </div>
</template>

<style scoped>
  .wrapper {
    width: 750;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    margin-bottom: 70;
  }
  .toolbar {
    flex-direction: row;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70;
  }
</style>

<script>
  var webview = weex.requireModule('webview');
  module.exports = {
    components: {
      button: require('../include/button.vue')
    },
    methods: {
      goback: function() {
        var el = this.$refs.webview
        webview.goBack(el)
      },
      goforward: function() {
        var el = this.$refs.webview
        webview.goForward(el)
      },
      refresh: function() {
        var el = this.$refs.webview
        webview.reload(el)
      },
      startload: function(e) {
      },
      finishload: function(e) {
      },
      failload: function(e) {
      }
    }
  }
</script>