<template>
<button v-focus="focus" :class="['ici-btn',sizeClass,typeClass,shapeClass,
        {'ici-btn-border':plain,
        'ici-btn-raised':relievo,
        'ici-btn-block':long
        }]" :disabled="isdisabled" :type="htmlType" tabindex="0"
        @click="$emit('click',$event)">
  <div class="flex flex-center">
    <f-loading v-if="loading" :disabled="loading" :size="loadingSize" block/>&nbsp;
    <div :class="{'loading-hide':loading}">
      <slot></slot>
    </div>

  </div>
  <transition name="btn-process">
    <div v-if="time>0" :class="typeClass" :style="{transitionDuration: `${time}s`}"
         class="ici-btn-process">{{ time.toFixed(1) }}s
    </div>
  </transition>

</button>
</template>

<script>

export default {
  name: 'a-button',
  data() {
    return {
      loadingSizes: {
        tiny: 'mintiny',
        small: 'tiny',
        large: '',
        jumbo: '',
        giant: 'big',
      },
      time: 0,
    };
  },
  computed: {
    isdisabled() {
      return this.disabled || this.loading || this.time > 0;
    },
    loadingSize() {
      if (this.size && this.loadingSizes[this.size]) {
        return this.loadingSizes[this.size];
      } else {
        return 'small'
      }
    },
    sizeClass() {
      var size = '';
      switch (this.size) {
        case 'tiny':
          size = 'ici-btn-tiny';
          break;
        case 'small':
          size = 'ici-btn-small';
          break;
        case 'large':
          size = 'ici-btn-large';
          break;
        case 'jumbo':
          size = 'ici-btn-jumbo';
          break;
        case 'giant':
          size = 'ici-btn-giant';
          break;
      }
      return size;
    },

    typeClass() {
      var type = '';
      switch (this.type) {
        case 'primary':
          type = 'ici-btn-primary';
          break;
        case 'info':
          type = 'ici-btn-action';
          break;
        case 'warning':
          type = 'ici-btn-highlight';
          break;
        case 'error':
          type = 'ici-btn-caution';
          break;
        case 'inverse':
          type = 'ici-btn-inverse';
          break;
        default :
          type = ''
      }
      return type;
    },
    shapeClass() {
      var shape = '';
      switch (this.shape) {
        case 'rounded':
          shape = 'ici-btn-rounded';
          break;
        case 'pill':
          shape = 'ici-btn-pill';
          break;
        case 'square':
          shape = 'ici-btn-square';
          break;
        case 'box':
          shape = 'ici-btn-box';
          break;
        case 'circle':
          shape = 'ici-btn-circle';
          break;
      }
      return shape;
    },

  },
  props: {
    focus: Boolean,
    disabled: Boolean,
    //原生的type
    htmlType: {
      type: String,
      default: 'button'
    },
    loading: Boolean,
    //按钮大小
    size: {
      type: String,
      default: ''
    },
    //按钮主题类型大小
    type: {
      type: String,
      default: ''
    },
    //按钮形状
    shape: {
      type: String,
      default: ''
    },

    //按钮是否是空心的
    plain: Boolean,

    //开启浮雕
    relievo: Boolean,
    //开启100%长度
    long: Boolean,
  },

  created() {
    this.timeout = 0
  },
  beforeDestroy() {
    clearInterval(this.timeout)
  },
  methods: {
    /*
    * 使用按钮禁用固定时间
    * time {number} 禁用几秒
    * hasClickEvent 是否在结束后，触发点击事件
    * */
    disabledTime(time, hasClickEvent = false) {
      this.time = 0;
      this.$nextTick(() => {
        clearInterval(this.timeout)
        this.time = time;
        this.timeout = setInterval(() => {
          this.time -= 0.2
          if (this.time <= 0) {
            clearInterval(this.timeout)
            if (hasClickEvent) this.$emit('click')
          }
        }, 200)
      })
    },

  },
  components: {}
};
</script>
