<template>
  <div class="component-wrapper">
    <hgroup class="component-hgroup">
      <h1 class="component-title">Timeline (时间轴)</h1>
      <h2 class="component-subtitle">时间轴多用于某项任务进度的展示，例如：物流、订单进度等</h2>
      <h3 class="component-notice">功能强大</h3>
    </hgroup>

    <section class="component-item">
      <hgroup class="component-item-hgroup">
        <h1 class="component-item-title">代码示例</h1>
      </hgroup>

      <sv-example>
        <h2 slot="title">基本用法</h2>
        <h2 slot="subtitle">最简单定义一个时间轴的用法</h2>
        <template slot="preview">
         <sv-timeline>
           <sv-timeline-item>
             <p>商家已接单，准备出库</p>
           </sv-timeline-item>
           <sv-timeline-item>
             <p>宝贝已出库，准备递交给快递</p>
           </sv-timeline-item>
           <sv-timeline-item>
             <p>宝贝已到达北京，准备派送</p>
           </sv-timeline-item>
           <sv-timeline-item>
             <p>宝贝已被百米站代收</p>
           </sv-timeline-item>
         </sv-timeline>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-timeline>'></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<p>商家已接单，准备出库</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<p>宝贝已出库，准备递交给快递</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<p>宝贝已到达北京，准备派送</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<p>宝贝已被百米站代收</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-timeline>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">小点颜色</h2>
        <h2 slot="subtitle">用各种颜色来标识不同状态，可以使用info、danger、royal、success等（其他取值参见Color组件）或自定义的颜色，默认是info。可以在Timeline组件上使用dot-color统一设置，也可以在TimelineItem组件上单个设置</h2>
        <template slot="preview">
          <sv-timeline dot-color="success">
            <sv-timeline-item>
              <p>商家已接单，准备出库</p>
            </sv-timeline-item>
            <sv-timeline-item>
              <p>宝贝已出库，准备递交给快递</p>
            </sv-timeline-item>
            <sv-timeline-item>
              <p>宝贝已到达北京，准备派送</p>
            </sv-timeline-item>
            <sv-timeline-item dot-color="danger">
              <p>收件人电话无法接通，宝贝已被百米站代收</p>
            </sv-timeline-item>
          </sv-timeline>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-timeline dot-color="success">'></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<p>商家已接单，准备出库</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<p>宝贝已出库，准备递交给快递</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<p>宝贝已到达北京，准备派送</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item dot-color="danger">' :level="2"></sv-code-item>
            <sv-code-item code='<p>收件人电话无法接通，宝贝已被百米站代收</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-timeline>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">小点类型</h2>
        <h2 slot="subtitle">有实心圆和空心圆两种类型，默认为空心圆，通过dot-type设置，取值有fill(实心),outline(空心)，默认为outline</h2>
        <template slot="preview">
          <sv-timeline dot-type="fill">
            <sv-timeline-item>
              <p>商家已接单，准备出库</p>
            </sv-timeline-item>
            <sv-timeline-item>
              <p>宝贝已出库，准备递交给快递</p>
            </sv-timeline-item>
            <sv-timeline-item>
              <p>宝贝已到达北京，准备派送</p>
            </sv-timeline-item>
            <sv-timeline-item dot-type="outline" dot-color="danger">
              <p>收件人电话无法接通，宝贝已被百米站代收</p>
            </sv-timeline-item>
          </sv-timeline>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-timeline dot-type="fill">'></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<p>商家已接单，准备出库</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<p>宝贝已出库，准备递交给快递</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<p>宝贝已到达北京，准备派送</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item dot-type="outline" dot-color="danger">' :level="2"></sv-code-item>
            <sv-code-item code='<p>收件人电话无法接通，宝贝已被百米站代收</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-timeline>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">小点尺寸</h2>
        <h2 slot="subtitle">通过dot-size设置小点尺寸，可选值有small,default(或者不写),large。默认default</h2>
        <template slot="preview">
          <sv-timeline dot-size="large">
            <sv-timeline-item>
              <p>商家已接单，准备出库</p>
            </sv-timeline-item>
            <sv-timeline-item>
              <p>宝贝已出库，准备递交给快递</p>
            </sv-timeline-item>
            <sv-timeline-item line-color="danger" line-type="dotted">
              <p>宝贝已到达北京，准备派送</p>
            </sv-timeline-item>
            <sv-timeline-item dot-type="dotted" dot-color="danger">
              <p>收件人电话无法接通，宝贝已被百米站代收</p>
            </sv-timeline-item>
          </sv-timeline>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-timeline dot-size="large">'></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<p>商家已接单，准备出库</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<p>宝贝已出库，准备递交给快递</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item line-color="danger" line-type="dotted">' :level="2"></sv-code-item>
            <sv-code-item code='<p>宝贝已到达北京，准备派送</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item dot-type="dotted" dot-color="danger">' :level="2"></sv-code-item>
            <sv-code-item code='<p>收件人电话无法接通，宝贝已被百米站代收</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-timeline>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">竖线颜色</h2>
        <h2 slot="subtitle">竖线颜色的区分常用在表示进度时间轴的场景中，执行完的一种颜色，待办的一种颜色。line-color可选值和dot-color相同，默认为stable。竖线还有其他个性化配置，详见下方API。</h2>
        <template slot="preview">
          <sv-timeline line-color="danger" line-type="dotted">
            <sv-timeline-item>
              <time slot="time">10-27 20:00</time>
              <p>商家已接单，准备出库</p>
            </sv-timeline-item>
            <sv-timeline-item>
              <time slot="time">10-28 16:00</time>
              <p>宝贝已出库，准备递交给快递</p>
            </sv-timeline-item>
            <sv-timeline-item>
              <time slot="time">10-29 08:00</time>
              <p>宝贝已到达北京，准备派送</p>
            </sv-timeline-item>
            <sv-timeline-item>
              <time slot="time">10-29 12:00</time>
              <p>收件人电话无法接通，宝贝已被百米站代收</p>
            </sv-timeline-item>
          </sv-timeline>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-timeline dot-type="fill">'></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<time slot="time">10-27 20:00</time>' :level="3"></sv-code-item>
            <sv-code-item code='<p>商家已接单，准备出库</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<time slot="time">10-28 16:00</time>' :level="3"></sv-code-item>
            <sv-code-item code='<p>宝贝已出库，准备递交给快递</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<time slot="time">10-29 08:00</time>' :level="3"></sv-code-item>
            <sv-code-item code='<p>宝贝已到达北京，准备派送</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item dot-type="outline" dot-color="danger">' :level="2"></sv-code-item>
            <sv-code-item code='<time slot="time">10-29 12:00</time>' :level="3"></sv-code-item>
            <sv-code-item code='<p>收件人电话无法接通，宝贝已被百米站代收</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-timeline>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>

      <sv-example>
        <h2 slot="title">时间位于左侧</h2>
        <h2 slot="subtitle">time-position设置为left，时间将在左侧显示，仅当存在名为time的slot时，该属性才会有效。</h2>
        <template slot="preview">
          <sv-timeline time-position="left">
            <sv-timeline-item>
              <time slot="time">10-27</time>
              <p>商家已接单，准备出库</p>
              <div slot="note">接单人：周先生</div>
            </sv-timeline-item>
            <sv-timeline-item>
              <time slot="time">10-28</time>
              <p>宝贝已出库，准备递交给快递</p>
              <div slot="note">快递公司：顺丰</div>
            </sv-timeline-item>
            <sv-timeline-item>
              <time slot="time">10-29</time>
              <p>宝贝已到达北京，准备派送</p>
            </sv-timeline-item>
            <sv-timeline-item>
              <time slot="time">10-29</time>
              <p>收件人电话无法接通，宝贝已被百米站代收</p>
              <div slot="note">百米站联系电话：13344236575</div>
            </sv-timeline-item>
          </sv-timeline>
        </template>
        <template slot="code">
          <sv-code>
            <sv-code-item code='<sv-timeline time-position="left">'></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<time slot="time">10-27</time>' :level="3"></sv-code-item>
            <sv-code-item code='<p>商家已接单，准备出库</p>' :level="3"></sv-code-item>
            <sv-code-item code='<div slot="note">接单人：周先生</div>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<time slot="time">10-28</time>' :level="3"></sv-code-item>
            <sv-code-item code='<p>宝贝已出库，准备递交给快递</p>' :level="3"></sv-code-item>
            <sv-code-item code='<div slot="note">快递公司：顺丰</div>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<time slot="time">10-29</time>' :level="3"></sv-code-item>
            <sv-code-item code='<p>宝贝已到达北京，准备派送</p>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='<time slot="time">10-29</time>' :level="3"></sv-code-item>
            <sv-code-item code='<p>收件人电话无法接通，宝贝已被百米站代收</p>' :level="3"></sv-code-item>
            <sv-code-item code='<div slot="note">百米站联系电话：13344236575</div>' :level="3"></sv-code-item>
            <sv-code-item code='</sv-timeline-item>' :level="2"></sv-code-item>
            <sv-code-item code='</sv-timeline>'></sv-code-item>
          </sv-code>
        </template>
      </sv-example>
    </section>

    <section class="component-item api">
      <hgroup class="component-item-hgroup">
        <h1 class="component-item-title">API</h1>
      </hgroup>

      <div class="component-item-content">
        <div class="component-item-content-header">
          <h1 class="component-item-content-title">Timeline</h1>
          <h1 class="component-item-content-subtitle"></h1>
        </div>
        <div class="component-item-content-main api">
          <sv-tabs stripe position="top">
            <sv-tab :value="0" title="Props">
              <sv-table :data="apiData.timeline.props">
                <sv-table-column prop="name" title="名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="300"></sv-table-column>
                <sv-table-column prop="type" title="类型"></sv-table-column>
                <sv-table-column prop="optional" title="可选值"></sv-table-column>
                <sv-table-column prop="default" title="默认值"></sv-table-column>
              </sv-table>
            </sv-tab>
            <sv-tab :value="1" title="Slots"></sv-tab>
            <sv-tab :value="2" title="Events">
              <!--
              <sv-table :data="apiData.tabs.events">
                <sv-table-column prop="name" title="事件名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="200"></sv-table-column>
                <sv-table-column prop="param" title="回调参数" width="300"></sv-table-column>
              </sv-table>
              -->
            </sv-tab>
          </sv-tabs>
        </div>
      </div>
      <div class="component-item-content">
        <div class="component-item-content-header">
          <h1 class="component-item-content-title">TimelineItem</h1>
          <h1 class="component-item-content-subtitle">和父组件TimelineItem相同的属性优先级高于父组件，即会覆盖父组件的值</h1>
        </div>
        <div class="component-item-content-main api">
          <sv-tabs stripe position="top">
            <sv-tab :value="0" title="Props">
              <sv-table :data="apiData.timelineItem.props">
                <sv-table-column prop="name" title="名称" width="100"></sv-table-column>
                <sv-table-column prop="description" title="描述" width="300"></sv-table-column>
                <sv-table-column prop="type" title="类型"></sv-table-column>
                <sv-table-column prop="optional" title="可选值"></sv-table-column>
                <sv-table-column prop="default" title="默认值"></sv-table-column>
              </sv-table>
            </sv-tab>
            <sv-tab :value="1" title="Slots">
              <sv-table :data="apiData.timelineItem.slots">
                <sv-table-column prop="name" title="名称"></sv-table-column>
                <sv-table-column prop="description" title="描述"></sv-table-column>
              </sv-table>
            </sv-tab>
            <sv-tab :value="2" title="Events">
            </sv-tab>
          </sv-tabs>
        </div>
      </div>
    </section>
  </div>
