<template>
  <button class="cv-button-wrap" :type="type" :size="size" @click="parentClick" :disabled="loadingStatus">
    <view class="cv-button-box">
      <view :class="loadingStatus ? 'cv-button-rotateloop' : ''">
        <up-loading-icon v-if="loadingStatus" size="20"></up-loading-icon>
      </view>
      <slot>{{ text }}</slot>
    </view>
  </button>
</template>
<script>
import mpMixin from '../../libs/mixin/mpMixin.js';
import mixin from '../../libs/mixin/mixin.js';
export default {
  mixins: [mpMixin, mixin],
  name: 'cvBtnBase',
  emits: ['click'],
  props: {
    size: {
      type: [String],
      default: 'default'
    },
    type: {
      type: [String],
      default: 'default'
    },
    click: {
      type: [Function]
    },
    autoLoading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loadingStatus: false
    };
  },
  created() {},
  methods: {
    diyClick() {
      if (typeof this.click == 'function') {
        this.click();
      }
    },
    parentClick(evt) {
      if (this.autoLoading) {
        if (!this.loadingStatus) {
          this.loadingStatus = true;
          this.$emit('click', () => {
            this.loadingStatus = false;
          });
        }
      } else {
        this.$emit('click', evt);
      }
    }
  }
};
</script>
<style>
.cv-button-wrap {
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 15px;
  width: 90%;
}
.cv-button-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.cv-button-wrap:last-child {
  margin-bottom: 0;
}
/* 旋转动画 */
.cv-button-rotateloop {
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1s;
  -moz-transition-property: -moz-transform;
  -moz-transition-duration: 1s;
  -webkit-animation: rotate 1s linear infinite;
  -moz-animation: rotate 1s linear infinite;
  -o-animation: rotate 1s linear infinite;
  animation: rotate 1s linear infinite;
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}
@-o-keyframes rotate {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
</style>
