<template>
  <div ref="button" class="button v-button relative"
       :class="{
          'button-disabled': disabled || buttonStatus === constStatus.loading,
          'button-disabled-active': buttonStatus === constStatus.success
       }"
    :style="{width: width}"
    @click.stop="trigger"
  >
    <!--  加载状态   -->
    <div class="v-button-loading screen center"
         v-if="buttonStatus === constStatus.loading"
    >
      <slot name="loading">
        <svg class="screen" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve">
            <path fill="#fff" d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
              <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite"></animateTransform>
          </path>
        </svg>
      </slot>
    </div>

    <!--  常规状态  -->
    <div
        v-else
        class="screen center"
    >
      <slot>
        按钮
      </slot>
    </div>

    <!--  成功状态  -->
    <div
      v-if="buttonStatus === constStatus.success"
      class="absolute v-button-success screen center"
    >
      <slot name="success">
        <div
            class="center v-button-target"
            :style="{background:successColor}"
            :class="['v-button-success-'+(!loadingSize?'animate':'default'),exit?'v-button-success-out':'']"
        >{{successText}}</div>
      </slot>
    </div>

    <!--  失败状态  -->
    <div
        v-else-if="buttonStatus === constStatus.fail"
        class="absolute v-button-success screen center"
    >
      <slot name="fail">
        <div
            class="center v-button-target"
            :style="{background:failColor}"
            :class="['v-button-success-'+(!loadingSize?'animate':'default'),exit?'v-button-success-out':'']"
        >{{failText}}</div>
      </slot>
    </div>



  </div>
</template>

<script>
import mixins from '../mixins';
import props from '../props';
export default {
  name: "v-button",

  data(){
    return {
      buttonSize:{}
    }
  },

  methods:{
    setSize(){
      this.buttonSize = {
        width: this.$refs.button.offsetWidth,
        height: this.$refs.button.offsetHeight
      };
    }
  },

  mounted() {
    this.setSize();
  },

  mixins,

  props

}
</script>

<style scoped lang="scss" src="../style.scss"></style>