<template>
    <li :class="itemClasses">
        <div :class="tailClasses"></div>
        <div :class="headClasses" :style="customColor" ref="dot"><slot name="dot"></slot></div>
        <div :class="contentClasses">
            <slot></slot>
        </div>
    </li>
</template>
<script>
  'use strict';
  const prefixCls = 'co-timeline';
  export default {
    name: 'co-timeline-item',
    props: {
      color: {
        type: String,
        default: 'blue'
      }
    },
    data() {
      return {
        dot: false
      };
    },
    mounted() {
      this.dot = this.$refs.dot.innerHTML.length > 0;
    },
    computed: {
      itemClasses() {
        return `${prefixCls}-item`;
      },
      tailClasses() {
        return `${prefixCls}-item-tail`;
      },
      headClasses() {
        if (this.dot) {
          return [`${prefixCls}-item-head`, `${prefixCls}-item-head-custom`];
        } else {
          return [`${prefixCls}-item-head`, `${prefixCls}-item-head-${this.color}`];
        }
      },
      headColorShow() {
        return this.color === 'blue' || this.color === 'red' || this.color === 'green';
      },
      customColor() {
        let style = {};
        if (this.color) {
          if (!this.headColorShow) {
            style = {
              'color': this.color,
              'border-color': this.color
            };
          }
        }
        return style;
      },
      contentClasses() {
        return `${prefixCls}-item-content`;
      }
    }
  };
</script>
<style>
  @component-namespace co {
    @component timeline {
      @descendent item {
        margin: 0 !important;
        padding: 0 0 0.6rem;
        list-style: none;
        position: relative;
        @descendent tail {
          height: 100%;
          width: 0.05rem;
          background-color:#eee;
          position: absolute;
          left: 0.3rem;
          top: 0;
        }
        @descendent content {
          padding: 0.05rem 0.05rem 0.25rem 1.2rem;
          font-size: 0.6rem;
          position: relative;
          top: -0.15rem;
        }
        @descendent head {
          width: 0.65rem;
          height: 0.65rem;
          background-color: #fff;
          border-radius: 50%;
          border: 0.05rem solid transparent;
          position: absolute;
          @descendent blue {
            border-color: #2d8cf0;
            color: #2d8cf0;
          }
          @descendent green {
            border-color: #19be6b;
            color: #19be6b;
          }
          @descendent red {
            border-color:#ed3f14; 
            color: #ed3f14;
          }
        }
      }
    }
  }
  .co-timeline-item:last-child .co-timeline-item-tail {
    display: none;
  }
</style>
