<template>
  <div>
    <p style="padding:15px;">
      <span>Normal Usage</span>
      <clocker :time="time1" />
    </p>

    <group title="Use in cell">
      <cell title="Date:0801">
        <clocker
          slot="value"
          :time="time2"
          :s-time="time4"
        />
      </cell>
    </group>

    <group title="custom template">
      <cell title="Date:0801">
        <clocker
          slot="value"
          :time="time2"
        >
          <span style="color:red">%D 天</span>
          <span style="color:green">%H 小时</span>
          <span style="color:blue">%M 分 %S 秒</span>
        </clocker>
      </cell>
      <cell title="20180808">
        <clocker
          slot="value"
          :time="time3"
        >
          <span class="day">%_D1</span>
          <span class="day">%_D2</span>天
          <span class="day">%_H1</span>
          <span class="day">%_H2</span>时
          <span class="day">%_M1</span>
          <span class="day">%_M2</span>分
          <span class="day">%_S1</span>
          <span class="day">%_S2</span>秒
        </clocker>
      </cell>
    </group>
  </div>
</template>

<script>
import { Clocker, Cell, Group } from '../components/_index'

export default {
  components: {
    Clocker,
    Cell,
    Group
  },
  data () {
    return {
      time1: '2017-07-13 21:54',
      time2: '2017-08-01 22:55',
      time3: '2018-08-08',
      time4: '2017-08-01 22:52'
    }
  },
  created () {
    setTimeout(() => {
      this.time1 = '2016-08-13 22:54'
    }, 5000)
  }
}
</script>

<style>
.day {
  background-color:#000;
  color:#fff;
  text-align:center;
  display:inline-block;
  padding:0 3px;
  border-radius:3px;
}
</style>
