<template>
  <scroller>
    <div>
      <div style="background-color: #286090">
        <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">websocket</text>
      </div>
      <input
              type="text"
              placeholder="please input message to send"
              class="input"
              autofocus="false"
              value=""
              onchange="onchange"
              oninput="oninput"
              id = "input"
      />
      <div style="flex-direction: row; justify-content: center;">
        <text class="button" onclick="{{connect}}">connect</text>
        <text class="button" onclick="{{send}}">send</text>
        <text class="button" onclick="{{close}}">close</text>
        <text class="button" onclick="{{go}}">chatroom</text>
      </div>
      <div style="background-color: #D3D3D3;margin-top: 20">
        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = send</text>
      </div>
      <text style="color: #000000;height: 80">{{sendinfo}}</text>
      <div style="background-color: #D3D3D3">
        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onopen</text>
      </div>
      <text style="color: #000000;height: 80">{{onopeninfo}}</text>
      <div style="background-color: #D3D3D3">
        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onmessage</text>
      </div>
      <text style="color: #000000;height: 100">{{onmessage}}</text>
      <div style="background-color: #D3D3D3">
        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onclose</text>
      </div>
      <text style="color: #000000;height: 80">{{oncloseinfo}}</text>
      <div style="background-color: #D3D3D3">
        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onerror</text>
      </div>
      <text style="color: #000000;height: 80">{{onerrorinfo}}</text>
      <div style="background-color: #D3D3D3">
        <text class="title" style="height: 80 ;padding: 20;color: #000000">method = close</text>
      </div>
      <text style="color: #000000;height: 80">{{closeinfo}}</text>
    </div>
    </div>
  </scroller>
</template>
<style>
  .input {
    font-size: 40;
    height: 80;
    width: 600;
  }
  .button {
    font-size: 30;
    width: 150;
    color: #41B883;
    text-align: center;
    padding-top: 10;
    padding-bottom: 10;
    border-width: 2;
    border-style: solid;
    margin-right: 20;
    border-color: rgb(162, 217, 192);
    background-color: rgba(162, 217, 192, 0.2);
  }
</style>
<script>
  var websocket = require('@weex-module/webSocket');
  var navigator = require('@weex-module/navigator');
  module.exports = {
    data: {
      connectinfo: '',
      sendinfo: '',
      onopeninfo: '',
      onmessage: '',
      oncloseinfo: '',
      onerrorinfo: '',
      closeinfo: '',
      txtInput:'',
      navBarHeight: 88,
      title: 'Navigator',
      dir: 'examples',
      baseURL: '',
    },
    created: function() {
      var bundleUrl = this.$getConfig().bundleUrl;
      bundleUrl = new String(bundleUrl);
      console.log('hit', bundleUrl);
      var nativeBase;
      var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0;

      var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0;
      if (isAndroidAssets) {
        nativeBase = 'file://assets/';
      }
      else if (isiOSAssets) {
        // file:///var/mobile/Containers/Bundle/Application/{id}/WeexDemo.app/
        // file:///Users/{user}/Library/Developer/CoreSimulator/Devices/{id}/data/Containers/Bundle/Application/{id}/WeexDemo.app/
        nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1);
      }
      else {
        var host = 'localhost:12580';
        var matches = /\/\/([^\/]+?)\//.exec(this.$getConfig().bundleUrl);
        if (matches && matches.length >= 2) {
          host = matches[1];
        }
        nativeBase = 'http://' + host + '/' + this.dir + '/build/';
      }
      var h5Base = bundleUrl;
      // in Native
      var base = nativeBase;
      if (typeof window == 'object') {
        // in Browser or WebView
        base = h5Base;
      }
      this.baseURL = base;
    },
    methods: {

      connect:function() {
        websocket.WebSocket('ws://echo.websocket.org','');
        var self = this;
        self.onopeninfo = 'connecting...'
        websocket.onopen = function(e)
        {
          self.onopeninfo = 'websocket open';
        }
        websocket.onmessage = function(e)
        {
          self.onmessage = e.data;
        }
        websocket.onerror = function(e)
        {
          self.onerrorinfo = e.data;    
        }
        websocket.onclose = function(e)
        {
          self.onopeninfo = '';
          self.onerrorinfo = e.code;
        }
      },
      send:function(e) {
        var input = this.$el('input');
        input.blur();
        websocket.send(this.txtInput);
        this.sendinfo = this.txtInput;
      },
      oninput: function(event) {
        this.txtInput = event.value;
      },
      close:function(e) {
        websocket.close();
      },
      go:function(e) {
        var vm = this;
        if (typeof window !== 'object') {
          this.baseURL = this.baseURL + 'module/chatroom-demo.js?test=1';
        }
        var params = {
          'url':  this.baseURL,
          'animated' : 'true',
        }
        navigator.push(params,function(){
        });
      },
    }
  };
</script>