<template>
  <div class="sv-timeline" :class="{'time-left': timePosition === 'left'}">
    <slot></slot>
  </div>
</template>

<script type="es6">
  export default {
    name: 'svTimeline',
    props: {
      timePosition: {
        type: String,
        default: 'right'
      },
      hasLine: {
        type: Boolean,
        default: true
      },
      dotType: {
        type: String,
        default: 'outline'
      },
      dotColor: {
        type: String,
        default: 'info'
      },
      dotSize: {
        type: String,
        default: 'default'
      },
      lineType: {
        type: String,
        default: 'solid'
      },
      lineColor: {
        type: String,
        default: 'stable'
      }
    },
    data () {
      return {
      }
    },
    methods: {
      computeComponentStyles () {
        let $children = this.$children

        let hasLeftTime = false
        for (let i = 0, len = $children.length; i < len; i++) {
          if ($children[i].$slots.time) {
            hasLeftTime = true
            break
          }
        }

        let maxDotWidth
        $children.forEach(children => {
          if (!maxDotWidth || children.$refs.dotAndLineRef.getBoundingClientRect().width > maxDotWidth) {
            maxDotWidth = children.$refs.dotAndLineRef.getBoundingClientRect().width
          }
          children.$emit('checkHasLeftTime', hasLeftTime)
        })

        $children.forEach(children => {
          children.$refs.dotAndLineRef.style.width = maxDotWidth + 'px'
        })
      }
    },
    mounted () {
      this.computeComponentStyles()
    }
  }
</script>

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

  .sv-timeline{
    position: relative;
    font-family: '微软雅黑';
    &.time-left{
      .sv-timeline-item{
        .sv-timeline-item-time{
          width: pxToRem(90);
          margin-right: pxToRem(20);
          font-size: pxToRem(26);
          color:#b7b7b7;
          font-family: '微软雅黑';
          text-align: right;
        }
        .sv-timeline-item-content{
          flex: 1;
          margin: pxToRem(0 0 30 20);
          .sv-timeline-item-content-body{
            font-size: pxToRem(24);
            color:#666;
          }
          .sv-timeline-item-content-footer{
            margin-top: pxToRem(10);
            font-size: pxToRem(22);
            color:#999;
          }
        }
      }
    }
    .sv-timeline-item{
      display: flex;
      line-height: 1;
      &:last-child{
        .sv-timeline-item-dot-and-line{
          .sv-timeline-item-line{
            display: none;
          }
        }
        .sv-timeline-item-main{
          margin-bottom:0;
        }
      }
      .sv-timeline-item-dot-and-line{
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        min-width: pxToRem(20px);
        max-width: pxToRem(40px);
        overflow: hidden;
        .sv-timeline-item-dot{
          display: flex;
          justify-content: center;
          align-items: flex-start;
          .dot-entry{
            border-radius: 50%;
            &.dot-size-small{
              width: pxToRem(18);
              height: pxToRem(18);
            }
            &.dot-size-default{
              width: pxToRem(24);
              height: pxToRem(24);
            }
            &.dot-size-large{
              width: pxToRem(28);
              height: pxToRem(28);
            }
            &.dot-type-outline{
              border-style: solid;
            }
            &.dot-type-dotted{
              border-style: dotted;
            }
            &.dot-type-outline, &.dot-type-dotted{
              background: $color-light;
              border-width: 1px;
              border-color: transparent;
              &.dot-color-light{
                border-color: $color-light;
              }
              &.dot-color-stable{
                border-color: $color-stable;
              }
              &.dot-color-primary{
                border-color: $color-primary;
              }
              &.dot-color-danger{
                border-color: $color-danger;
              }
              &.dot-color-warning{
                border-color: $color-warning;
              }
              &.dot-color-success{
                border-color: $color-success;
              }
              &.dot-color-info{
                border-color: $color-info;
              }
              &.dot-color-royal{
                border-color: $color-royal;
              }
              &.dot-color-lively{
                border-color: $color-lively;
              }
            }
            &.dot-type-fill{
              background: transparent;
              border: none;
              &.dot-color-light{
                background: $color-light;
              }
              &.dot-color-stable{
                background: $color-stable;
              }
              &.dot-color-primary{
                background: $color-primary;
              }
              &.dot-color-danger{
                background: $color-danger;
              }
              &.dot-color-warning{
                background: $color-warning;
              }
              &.dot-color-success{
                background: $color-success;
              }
              &.dot-color-info{
                background: $color-info;
              }
              &.dot-color-royal{
                background: $color-royal;
              }
              &.dot-color-lively{
                background: $color-lively;
              }
            }
          }
        }
        .sv-timeline-item-line{
          flex: 1;
          display: flex;
          justify-content: center;
          width: 100%;
          .line-entry{
            width: 1px;
            transform: scaleX(0.5);
            &.line-type-dotted{
              width:0;
              background: none;
              border: 1px dotted transparent;
              transform: scaleX(0.5);
              &.line-color-light{
                border-color: $color-light;
              }
              &.line-color-stable{
                border-color: $color-stable;
              }
              &.line-color-primary{
                border-color: $color-primary;
              }
              &.line-color-danger{
                border-color: $color-danger;
              }
              &.line-color-warning{
                border-color: $color-warning;
              }
              &.line-color-success{
                border-color: $color-success;
              }
              &.line-color-info{
                border-color: $color-info;
              }
              &.line-color-royal{
                border-color: $color-royal;
              }
              &.line-color-lively{
                border-color: $color-lively;
              }
            }
            &.line-type-solid{
              background: transparent;
              &.line-color-light{
                background: $color-light;
              }
              &.line-color-stable{
                background: $color-stable;
              }
              &.line-color-primary{
                background: $color-primary;
              }
              &.line-color-danger{
                background: $color-danger;
              }
              &.line-color-warning{
                background: $color-warning;
              }
              &.line-color-success{
                background: $color-success;
              }
              &.line-color-info{
                background: $color-info;
              }
              &.line-color-royal{
                background: $color-royal;
              }
              &.line-color-lively{
                background: $color-lively;
              }
            }
          }
        }
      }
      .sv-timeline-item-main{
        margin: pxToRem(0 0 40 20);
        .sv-timeline-item-time{
          margin-bottom: pxToRem(20);
          font-size: pxToRem(28);
          color:#333;
        }
        .sv-timeline-item-content{
          flex: 1;
          .sv-timeline-item-content-body{
            font-size: pxToRem(24);
            color:#666;
          }
          .sv-timeline-item-content-footer{
            margin-top: pxToRem(10);
            font-size: pxToRem(26);
            color:#999;
          }
        }
      }
    }
  }
</style>
