<template>
  <scroller>
    <panel title="textarea" type="primary">
      <textarea
        class="textarea"
        autofocus="true"
        return-key-type="done"
        @return="onreturn"
        @change="onchange"
        @input="oninput"
      />
      <text>oninput: {{txtInput}}</text>
      <text>onchange: {{txtChange}}</text>
      <text>enter key type: {{returnType}}</text>
      <text>action: {{msg}}</text>
    </panel>
  </scroller>
</template>

<style scoped>
  .textarea {
    font-size: 30px;
    height: 280px;
    width: 400px;
    border-width: 2px;
    border-color: #ccc;
  }
</style>

<script>
  var modal = weex.requireModule('modal')
  module.exports = {
    data: function () {
      return {
        txtInput: '',
        txtChange: '',
        returnType: '',
        msg: ''
      }
    },
    components: {
      panel: require('../include/panel.vue')
    },
    methods: {
      onchange: function(event) {
        this.txtChange = event.value;
      },
      oninput: function(event) {
        this.txtInput = event.value;
      },
      onreturn: function(event) {
        this.returnType = event.returnKeyType;
        this.msg = 'You are "' + this.returnType + '" ' + event.value;
      }
    }
  };
</script>