<!--
 * @Description: 普通标题
 * @Author: 王晓颖
 * @Date: 2020-08-10 11:32:02
 -->
<template>
  <div class="title-box" :class="borderStyle" :style="{'justify-content':center?'center':'left'}">
    <span :style="fontStyle"><slot></slot></span>
  </div>
</template>

<script>
export default {
  name: 'Title1',
  props: {
    level: {
      type: String,
      default: ''
    },
    center: {
      type: Boolean,
      default: false
    },
    font: {
      type: Object,
      default: () => {
        return {
        }
      }
    }, // 文字样式
    border: {
      type: String,
      default: ''
    } // 边框
  },
  data () {
    return {
      defaultFont: {
        family: 'Microsoft YaHei',
        size: '',
        color: '',
        color2: '',
        color3: '',
        weight: 'bold'
      }
    }
  },
  computed: {
    // 文字样式
    fontStyle () {
      const font = Object.assign(this.defaultFont, this.font)
      const style = {}
      if (font.color && font.color2 && font.color3) {
        style['background'] = `linear-gradient(to right, ${font.color}, ${font.color2}, ${font.color3})`
        style['-webkit-background-clip'] = 'text'
        style['color'] = 'transparent'
      } else if (font.color && font.color2) {
        style.background = `linear-gradient(to right, ${font.color}, ${font.color2})`
        style['-webkit-background-clip'] = 'text'
        style['color'] = 'transparent'
      } else if (font.color) {
        style['color'] = font.color
        style['background'] = 'transparent'
        style['-webkit-background-clip'] = 'border-box'
      } else {

      }
      if (font.family) {
        style['font-family'] = font.family
      }
      if (font.size) {
        style['font-size'] = font.size + 'rem'
      } else if (this.level) {
        switch (this.level) {
          case '1':
            style['font-size'] = '40px'
            break
          case '2':
            style['font-size'] = 0.18 + 'rem'
            break
          case '3':
            style['font-size'] = 0.12 + 'rem'
            break
          default:
            style['font-size'] = 0.12 + 'rem'
            break
        }
      }
      if (font.weight) {
        style['font-weight'] = font.weight
      }
      return style
    },
    // 边框样式
    borderStyle () {
      if (this.border === 't1') {
        return 'box1'
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../../assets/css/variable.scss';
  .title-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      background: $gradientText;
      -webkit-background-clip: text;
      color: transparent;
      font-size: 0.12rem;
      font-weight: bold;
    }
  }
  .box1 {
    background: url("../../../assets/images/title.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: auto 100%;
    margin-bottom: 0.05rem;
  }
</style>