<template>
  <scroller class="list" append="tree" ref="scroller">
    <refresh class="refresh-view" :display="refresh_display" @refresh="onrefresh" @pullingdown="pullingdown">
      <img id="roate" ref="roate" src="http://gw.alicdn.com/bao/uploaded/TB1xDrVNFXXXXbEXFXXXXXXXXXX-48-48.png" style="width: 50px;height: 50px;"></img>
    </refresh>
    <div v-for="(sec, i) in sections" :key="i" class="section">
      <div class="header">
        <text class="header-title">{{sec.title}}</text>
      </div>
      <div v-for="item in sec.items" class="item" :key="item.index">
        <text class="item-title">row {{item.id}}</text>
      </div>
    </div>
    <loading class="loading-view" :display="loading_display" @loading="onloading">
      <loading-indicator style="height: 60px; width: 60px;"></loading-indicator>
    </loading>
  </scroller>
</template>

<style scoped>
  .refresh-view {
    height: 120px;
    width: 750px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
  }

  .refresh-arrow {
    font-size: 30px;
    color: #45b5f0;
  }

  .loading-view {
    height: 80px;
    width: 750px;
    justify-content: center;
    align-items: center;
    background-color: #c0c0c0;
  }

  .indicator {
    height: 40px;
    width: 40px;
    color: #45b5f0;
  }

  .header {
    background-color: #45b5f0;
    padding: 20px;
    height: 88px;
    justify-content: center;
  }

  .header-title {
    color: white;
    font-weight: bold;
  }

  .item {
    justify-content: center;
    border-bottom-width: 2px;
    border-bottom-color: #c0c0c0;
    height: 100px;
    padding: 20px;
  }

  .item-title {
  }
</style>

<script>
  const dom = weex.requireModule('dom')
  console.log(dom)
  module.exports = {
    mounted () {
      const result = dom.getComponentRect(this.$refs.scroller, option => {
        console.log('getComponentRect:', option)
      })
    },
    methods: {
      onrefresh: function(e) {
        var self = this;
        self.refresh_display = 'show';
        setTimeout(function () {
          self.refresh_display = 'hide';
        }, 3000)
      },
      onloading: function(e) {
        var self = this;
        self.loading_display = 'show';
        setTimeout(function () {
          self.loading_display = 'hide';
        }, 3000)
      },
      pullingdown: function(e){
        var dy = e.dy;
        var pullingDistance = e.pullingDistance;
        var viewHeight = e.viewHeight;
      }
    },
    data: function () {
      return {
        refresh_display: 'hide',
        loading_display: 'hide',
        sections: [
          {
            title: 'Header 1',
            items: [
              {id: 1},
              {id: 2},
              {id: 3},
              {id: 4},
              {id: 5}
            ]
          },
          {
            title: 'Header 2',
            items: [
              {id: 6},
              {id: 7},
              {id: 8},
              {id: 9},
              {id: 10},
              {id: 11}
            ]
          },
          {
            title: 'Header 3',
            items: [
              {id: 6},
              {id: 7},
              {id: 8},
              {id: 9},
              {id: 10},
              {id: 11}
            ]
          }
        ],
        moreSections: [
          {
            title: 'Header 3',
            items: [
              {id: 12},
              {id: 13},
              {id: 14},
              {id: 15},
              {id: 16},
              {id: 17},
              {id: 18}
            ]
          },
          {
            title: 'Header 4',
            items: [
              {id: 19},
              {id: 20},
              {id: 21},
              {id: 22}
            ]
          },
          {
            title: 'Header 5',
            items: [
            {id: 23},
            {id: 24},
            {id: 25},
            {id: 26},
            {id: 27}
            ]
          },
          {
            title: 'Header 6',
            items: [
            {id: 28},
            {id: 29},
            {id: 30},
            {id: 31},
            {id: 32}
            ]
          }
          ]
      }
    }
  }
</script>