<template>
  <div>
  <co-header fixed title="Timeline">
    <fallback slot="left"></fallback>
  </co-header>

    <div class="co-wrapper page-timeline-main">
      <header class="header">1.基本用法</header>
      <co-timeline>
        <co-timeline-item>
          <p class="co-timeline-item-content-time">4月20号</p>
          <p class="co-timeline-item-content-content">发布版本1.0</p>
        </co-timeline-item>
        <co-timeline-item>
          <p class="co-timeline-item-content-time">5月20号</p>
          <p class="co-timeline-item-content-content">发布版本2.0</p>
        </co-timeline-item>
        <co-timeline-item>
          <p class="co-timeline-item-content-time">6月20号</p>
          <p class="co-timeline-item-content-content">发布版本3.0</p>
        </co-timeline-item>
        <co-timeline-item>
          <p class="co-timeline-item-content-time">7月20号</p>
          <p class="co-timeline-item-content-content">发布版本4.0</p>
        </co-timeline-item>
      </co-timeline>
      <header class="header">2.改变圆圈颜色</header>
      <co-timeline>
        <co-timeline-item color="red">
          发布1.0
        </co-timeline-item>
        <co-timeline-item color="green">
          发布2.0
        </co-timeline-item>
        <co-timeline-item color="#f50">
          发布3.0
        </co-timeline-item>
      </co-timeline>
      <header class="header">3.查看更多</header>
      <co-timeline pending>
        <template>
          <co-timeline-item v-for="(item, i) in lookMoreList" :key="i">
            {{item}}
          </co-timeline-item>
        </template>
        <co-timeline-item><span @click.prevent="lookMore()">查看更多</span></co-timeline-item>
      </co-timeline>
      <header class="header">4.自定义时间轴点</header>
      <co-timeline pending>
        <co-timeline-item class="page-timeline-dot">
          <i class="indexicon icon-radio" slot="dot"></i>
          <p>发布1.0版本</p>
        </co-timeline-item>
        <co-timeline-item>发布2.0版本</co-timeline-item>
        <co-timeline-item>发布3.0版本</co-timeline-item>
      </co-timeline>
    </div>
  </div>
</template>

<script type="es6">
  'use strict';
  export default {
    data() {
      return {
        lookMoreList: ['发布版本1.0', '发布版本2.0', '发布版本3.0']
      };
    },
    methods: {
      lookMore() {
        let more = ['发布4.0版本', '发布5.0版本'];
        this.lookMoreList = this.lookMoreList.concat(more);
      }
    }
  };
</script>

<style lang="less">
  .co-timeline-item-content-time {
    font-weight: bold;
    font-size: 14px;
  }
  .co-timeline-item-content-content {
    margin:5px 0 0 5px;
  }
  .page-timeline-dot {
    .co-timeline-item-head-custom{
      border-color: red;
      background-color: red;
    }
  }
  .page-timeline-main {
    overflow: scroll;
    background-color: #fff;
    padding: 20px;
  }
  .page-timeline-main .header {
    margin-bottom: 20px;
    font-weight: bold;
  }
</style>
