<template>
  <div class="title2">
    <span v-show="$slots.default" class="title2_bg" :style="bgStyle">
      <span :style="textStyle"><slot/></span>
    </span>
  </div>
</template>
<script>
export default {
  name: 'Title2',
  props: {
    options: {
      type: Object,
      default: () => { return {} }
    }
  },
  data () {
    return {
      defaultOptions: {
        colors: ['#00f5ff', '#4b5ff7'],
        bgColors: ['rgba(2, 8, 54, 0.1)', '#0a1a7b', 'rgba(2, 8, 54, 0.1)']
      },
      mergedOptions: {}
    }
  },
  mounted () {
    this.mergeOptions()
  },
  computed: {
    textStyle () {
      const options = Object.assign(this.defaultOptions, this.options)
      const colors = options.colors
      let colorStr = ''
      if (colors.length === 1) {
        colorStr = colors[0]
      } else if (colors.length > 1) {
        colorStr = 'linear-gradient(to right,'
        colorStr += colors.join(',')
        colorStr += ')'
      }
      const style = {
        'background': colorStr,
        'color': 'transparent',
        '-webkit-background-clip': 'text'
      }
      return style
    },
    bgStyle () {
      const options = Object.assign(this.defaultOptions, this.options)
      const bgcolors = options.bgColors
      let colorStr = ''
      if (bgcolors.length === 1) {
        colorStr = bgcolors[0]
      } else if (bgcolors.length > 1) {
        colorStr = 'linear-gradient(to right,'
        colorStr += bgcolors.join(',')
        colorStr += ')'
      }
      const style = {
        'background-color': colorStr
      }
      return style
    }
  },
  methods: {
    // 合并配置项
    mergeOptions () {
      this.mergedOptions = Object.assign(this.defaultOptions, this.options)
      // const bgcolors = this.mergedOptions.bgColors
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../../assets/css/variable.scss';
  .title2 {
    margin-bottom: 0.06rem;
    height: 0.14rem;
    .title2_bg {
      background: $gradientBgThree;
      padding: .02rem 0.3rem 0.02rem 0.13rem;
      display: inline-block;
      span {
        background: $gradientTextThree;
        -webkit-background-clip: text;
        color: transparent;
        font-size: 0.12rem;
        font-weight: bold;
        line-height: 0.12rem;
        height:0.12rem;
      }
    }
  }
</style>