<template>
  <div class="demo-timeline-reverse">
    <ui-timeline
      :pending="pending"
      :reverse="reverse">
      <ui-timeline-item
        v-for="item of list"
        :key="item.id">
        {{ item.value }}
      </ui-timeline-item>
    </ui-timeline>
    <ui-button
      type="primary"
      @click.native="toggle">
      正序/倒序
    </ui-button>
  </div>
</template>

<script>
import { Timeline, TimelineItem, Button } from "amumu-ui"
export default {
  components: {
    "ui-timeline": Timeline,
    "ui-timeline-item": TimelineItem,
    "ui-button": Button,
  },
  data() {
    return {
      list: [
        {
          id: 0,
          value: "Create a services site 2015-09-01",
        },
        {
          id: 1,
          value: "Solve initial network problems 2015-09-01",
        },
        {
          id: 2,
          value: "Technical testing 2015-09-01",
        },
        {
          id: 3,
          value: "Network problems being solved 2015-09-01",
        },
      ],
      pending: "Recording...",
      reverse: false,
    }
  },
  methods: {
    toggle() {
      this.reverse = !this.reverse
    },
  },
}
</script>
