<template>
  <div class="title2">
    <span v-show="$slots.default" :style="bgStyle" class="title2_bg">
      <span :style="textStyle"><slot/></span>
    </span>
  </div>
</template>
<script>
export default {
  name: 'Title2',
  props: {
    options: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      defaultOptions: {
        colors: ['#0921a1', '#4b5ff7'],
        bgColors: ['rgba(2, 8, 54, 0.1)', '#0a1a7b', 'rgba(2, 8, 54, 0.1)']
      },
      mergedOptions: {}
    }
  },
  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
    }
  },
  mounted() {
    this.mergeOptions()
  },
  methods: {
    // 合并配置项
    mergeOptions() {
      this.mergedOptions = Object.assign(this.defaultOptions, this.options)
      // const bgcolors = this.mergedOptions.bgColors
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .title2 {
    height: 2rem;
    border-bottom: 1px solid #4b5ff7;
    .title2_bg {
      /*background: linear-gradient(to right, #00f5ff, #4b5ff7);*/
      padding: 0rem 3rem 0rem 0.5rem;
      display: inline-block;
      span {
        /*background: linear-gradient(to right, #00f5ff, #4b5ff7);*/
        background: linear-gradient(to right, #0921a1, #4b5ff7);
        -webkit-background-clip: text;
        color: transparent;
        font-size: 1rem;
        font-weight: bolder;
        line-height: 2rem;
      }
    }
  }
</style>