<template>
  <div class="demo-timeline">
    <p>
      (1)
      <code>autoColor</code>
      可选状态值：<code>success</code>：成功；<code>warning</code>：警告；<code>error</code>：失败。
    </p>
    <br />
    <tiny-time-line :data="data1"></tiny-time-line>
    <br /><br />

    <p class="demo-line">
      (2) 当<code>shape</code> = 'dot' 时，可以通过 <code>type</code> 属性指定节点类型，可选值有
      <code>primary</code>|<code>success</code> |<code>warning</code>|<code>danger</code>|<code>info</code>
    </p>
    <br />
    <tiny-time-line :data="data2" vertical shape="dot"></tiny-time-line>
  </div>
</template>

<script lang="ts">
import { TinyTimeLine } from '@opentiny/vue'
import { iconUpdate } from '@opentiny/vue-icon'

export default {
  components: {
    TinyTimeLine
  },
  data() {
    return {
      data1: [
        { name: '默认状态' },
        { name: '成功状态', autoColor: 'success' },
        { name: '警告状态', autoColor: 'warning' },
        { name: '异常状态', error: true }, // 也可以使用 autoColor: 'error'
        { name: '定义图标', autoColor: iconUpdate() }, // 自定义图标
        { name: '禁用状态', disabled: true }
      ],
      data2: [
        { name: '基本 / primary', time: '2019-11-10 00:00:00', type: 'primary' },
        { name: '成功 / success', time: '2019-11-11 00:01:30', type: 'success' },
        { name: '警告 / warning', time: '2019-11-12 14:20:15', type: 'warning' },
        { name: '危险 / danger', time: '2019-11-13 20:45:50', type: 'danger' },
        { name: '信息 / info', time: '2019-11-14 20:45:50', type: 'info' }
      ]
    }
  }
}
</script>

<style scoped>
code {
  color: #476582;
  padding: 2px 8px;
  margin: 0 4px;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
}
.demo-line {
  line-height: 24px;
}
</style>
