<template>
  <button
    class="onestop-new-button"
    @click="handleClick"
    :disabled="buttonDisabled || loading"
    :type="'button'"
    :autofocus="autofocus"
    :style="[onestopBorderRadius, onestopPadding, onestopLineHeight,onestopBorderColor,onestopBorderWidth, onestopTextAlign, onestopMaxWidth]"
    :class="[
      type ? 'onestop-new-button--' + type : '',
      {
        'is-disabled': buttonDisabled,
        'is-custom': custom || icon
      },
    ]"
  >
    <div class="content-box">
      <svg class="circular"   v-if="loading">
        <circle class="path" cx="8" cy="8" r="7" fill="none" :style="[onestopStroke]"/>
      </svg>
      <onestop-icon :iconName="icon" v-if="icon && !custom" class="custom-icon"></onestop-icon>
      <span v-if="!icon && custom"  class="custom-icon"><slot></slot></span>
      <span v-if="$slots.default  && !icon && !custom"><slot></slot></span>
    </div>
  </button>
</template>
<script>
import { CONFIG } from './index';
// import onestopFont from "../../font/src/font.vue";
import OnestopIcon from 'packages/icon';
export default {
  name: "OnestopNewButton",
  inject: {
    onestopForm: {
      default: ''
    },
    onestopFormItem: {
      default: ''
    }
  },
  components: {OnestopIcon},
  computed: {
    buttonDisabled() {
      return this.$options.propsData.hasOwnProperty('disabled') ? this.disabled : (this.onestopForm || {}).disabled;
    },
    onestopBorderRadius () {
      if (this.borderRadius || this.borderRadius == 0) {
        return { 'border-radius': this.borderRadius + 'px'}
      }
    },
    onestopPadding () {
      if (this.padding) {
        return { 'padding': this.padding}
      }
    },
    onestopLineHeight () {
      if (this.lineHeight) {
        return { 'line-height': this.lineHeight + 'px'}
      }
    },
    onestopBorderColor () {
      if (this.borderColor) {
        return { 'border-color': this.borderColor}
      }
    },
    onestopBorderWidth () {
      if (this.borderWidth) {
        return { 'border-width': this.borderWidth + 'px'}
      }
    },
    onestopTextAlign () {
      if (this.textAlign) {
        return { 'text-align': this.textAlign}
      }
    },
    onestopMaxWidth () {
      if (this.maxWidth) {
        return { 'max-width': this.maxWidth + 'px'}
      }
    },
    onestopStroke () {
      return {'stroke': CONFIG[this.type]}
    }
  },
  props: {
    nativeType: {
      type: String,
      default: 'button'
    },
    type: {
      type: String,
      default: "default",
    },
    loading: {
      type:Boolean,
      default: false
    },
    disabled: {
      type:Boolean,
      default: false
    },
    borderRadius: Number,
    // 图标类名这时没有文案
    icon: {
      type: String,
      default: '',
    },
    // 自定义图标icon
    custom: {
      type:Boolean,
      default: false
    },
    // 针对icon【有文案时】 的属性center / left / right 
    iconPosition: {
      type: String,
      default: 'center',
    },
    padding: String,
    lineHeight:Number,
    borderColor: String,
    borderWidth: Number,
    textAlign: String,
    maxWidth: Number,
    autofocus: Boolean
  },
  methods: {
    handleClick(evt) {
      this.$emit('click', evt);
    }
  }
};
</script>
<style scoped>
.content-box{
  display:flex;
  align-items: center;
  justify-content: center;
}

.circular {
  width: 16px;
  height: 16px;
  animation: rotate 3s linear infinite;
  margin-right:8px;
  /* background: red; */
}
.custom-icon{
  width: 24px;
  height: 24px;
}
.custom-icon img{
  width: 24px;
  height: 24px;
}
.path {
  stroke-dasharray: 1, 100;
  stroke-dashoffset: 0;
  stroke: #fff;
  animation: dash 2s ease-in-out infinite
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -20px;
    /* 改loading大小时，需要改这两个参数 */
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -40px; 
    /* 比50 的小 */
  }
}
</style>
