<template>
  <view :class="getIconName" :style="getStyle" @click="handleClick"></view>
</template>
<script>
  import helper from "@/utils/helper";
  import {mapActions} from "vuex";

  /**
   * XdFontIcon 全局Ui
   * @description 兼容iconfont图标功能
   * @tutorial
   * @property {Number} size          图标大小（可选） 默认：40rpx
   * @property {Number|String} width  图标宽度（可选）
   * @property {Number|String} height 图标高度（可选）
   * @property {String} icon          图标样式名字  默认为 : xxxiconfont xxx
   * @property {String} textShadow    启动文字阴影功能，其值与css原生属性保存一直，例如：0,0,10px rgba(0,0,0,0.5)
   * @property {String} gradualColor  启动ICON线性渐变 其值与css原生属性保存一直, 例如：rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%
   * @property {String} isGradual     是否启用线性渐变 默认值：false
   * @property {String} gradualType   线性渐变类型  默认值：to right （to right 左右），（to right 左右），（135deg  左上到右下），（45deg 左下到右上（角度））
   * @event {Function} click          点击是事件
   */
  export default {
    name: "XdFontIcon",
    props:{
      size: {
        type: Number|String,
        default: 40
      },
      width: {
        type: Number | String,
        default: '',
      },
      height: {
        type: Number | String,
        default: '',
      },
      color: {
        type: String,
        default: '',
      },
      icon: {
        type:String,
        required: true
      },

      /**仅支持线性渐变******/
      textShadow: {
        type: String,
        default: ''
      },
      //rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%
      gradualColor: {
        type: String,
        default: '',
      },
      isGradual: {
        type: Boolean,
        default: false,
      },
      //63deg
      gradualType: {
        type: String,
        //to right 左右
        //to bottom 上下
        //135deg  左上到右下（角度）
        //45deg 左下到右上（角度）
        default: 'to right',
      }
      /**仅支持线性渐变******/
    },
    data(){
      return {
        isLandScape: false, //false=>竖屏 true=>横屏
        rpxNum: null,
        pxNum: null,
      }
    },
    created() {
      if(typeof this.pushIconfontLog === 'function') {
        this.pushIconfontLog(this.icon)
      }
    },

    computed: {
      /**
       * @description 线性渐变 与 阴影
       * @returns {string}
       */
      getBGGradient(){
        let temp = '';
        if(this.textShadow) {
          temp += `;text-shadow:${this.textShadow}`
        }
        if(this.isGradual && this.gradualColor && this.gradualType) {
          temp += `;background: linear-gradient(${this.gradualType}, ${this.gradualColor})`;
          temp += ';-webkit-background-clip: text';
          temp+= ';-webkit-text-fill-color: transparent'
        }
        return temp;
      },

      /**
       * @description 宽高 与 文字大小
       * @returns {string}
       */
      getWidthAndHeightAndSize(){
        let temp = '';
        if (this.size) {
          let size = this.size;
          if (helper.checkVarType(this.size) === 'string') {
            size = Number(this.size);
          }
          if(this.$configProject && this.$configProject.isPreview) {
            size = this.size;
          }
          else {
            size = this.$isPortrait ? size : size / this.$portrait;
          }

          temp += `font-size:${size}rpx`;
        }
        if(this.width) {
          let width = this.width;
          if(helper.checkVarType(this.width) === 'string') {
            width = Number(this.width);
          }
          temp += `;width:${width}rpx`;
        }
        if (this.height) {
          let height = this.height;
          if (helper.checkVarType(this.height) === 'string') {
            height = Number(this.height);
          }
          temp += `;height:${height}rpx`;
        }

        return temp;
      },

      getStyle(){
        let style = this.getWidthAndHeightAndSize;
        if (this.color) style += `;color:${this.color}`;
        style += `${this.getBGGradient}`;
        return style
      },

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

    methods:{
      ...mapActions(['pushIconfontLog']),
      handleClick(e){
        this.$emit('click',e)
      }
    }

  }
</script>

<style lang="less">
 @import "css/icon.less";

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