<template>
  <div :class="dividerClass" :style="dividerStyle">
    <div class="divider-inner-text">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'DividerTool',
    data () {
      return {}
    },
    props: {
      // 是否虚线
      dashed: {
        type: Boolean,
        default: false
      },
      // 分割线标题的位置
      orientation: {
        type: String,
        default: 'center'
      },
      // 分割线高度
      height: {
        type: String,
        default: '1'
      }
    },
    computed: {
      dividerClass () {
        let dividerClass = ['divider-tool'];
        // 横线有title
        if (this.$slots.default) {
          dividerClass.push('divider-with-text');
          switch (this.orientation) {
            case 'right':
              dividerClass.push('divider-with-text-right');
              break;
            case 'left':
              dividerClass.push('divider-with-text-left');
              break;
            default:
              break;
          }
        }
        return dividerClass;
      },
      dividerStyle () {
        if (this.dashed === true) {
          return {
            height: this.height + 'px'
          }
        } else {
          return {
            height: this.height + 'px'
          }
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .page-body {
    .divider-tool {
      margin-left: -20px;
      margin-right: -20px;
    }
  }

  .divider-tool {
    display: block;
    clear: both;
    min-width: 100%;
    height: 1px;
    border: 10px;
    position: relative;
    top: -0.06em;
    vertical-align: middle;
    color: rgba(0, 0, 0, 0.65);
    background: #f0f2f5;
    font-feature-settings: 'tnum';
    list-style: none;
    line-height: 1.5;
    font-size: 14px;
    font-variant: tabular-nums;
    margin: 20px 0px;
    padding: 0;
    .divider-inner-text {
      display: inline-block;
      padding: 0 14px;
      font-weight: 500;
      font-size: 16px;
      color: darkgray;
      white-space: nowrap;
      text-align: center;
    }
  }

  .divider-with-text {
    display: table;
    margin: 16px 0;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 16px;
    white-space: nowrap;
    text-align: center;
    background: transparent;
  }

  .divider-with-text::before, .divider-with-text::after {
    position: relative;
    top: 50%;
    display: table-cell;
    width: 50%;
    border-top: 1px solid #e8e8e8;
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
    transform: translateY(50%);
    content: '';
  }

  .divider-with-text-left {
    text-align: left;
  }

  .divider-with-text-left::before, .divider-with-text-right::after {
    top: 50%;
    width: 5%;
  }

  .divider-with-text-left::after, .divider-with-text-right::before {
    top: 50%;
    width: 95%;
  }

  .divider-with-text-right {
    text-align: right;
  }

  .divider-dashed {
    background: none;
    border: 1px dashed #f0f2f5;
  }
</style>
