<template>
  <scroller>
    <wxc-panel title="Countdown" type="primary">
      <wxc-countdown id="countdown1" remain="{{countdown1.remain}}"
                     style="width:750; margin-top: 20; margin-bottom: 20;">
        <text class="ctno1">{{countdown1.time.D}}</text>
        <text class="ctno1" style="background-color: #FFF; color: #AAA;">day(s)</text>
        <text class="ctno1">{{countdown1.time.hh}}</text>
        <text class="ctno1" style="background-color: #FFF; color: #AAA;">hour(s)</text>
        <text class="ctno1">{{countdown1.time.mm}}</text>
        <text class="ctno1" style="background-color: #FFF; color: #AAA;">minute(s)</text>
        <text class="ctno1">{{countdown1.time.ss}}</text>
        <text class="ctno1" style="background-color: #FFF; color: #AAA;">second(s)</text>
      </wxc-countdown>

      <wxc-countdown id="countdown2" remain="{{countdown2.remain}}" style="width:600;">
        <text class="ctno2">{{countdown2.time.MM}}</text>
        <text class="ctno2" style="background-color: #FFF; color: #AAA;">:</text>
        <text class="ctno2">{{countdown2.time.ss}}</text>
      </wxc-countdown>
    </wxc-panel>
  </scroller>
</template>

<style>
  .ctno1 {
    border-radius: 8;
    padding-top: 6;
    padding-bottom: 6;
    padding-right: 4;
    padding-left: 4;
    margin-left: 2;
    margin-right: 2;
    background-color: rgb(242, 222, 222);
    color: rgb(169, 68, 66);
  }

  .ctno2 {
    border-radius: 8;
    padding-top: 30;
    padding-bottom: 30;
    padding-left: 16;
    padding-right: 16;
    background-color: rgb(217, 237, 247);
    color: rgb(49, 112, 143);
    text-align: center;
    font-size: 40;
  }
</style>

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

  module.exports = {
    data: {
      countdown1: {
        remain: 5000,
        time: {
          D: '0',
          hh: '00',
          mm: '00',
          ss: '00'
        }
      },
      countdown2: {
        remain: 5000,
        time: {
          MM: '0',
          ss: '0'
        }
      }
    },
    ready: function() {
      this.initCountdown('countdown1');
      this.initCountdown('countdown2');
    },
    methods: {
      initCountdown: function(id) {
        var self = this;

        var $countdown = this.$vm(id);
        $countdown.$on('tick', function(e) {
          Object.assign(self[id].time, e.detail);
        });

        $countdown.$on('alarm', function(e) {
          Object.assign(self[id].time, e.detail);
        });
      }
    }
  }
</script>