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

<script>
  import {forEach, get, fill} from 'lodash';
  import {createNamespacedHelpers} from 'vuex';
  const {mapActions} = createNamespacedHelpers('user');

  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: '#d90025',         // btn选中状态字体颜色（不设置默认与非选中一致）
    iconFontSize: 48,                 // icon字号（单位px）
    textSelectedColor: '#444',        // text选中状态字体颜色（不设置默认与selectedColor一致）
    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],
      articleId: Number,
      commentId: Number,
      option: {
        type: Object,
        default() {
          return defaultOption;
        }
      }
    },
    data() {
      return {

        btnSelected: false,
        actionClass: '',
        editText: null
      }
    },
    created() {
      forEach(defaultOption, (value, key) => {
        if (!this.option.hasOwnProperty(key)) {
          this.option[key] = value;
        }
      });
    },
    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._icon) {
          this._type = classMap[this.type] ? this.type : 'fav'
          this._icon = classMap[this._type];
        }

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

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

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

        let textAlign = this.option.textAlign;

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

        let textZoom = this.option.textZoom;

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

        if (this.option.textSelectedColor) {
          style += ` color: ${this.option.textSelectedColor};`
        }

        return style;
      },
      viewText() {
        return `${this.editText === null ? this.text : this.editText}`;
      },
      placText() {
        if (!isNaN(Number(this.text)) && this.viewText.length) {
          return fill(Array(this.viewText.length), 0).join('');
        } else  {
          return `${this.text}`;
        }
      }
    },
    methods: {
      ...mapActions(['followArticle', 'praiseArticle', 'praiseComment']),
      pxToRem(px) {
        const rootValue = 40;

        if (typeof px !== 'number') {
          px = parseInt(`0${px}`);
        }

        if (px > 2) {
          return (px / rootValue).toFixed(2) + 'rem';
        } else {
          return px + 'px';
        }
      },
      changeBtnStatus() {
        this.btnSelected = !this.btnSelected;

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

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

        if (this._icon.selected) {
          this.actionClass = this.btnSelected ? this._icon.selected : this._icon.default;
        }
      },
      syncService(type, data) {
        if (typeof this[type] === 'function') {
          return this[type](data);
        } else {
          return Promise.resolve({code: 404});
        }
      },
      onClick(evt) {
        if (this.syncing) {
          return;
        }

        if (this.option.canSelect) {
          this.changeBtnStatus();

          let syncFnName = '';

          if (this.articleId) {
            if (this._type === 'fav') {
              syncFnName = 'praiseArticle';
            } else if (this._type === 'star') {
              syncFnName = 'followArticle';
            }
          } else if (this.commentId && this._type === 'fav') {
            syncFnName = 'praiseComment';
          }

          if (syncFnName && this.$auth()) {

            const backFn = (res) => {
              this.syncing = false;

              if (res.code !== 200) {
                this.changeBtnStatus();
              }

              if (res.code === 401) {
                // TODO go_login
              }
            };

            this.syncing = true;

            this.syncService(syncFnName, {
              articleId: this.articleId,
              commentId: this.commentId,
              status: this.btnSelected
            }).then(backFn).catch(backFn);
          }
        }

        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 {
      position: relative;

      .view-text {
        position: absolute;
      }

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