<template>
  <div class="ht-divider" :class="{ 'ht-divider-mobile ': isMobile }">
    <template v-if="dividerStyle === 'diamondDashed'">
      <div class="ht-divider__sep-style">
        <div class="ht-divider__diamond">
          <div
            class="ht-divider__diamond-label"
            :style="{ ...getTitleStyle, backgroundColor: color }"
          >
            <span>{{ content }}</span>
          </div>
          <div class="ht-divider__diamond-right">
            <div
              class="ht-divider__diamond-triangle"
              :style="{ backgroundColor: color }"
            ></div>
            <div
              class="ht-divider__diamond-right-line"
              :style="{ borderColor: color, opacity: 0.16 }"
            ></div>

            <div>
              <div
                class="ht-divider__diamond-parallelogram1"
                :style="{ backgroundColor: color }"
              ></div>
              <div
                class="ht-divider__diamond-parallelogram2"
                :style="{ backgroundColor: color }"
              ></div>
              <div
                class="ht-divider__diamond-parallelogram3"
                :style="{ backgroundColor: color }"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else-if="dividerStyle === 'leftTag'">
      <div
        class="ht-divider__leftTag"
        :style="{ ...getTitleStyle, '--leftTag-line-color': color }"
      >
        {{ content }}
      </div>
    </template>
    <template v-else-if="dividerStyle === 'diamondCenter'">
      <div class="ht-divider__sep-style">
        <div
          class="ht-divider__diamondCenter"
          :style="{
            justifyContent:
              contentPosition == 'left'
                ? 'start'
                : contentPosition == 'right'
                ? 'end'
                : 'center',
          }"
        >
          <div class="ht-divider__left-wrapper" :style="{ color: color }"></div>
          <div
            class="ht-divider__diamondCenter-label"
            :style="{ ...getTitleStyle, backgroundColor: color }"
          >
            {{ content }}
          </div>
          <div
            class="ht-divider__right-wrapper"
            :style="{ color: color }"
          ></div>
          <div
            class="ht-divider__diamondCenter-line"
            :style="{ color: color, opacity: 0.16 }"
          ></div>
        </div>
      </div>
    </template>
    <template v-else-if="dividerStyle === 'bottomTag'">
      <div :style="{ ...getTitleStyle, textAlign: contentPosition }">
        {{ content }}
      </div>
      <div class="ht-divider__sep-style">
        <div class="ht-divider__bottomTag">
          <div class="ht-divider__bottomTag-bg-wrapper">
            <div
              class="ht-divider__bottomTag-bg"
              :style="{ borderColor: color, opacity: 0.16 }"
            ></div>
          </div>
          <div
            class="ht-divider__bottomTag-label"
            :style="{
              backgroundColor: color,
              left:
                contentPosition === 'left'
                  ? 0
                  : contentPosition === 'center'
                  ? '50%'
                  : 'inherit',
              right: contentPosition === 'right' ? 0 : 'inherit',
              transform: `translate(${
                contentPosition === 'center' ? '-50%' : '0'
              }, 0)`,
            }"
          >
            <span>{{ content }}</span>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div :style="{ ...getTitleStyle, textAlign: contentPosition }">
        {{ content }}
      </div>
      <div class="ht-divider__sep-style">
        <div class="ht-divider__thin" :style="{ borderColor: color }"></div>
      </div>
    </template>
  </div>
