<template>
  <div class="title2">
    <div v-show="$slots.default" :style="bgStyle" class="title2_bg">
      <span :style="textStyle"><slot/></span>
    </div>
    <img :src="require('@/assets/overview/highlight.png')" class="highlight"/>
  </div>
</template>
<script>
export default {
  name: 'Title2',
  props: {
    options: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      defaultOptions: {
        colors: ['#ffffff', '#ffffff'],
        bgColors: ['#ffffff', '#ffffff', '#ffffff']
      },
      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;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /*border-bottom: 1px solid #4b5ff7;*/
    .title2_bg {
      /*background: linear-gradient(to right, #00f5ff, #4b5ff7);*/
      padding: 0px;
      display: block;
      text-align: center;
      span {
        color: #ffffff;
        text-align: center;
        font-size: 1rem;
        font-weight: bolder;
        line-height: 2rem;
      }
    }
    .highlight{
      width:100%;
      height:1px;
    }
  }
</style>