<template>
  <i :class="getIconName" :style="getStyle" @click="handleClick"></i>
</template>
<script>
  /**
   * @description 兼容iconfont图标功能
   * @tutorial
   * @property {Number} size          图标大小（可选） 默认：32rpx
   * @property {Number|String} width  图标宽度（可选）
   * @property {Number|String} height 图标高度（可选）
   * @property {String} icon          图标样式名字 默认为:xxxiconfont xxx
   *
   * @event {Function} click          点击是事件
   */
  export default {
    name: "XdFontIcon",
    props:{
      size: {
        type: Number|String,
        default: 16
      },
      width: {
        type: Number | String,
        default: '',
      },
      height: {
        type: Number | String,
        default: '',
      },
      color: {
        type: String,
        default: '',
      },
      icon: {
        type:String,
        required: true
      }
    },
    data(){
      return {
        isLandScape: false, //false=>竖屏 true=>横屏
        rpxNum: null,
        pxNum: null,
      }
    },
    created() {

    },

    computed: {
      getStyle(){
        let fontSize = this.size;
        let width = this.width;
        let height = this.height;
        let color = this.color;


        if(fontSize && this.$xdHelper.checkVarType(fontSize) === 'string') {
           fontSize = Number(fontSize);
        }

        if (width && this.$xdHelper.checkVarType(width) === 'string') {
          width = Number(width);
        }

        if (height && this.$xdHelper.checkVarType(height) === 'string') {
          height = Number(height);
        }
        let style = `font-size:${fontSize}px`;
        if (width) {
          style = `${style};width:${width}px`;
        }
        if (height) {
          style = `${style};height:${height}px`;
          style = `${style};line-height:${height}px`;
        }


        if (color) {
          style = `${style};color:${color}`;
        }
        return style
      },

      getIconName(){
        let icon = this.icon.split(' ');
        let iconClass = `xd-iconfont iconfont ${this.icon}`;
        if(icon.length > 1) {
          iconClass = `xd-iconfont ${this.icon}`
        }
        return iconClass;
      }
    },

    methods:{
      handleClick(e){
        this.$emit('click',e)
      }
    }

  }
</script>

<style lang="scss">
 .xd-iconfont {
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: normal;
   box-sizing: border-box;
 }
</style>
