<style lang="less" scoped>
@import "./index.less";
</style>
<template >
    <div v-bind:style="titleTextWrapStyle">
    <navigator :url="link">
      <a class="cap-title-text">
        <div :class="titleTextWrapClass">
          <div v-if="linkMore" :class="linkMoreClass" :style="linkMoreStyle">
            <template v-if="hasLinkMoreText">
              <span class="cap-title-text__link-text">{{linkText}}</span>
            </template>
            <template v-if="hasLinkMoreArrow">
              <icon name="arrow"></icon>
            </template>
          </div>
          <div class="cap-title-text__content">
            <h1 class="cap-title-text__title" :style="titleStyle">{{title}} </h1>
            <p v-if="desc && desc !== ''" class="cap-title-text__sub">
              <pre class="cap-title-text__desc" :style="descStyle">{{desc}}</pre>
            </p>
          </div>
        </div>
      </a>
    </navigator>
  </div>
</template>
<script>
import navigator from '../navigator'
import icon from '../icon'
export default {
  name: 'title-text',
  components: {
    navigator,
    icon
  },
  /**
   * 组件的属性列表
   */
  props: {
    /**
     * 标题
     */
    title : {
      type: String,
      default: ''
    },
    /**
     * 描述
     */
    desc: {
      type: String, 
      default: ''
    },
    /**
     * 文本对齐 left:左对齐 center:居中  
     */
    textAlign: {
      type: String,
      default: 'center'
    },
    /**
     * 标题字体  big:16  middle:14  small:12
     */
    titleFontSize: {
      type: [String, Number],
      default: '16'
    },
    /**
    * 描述字体  big:16  middle:14  small:12
    */
    descFontSize: {
      type:  [String, Number],
      default: '12'
    },
    
    /**
     * 标题粗细 normal:400:正常字体 bold:500:加粗字体
     */
    titleFontWeight: {
      type:  [String, Number],
      default: '500'
    },
    /**
     * 描述粗细 normal:400:正常字体 bold:500:加粗字体
     */
    descFontWeight: {
      type:  [String, Number],
      default: '400'
    },
    /**
     * 标题颜色
     */
    titleColor: {
      type: String,
      default: '#323233'
    },
    /**
     * 描述颜色
     */
    descColor: {
      type: String, 
      default: '#969799'
    },
    /**
     * 背景颜色
     */
    backgroundColor: {
      type: String, 
      default: '#fffff'
    },
    /**
     * 底部分割线
     */
    divider: {
      type: Boolean,
      default: false
    },
    /**
     * 是否显示查看更多
     */
    linkMore: {
      type:Boolean,
      default:false
    },
    /**
     * 链接名称
     */
    linkText: {
      type: String,
      default: '查看更多'
    },
    /**
     * 链接类型   text:文本  text-arrow:文本加箭头  arrow:箭头
     */
    linkType: {
      type: String, 
      default: 'text'
    },
    /**
     * 跳转链接
     */
    link: {
      type: String,
      default: ''
    }
  },

   /**
   * 组件的初始数据
   */
  data() {
    return {
    };
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
    * 获得加粗字体大小
    * @param fontWeight normal:正常字体 bold:加粗字体
    */
    getFontWeight(fontWeight) {
      if (fontWeight === 'bold') {
        return 500
      }
      return 400
    },
    /**
     * 获得字体大小 
     * @param fontSize  big:16  middle:14  small:12
     */
    getFontSize(fontSize) {
      if (fontSize === 'big') {
        return 16
      }
      if (fontSize == 'small') {
        return 12
      }
      return 14
    }
  },
  watch: {
  },
  computed: {
    /**
     * 
     */
    titleTextWrapClass () {
      var titleTextWrapClass = ' cap-title-text-wrap '
      if(this.textAlign === 'center'){
        titleTextWrapClass += ' cap-title-text-wrap--center '
      } else if (this.textAlign === 'left') {
        titleTextWrapClass += ' cap-title-text-wrap--left '
      }

      if(this.divider) {
        titleTextWrapClass += 'cap-title-text-wrap--has-divider '
      }

      return titleTextWrapClass
    },
    titleTextWrapStyle () {
      var style = '';
      if( this.backgroundColor != ''){
        style += `background-color:${this.backgroundColor}`
      }
      return style;
    },
    /**
     * 标题样式
     */
    titleStyle () {
      // 字体大小
      var titileStyle =  `font-size:${this.titleFontSize}px;`
      // 字体是否加粗
      titileStyle += `font-weight:${this.titleFontWeight};`
      // 字体颜色
      titileStyle += `color:${this.titleColor};`
      
      return titileStyle
    },
    /**
     * 描述样式
     */
    descStyle () {
      // 字体大小
      var descStyle = `font-size:${this.descFontSize}px;`
      // 字体是否加粗
      descStyle +=`font-weight:${this.descFontWeight};`
      // 字体颜色
      descStyle +=`color:${this.descColor};` 

      return descStyle
    },
    /**
     * 查看更多style
     */
    linkMoreStyle () {
      if(this.textAlign == 'left'){
        return ' height: 22px;'
      }
      return ''
    },
    /**
     * ”查看更多“的class
     */
    linkMoreClass () {
      var linkMoreClass = ' cap-title-text__link '
      if(this.linkType ===  'text'){
        linkMoreClass += ' cap-title-text__link--only-text '
      }
      return linkMoreClass
    },
    /**
     * 是否“查看更多”的箭头
     */
    hasLinkMoreArrow () {
      if (this.linkType === 'text') {
        return false
      }
      return true
    },
    /**
     * 是否“查看更多”的文字
     */
    hasLinkMoreText () {
      if (this.linkType === 'arrow') {
        return false
      }
      return this.linkMore
    }
  }
};
</script>