<template>
  <scroller>
    <wxc-panel title="Title Levels" type="primary">
      <wxc-hn repeat="{{levels}}" level="{{level}}" value="H{{level}}, Level {{level}}"></wxc-hn>
    </wxc-panel>

    <wxc-panel title="Buttons" append="tree" type="primary">
      <div style="flex-direction: row; margin-top: 12px" repeat="{{buttons}}">
        <wxc-button type="{{type}}" size="large" value="{{type}}" onclick="{{clicked}}" style=""></wxc-button>
        <wxc-button type="{{type}}" size="middle" value="{{type}}" onclick="{{clicked}}"
                    style="margin-left:5px;width:210px;"></wxc-button>
        <wxc-button type="{{type}}" size="small" value="{{type}}" onclick="{{clicked}}"
                    style="margin-left:5px;"></wxc-button>
      </div>

      <!--<div style="flex-direction: row; margin-top: 12px">-->
      <!--<wxc-button disabled="{{true}}" type="" size="large" value="Disabled" onclick="{{clicked}}"></wxc-button>-->
      <!--<wxc-button disabled="{{false}}" type="primary" size="large" value="Enabled" onclick="{{clicked}}"-->
      <!--style="margin-left: 12px"></wxc-button>-->
      <!--</div>-->
    </wxc-panel>

    <wxc-panel title="Panels" type="primary">
      <wxc-panel repeat="{{panels}}" title="Panels-{{type}}" type="{{type}}" border="1"
                 style="margin-left: 12px;margin-right: 12px;">
        <text>Panels {{type}} content. Panels {{type}} content. Panels {{type}} content.</text>
      </wxc-panel>
    </wxc-panel>

    <wxc-panel title="List" type="primary">
      <wxc-list-item repeat="{{tips}}" onclick="{{clicked}}">
        <text class="item-txt">{{type}}</text>
      </wxc-list-item>
    </wxc-panel>

    <wxc-panel title="Tips" type="primary">
      <wxc-tip repeat="{{tips}}" style="margin-bottom: 20px;"
               value="Panels {{type}} content. Panels {{type}} content. Panels {{type}} content."></wxc-tip>
    </wxc-panel>
  </scroller>
</template>

<script>
  require('weex-components');

  module.exports = {
    data: {
      levels: [{level: 1}, {level: 2}, {level: 3}],
      buttons: [{type: 'default'}, {type: 'primary'}, {type: 'success'}, {type: 'info'}, {type: 'warning'}, {type: 'danger'}, {type: 'link'}],
      panels: [{type: 'default'}, {type: 'primary'}, {type: 'success'}, {type: 'info'}, {type: 'warning'}, {type: 'danger'}],
      tips: [{type: 'success'}, {type: 'info'}, {type: 'warning'}, {type: 'danger'}],
    },
    methods: {
      clicked: function() {
        var $modal = require('@weex-module/modal');
        $modal.toast({'message': 'clicked!', duration: 0.5});
      }
    }
  }
</script>

<style>
  .item-txt {
    font-size: 48px;
    color: #555555;
  }
</style>