</template>
<script>
  import mobileMode from '@/mixins/mobileMode.js'

  export default {
    name: 'HtDivider',
    mixins: [mobileMode],
    props: {
      content: {
        //分割线内容
        type: String,
        default: '',
      },
      direction: {
        //分割线方向
        type: String,
        default: 'horizontal',
        validator: function (value) {
          return ['horizontal', 'vertical'].indexOf(value) !== -1
        },
      },
      dividerStyle: {
        //分割线样式
        type: String,
        default: 'diamondCenter',
      },
      contentPosition: {
        //分割线内容位置
        type: String,
        default: 'center',
        validator: function (value) {
          return ['left', 'right', 'center'].indexOf(value) !== -1
        },
      },
      color: {
        //分割线颜色
        type: String,
        default: '#DCDFE6',
      },
      titleStyle: {
        //文字样式
        type: [Object, String],
      },
    },
    computed: {
      getTitleStyle: function () {
        if (this.titleStyle && typeof this.titleStyle === 'string') {
          return JSON.parse(this.titleStyle)
        } else if (this.titleStyle && typeof this.titleStyle === 'object')
          return this.titleStyle
        else
          return {
            color: '',
            'font-weight': '', // bold
            'font-style': '', // 斜体 italic
            'text-decoration': '', //下划线 underline
            'font-size': '14px', //大小
          }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .ht-divider-mobile {
    padding: 5px 0;
  }
  @mixin ht-divider {
    .ht-divider {
      @content;
    }
  }
  @include ht-divider {
    margin: 0 4px;

    .ht-divider__leftTag {
      position: relative;
      padding-left: 10px;
      &::before {
        content: '';
        background-color: var(--leftTag-line-color, #409eff);
        width: 4px;
        height: 18px;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -9px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
      }
    }
    .ht-divider__sep-style {
      .sep-line {
        height: 0;
      }
      .ht-divider__none {
        border: none;
      }
      .ht-divider__dashed {
        border-top: 1px dashed;
      }
      .ht-divider__thin {
        border-top: 1px solid;
      }
      .ht-divider__thick {
        border-top: 2px solid;
      }
      .ht-divider__diamond {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 28px;
        position: relative;
        .ht-divider__diamond-label {
          -webkit-box-flex: 0;
          -webkit-box-sizing: content-box;
          box-sizing: content-box;
          -ms-flex: none;
          flex: none;
          height: 100%;
          line-height: 28px;
          overflow: hidden;
          padding: 0 12px;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .ht-divider__diamond-right {
          -webkit-box-flex: 1;
          -ms-flex: auto;
          flex: auto;
          position: relative;
        }
        .ht-divider__diamond-right-line {
          border-bottom: 3px solid;
          bottom: 0;
          height: 0;
          left: 0;
          position: absolute;
          right: 0;
        }
        .ht-divider__diamond-parallelogram1 {
          height: 22px;
          left: 15px;
          opacity: 0.9;
          position: absolute;
          top: 0;
          -webkit-transform: skew(26deg) translateX(-50%);
          transform: skew(26deg) translateX(-50%);
          width: 8px;
        }
        .ht-divider__diamond-parallelogram2 {
          height: 22px;
          left: 27px;
          opacity: 0.6;
          position: absolute;
          top: 0;
          -webkit-transform: skew(26deg) translateX(-50%);
          transform: skew(26deg) translateX(-50%);
          width: 8px;
        }
        .ht-divider__diamond-parallelogram3 {
          height: 22px;
          left: 39px;
          opacity: 0.3;
          position: absolute;
          top: 0;
          -webkit-transform: skew(26deg) translateX(-50%);
          transform: skew(26deg) translateX(-50%);
          width: 8px;
        }
        .ht-divider__diamond-triangle {
          height: 100%;
          -webkit-transform: skew(26deg) translateX(-50%);
          transform: skew(26deg) translateX(-50%);
          width: 15px;
        }
      }

      .ht-divider__bottomTag {
        height: 8px;
        position: relative;
        .ht-divider__bottomTag-label {
          border-radius: 0 8px;
          bottom: 0;
          left: 0;
          overflow: hidden;
          position: absolute;
          text-overflow: ellipsis;
          top: 0;
          white-space: nowrap;
          > span {
            visibility: hidden;
          }
        }
        .ht-divider__bottomTag-bg-wrapper {
          bottom: 0;
          left: 0;
          padding-left: 8px;
          position: absolute;
          right: 0;
          .ht-divider__bottomTag-bg {
            border-bottom: 4px solid;
            height: 0;
            width: 100%;
          }
        }
      }

      .ht-divider__diamondCenter {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 28px;
        justify-content: center;
        overflow: hidden;
        position: relative;
        .ht-divider__left-wrapper {
          width: 0;
          height: 0;
          border-top: 14px solid transparent;
          border-bottom: 14px solid transparent;
          border-right: 14px solid;
        }
        .ht-divider__diamondCenter-label {
          height: 100%;
          line-height: 28px;
          padding: 0 1px;
          text-align: center;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .ht-divider__right-wrapper {
          width: 0;
          height: 0;
          border-top: 14px solid transparent;
          border-bottom: 14px solid transparent;
          border-left: 14px solid;
        }
        .ht-divider__diamondCenter-line {
          border-top: 1px solid;
          width: 100%;
          position: absolute;
          top: 50%;
        }
      }

      .ht-divider__sep-desc {
        font-size: 14px;
        line-height: 1.4;
        margin-top: 2px;
      }
    }
    .drop-item {
      margin-bottom: 30px;
    }
  }
</style>
