<template>
  <button 
    class="lyf-ui-button"
    :class="[size, type, {
      disabled: disabled || loading
    }, {round}, {circle}, {weak}, {ghost}]"
    :disabled="disabled" 
    @click="click"
  >
    <lyf-icon v-if="loading" :size="iconSize">&#xe63d;</lyf-icon>
    <lyf-icon v-else-if="icon" :size="iconSize" :icon="icon" />
    <slot></slot>
  </button>
</template>

<script>
// import publicVar from '@/assets/style/var.module.css'

export default {
  name: 'LyfButton',
  props: {
    size: {
      type: String,
      default: 'medium', // big, medium, small
    },
    type: {
      type: String,
      default: '', // secondary, warn, danger
    },
    weak: {
      type: Boolean,
      default: false
    },
    ghost: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: true
    },
    circle: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    icon: String,
    loading: Boolean
  },
  computed: {
    // iconColor() {
    //   // 默认白色icon
    //   let color = publicVar._N3_1
    //   // 次按钮黑色icon
    //   if (this.type === 'secondary' ) {
    //     color = publicVar._N1_1
    //   }
    //   if (this.weak) {
    //     // 弱按钮，结合类型
    //     switch (this.type) {
    //       case 'warn':
    //         color = publicVar._F1_1
    //         break
    //       case 'danger':
    //         color = publicVar._F1_2
    //         break
    //       default:
    //         color = publicVar._primary_color

    //         break
    //     }
    //   }
    //   return color
    // }
    iconSize() {
      return this.size === 'small' ? 14 : 18
    }
  },
  emits: ['click'],
  methods: {
    // 为了使用按钮组件时，不需要添加.native修饰符
    click(payload) {
      if (this.loading) return
      this.$emit('click', payload)
    }
  }
}
</script>
<style scoped>
.lyf-ui-button{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-color);
  border: solid var(--border-width) transparent;
  color: var(--font-color_4);
  font-weight: 500;
}
.lyf-ui-button.big {
  width: 343px;
  height: 48px;
  font-size: 16px; 
}
.lyf-ui-button.medium {
  width: 164px;
  height: 48px;
  font-size: 16px;
}
.lyf-ui-button.small {
  min-width: 56px;
  height: 28px;
  padding: 0 14px;
  font-size: 14px;
}
.lyf-ui-button.weak {
  border-color: var(--primary-color);
  background-color: var(--background-color_2);
  color: var(--primary-color);
}
.lyf-ui-button.ghost {
  border-color: var(--N3_1);
  background-color: transparent;
  color: var(--N3_1);
}
.lyf-ui-button.secondary {
  border-color: var(--N1_4);
  background-color: var(--background-color_2);
  color: var(--N1_2);
}
.lyf-ui-button.warn {
  border-color: transparent;
  background-color: var(--F1_1);
  color: var(--font-color_4);
}
.lyf-ui-button.warn.weak {
  border-color: var(--F1_1);
  background-color: var(--N3_1);
  color: var(--F1_1);
}
.lyf-ui-button.danger {
  border-color: transparent;
  background-color: var(--F1_2);
  color: var(--font-color_4);
}
.lyf-ui-button.danger.weak {
  border-color: var(--F1_2);
  background-color: var(--N3_1);
  color: var(--F1_2);
}
.lyf-ui-button.round {
  border-radius: var(--space_8);
}
.lyf-ui-button.round.small {
  border-radius: var(--space_4);
}
.lyf-ui-button.disabled {
  opacity: .4;
}
.lyf-ui-button .lyf-icon {
  margin-right: var(--space_4);
}
.lyf-ui-button .lyf-ui-button-loading {
  display: none;
}
.lyf-ui-button.is-loading .lyf-ui-button-loading {
  display: block;
}
</style>