</template>

<script type="text/ecmascript-6">
  import Code from '../components/Code.vue'
  import CodeItem from '../components/CodeItem.vue'
  export default {
    components: {
      svCode: Code,
      svCodeItem: CodeItem
    },
    data () {
      return {
        apiData: {
          timeline: {
            props: [
              {
                name: 'dot-color',
                description: '小点颜色',
                type: 'string',
                optional: '参见Color组件',
                default: 'info'
              },
              {
                name: 'dot-type',
                description: '小点类型，实心小点和空心小点',
                type: 'string',
                optional: 'fill,outline',
                default: 'outline'
              },
              {
                name: 'dot-size',
                description: '小点尺寸',
                type: 'string',
                optional: 'small,default,large',
                default: 'default'
              },
              {
                name: 'line-color',
                description: '竖线颜色',
                type: 'string',
                optional: '参见Color组件',
                default: 'stable'
              },
              {
                name: 'line-type',
                description: '竖线类型，实线(solid)和虚线(dotted)',
                type: 'string',
                optional: 'solid,dotted',
                default: 'solid'
              },
              {
                name: 'has-line',
                description: '是否有竖线',
                type: 'boolean',
                optional: 'true,false',
                default: 'true'
              },
              {
                name: 'time-position',
                description: '时间显示的位置，有左侧和右侧两种',
                type: 'string',
                optional: 'left,right',
                default: 'right'
              }
            ],
            slots: [],
            events: []
          },
          timelineItem: {
            props: [
              {
                name: 'dot-color',
                description: '小点颜色',
                type: 'string',
                optional: '参见Color组件',
                default: 'info'
              },
              {
                name: 'dot-type',
                description: '小点类型，实心小点和空心小点',
                type: 'string',
                optional: 'fill,outline',
                default: 'outline'
              },
              {
                name: 'dot-size',
                description: '小点尺寸',
                type: 'string',
                optional: 'small,default,large',
                default: 'default'
              },
              {
                name: 'line-color',
                description: '竖线颜色',
                type: 'string',
                optional: '参见Color组件',
                default: 'stable'
              },
              {
                name: 'line-type',
                description: '竖线类型，实线(solid)和虚线(dotted)',
                type: 'string',
                optional: 'solid,dotted',
                default: 'solid'
              }
            ],
            slots: [
              {
                name: 'time',
                description: '时间'
              },
              {
                name: 'note',
                description: '说明文字'
              },
              {
                name: '-',
                description: '基本内容'
              }
            ],
            events: [
              {
                name: 'click',
                description: '点击按钮时的回调，回调参数为当前被点击按钮的索引'
              }
            ]
          }
        }
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../src/styles/base";
  @import "../styles/components";
</style>
