<template>
  <div class="demo-count-down-decorate">
    <ui-count-down
      :value="deadline"
      title="这是一个倒计时"
      format="D 天 H 时 m 分 s 秒">
    </ui-count-down>
    <ui-count-down
      :value="deadline"
      prefix="Time:">
    </ui-count-down>
    <ui-count-down :value="deadline">
      <template #title>
        <ui-icon name="change_record_type"></ui-icon>
        自定义标题
      </template>
    </ui-count-down>
  </div>
</template>

<script>
import { CountDown, Icon } from "amumu-ui"
import { format } from "date-fns"
const deadline = Date.now() + 1000 * 60 * 10 + 1000 * 30

export default {
  name: "mm-count-down-decorate",
  components: {
    "ui-count-down": CountDown,
    "ui-icon": Icon,
  },
  data() {
    return {
      deadline: format(deadline, "yyyy-MM-dd HH:mm:ss"),
    }
  },
}
</script>

<style lang="scss">
.demo-count-down-decorate {
  .mm-count-down{
    margin-bottom: 8px;
  }
}
</style>
