<template>
  <div class="nodeline">
    <div class="container">
      <div
        v-if="!disableLine"
        :class="'line ' + lineType"
      />
      <div :class="{'mark': true, 'top': showTopMark, 'bottom': showBottomMark}" />
      <div :class="'point ' + pointType" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'NodeLine',
  components: {

  },
  props: {
    disableLine: {
      type: Boolean,
      default: false,
    },
    showTopMark: {
      type: Boolean,
      default: false,
    },
    showBottomMark: {
      type: Boolean,
      default: false,
    },
    pointType: {
      type: String,
      default: 'default', // default | primary
    },
    lineType: {
      type: String,
      default: 'default', // default | primary
    },
  },
  data() {
    return {

    };
  },
};
</script>
<style lang="scss" scoped>
@mixin point-nodes($before-bg-color, $after-bg-color) {
  &::before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: $before-bg-color;
  }
  &::after {
    content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: $after-bg-color;
  }
}

.nodeline {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 24px;

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    .point {
      position: absolute;
      height: 16px;
      width: 16px;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      &.primary {
        @include point-nodes(var(--primary-color-3), var(--primary-color-1))
      }
      &.default {
        @include point-nodes(var(--application-color-7), var(--application-color-4))
      }
    }

    .line {
      position: absolute;
      box-sizing: border-box;
      height: 100%;
      width: 1px;
      border: 1px dashed var(--primary-color-1);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      &.default {
        border: 1px dashed var(--application-color-7);
      }
      &.primary {
        border: 1px dashed var(--primary-color-1);
      }
    }

    .mark {
      position: absolute;
      height: 100%;
      width: 100%;
      &.top::before {
        content: "";
        position: absolute;
        top: 0px;
        height: 12px;
        width: 100%;
        background-color: var(--bg-color-2);
      }
      &.bottom::after {
        content: "";
        position: absolute;
        bottom: 0px;
        height: calc(100% - 16px - 4px);
        width: 100%;
        background-color: var(--bg-color-2);
      }
    }
  }
}
</style>
