<template>
  <div class="icon-btn" @click="onClick" :style="btnStyle">
    <i class="iconfont" :class="iconClass" :style="iconStyle"></i>
    <p v-if="text" class="icon-btn-text" :style="textStyle">
      <span class="view-text">{{viewText}}</span>
      <span class="placeholder-text">{{text}}</span>
    </p>
  </div>
</template>

<script>
  import { pxToRem } from '../../../utils/helpers.js';

  const classMap = {
    fav: {
      default: 'icon-zan',
      selected: 'icon-zan-fill'
    },
    star: {
      default: 'icon-star',
      selected: 'icon-star-fill'
    },
    share: {
      default: 'icon-share'
    },
    msg: {
      default: 'icon-msg'
    }
  };

  const defaultOption = {
    canSelect: true,                  // 是否支持选中
    selected: false,                  // 初始选中状态（不受是否支持选中控制）
    color: '#444',                    // btn字体颜色
    selectedColor: '#444',            // btn选中状态字体颜色（不设置默认与非选中一致）
    iconFontSize: 48,                 // icon字号（单位px）
    textFontSize: 20,                 // text字号（单位px）
    textAlign: 'top',                 // text位置, 默认normal（支持normal, top, bottom）
    textZoom: 0.9,                    // text缩放
    textAutoChange: true,            // text自动增减，只支持number类型（受是否支持选中控制）
    emitName: ''                      // 点击触发事件名称
  };

  export default {
    name: 'WidgetIconBtn',
    props: {
      type: {
        type: String,
        default: 'fav'
      },
      text: [String, Number],
      option: {
        type: Object,
        default() {
          return defaultOption;
        }
      }
    },
    data() {
      return {
        btnSelected: false,
        actionClass: '',
        editText: null
      }
    },
    computed: {
      btnStyle() {
        let color = this.option.color || defaultOption.color;

        return `color: ${this.btnSelected ? (this.option.selectedColor || color) : color};`;
      },
      iconClass() {
        if (this.actionClass) {
          return this.actionClass;
        }

        if (!this.iconObj) {
          this._icon = classMap[this.type] || classMap.fav;
        }

        if (this.option.selected) {
          this.btnSelected = true;

          return this._icon.selected || this._icon.default;
        }

        return this._icon.default;
      },
      iconStyle() {
        return `font-size: ${pxToRem(this.option.iconFontSize || defaultOption.iconFontSize)};`;
      },
      textStyle() {
        let style = `font-size: ${pxToRem(this.option.textFontSize || defaultOption.textFontSize)};`;

        let textAlign = this.option.textAlign || defaultOption.textAlign;

        if (['top', 'bottom'].indexOf(textAlign) >= 0) {
          style += ` vertical-align: ${textAlign};`;
        }

        let textZoom = this.option.textZoom || defaultOption.textAlign;

        if (Number(textZoom) !== NaN) {
          style += `transform: scale(${textZoom}, ${textZoom});`
        }

        return style;
      },
      viewText() {
        return this.editText === null ? this.text : this.editText;
      }
    },
    methods: {
      onClick(evt) {
        if (this.option.canSelect) {
          this.btnSelected = !this.btnSelected;

          if (this.option.textAutoChange) {
            let _text = this.editText || this.text;

            if (Number(this.viewText) !== NaN) {
              this.editText = Number(this.viewText) + (this.btnSelected ? 1 : -1);
            }
          }

          if (this._icon.selected) {
            this.actionClass = this.btnSelected ? this._icon.selected : this._icon.default;
          }
        }

        this.option.emitName && this.$emit(this.option.emitName, evt);
      }
    },
  };
</script>

<style type="scss">
  .icon-btn {
    display: inline-block;
    line-height: 1;
    vertical-align: middle;

    > * {
      display: inline-block;
      vertical-align: middle;
    }

    .icon-btn-text {
      line-height: 1.3;
      position: relative;

      .view-text {
        position: absolute;
      }

      .placeholder-text {
        opacity: 0;
      }
    }
  }
</style>