<template>
  <div class="sys-button-wrapper">
    <button class="sys-button" :style="buttonStyle">
      <span class="sys-button-text">{{ props.text }}</span>
    </button>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import type { PropType } from 'vue'
type ButtonType = '' | 'default' | 'success' | 'warning' | 'info' | 'primary' | 'danger'
const props = defineProps({
  text: {
    type: String,
    default: '按钮文本'
  },
  type: {
    type: String as PropType<ButtonType>,
    default: ''
  },
  round: {
    type: Boolean,
    default: false
  },
  backgroundColor: {
    type: String,
    default: ''
  },
  borderColor: {
    type: String,
    default: ''
  },
  fontColor: {
    type: String,
    default: ''
  },
  fontFamily: {
    type: String,
    default: ''
  },
  fontSize: {
    type: Number,
    default: 14
  },
  borderRadius: {
    type: Number,
    default: 4
  }
})

const buttonTypeStyleMap: Record<
  ButtonType,
  { background: string; border: string; color: string }
> = {
  '': {
    background: '#ffffff',
    border: '#dcdfe6',
    color: '#606266'
  },
  default: {
    background: '#ffffff',
    border: '#dcdfe6',
    color: '#606266'
  },
  primary: {
    background: '#409eff',
    border: '#409eff',
    color: '#ffffff'
  },
  success: {
    background: '#67c23a',
    border: '#67c23a',
    color: '#ffffff'
  },
  warning: {
    background: '#e6a23c',
    border: '#e6a23c',
    color: '#ffffff'
  },
  danger: {
    background: '#f56c6c',
    border: '#f56c6c',
    color: '#ffffff'
  },
  info: {
    background: '#909399',
    border: '#909399',
    color: '#ffffff'
  }
}

const buttonStyle = computed(() => {
  const typeStyle = buttonTypeStyleMap[props.type] || buttonTypeStyleMap.default
  const borderRadius = props.round ? 20 : props.borderRadius
  return {
    backgroundColor: props.backgroundColor || typeStyle.background,
    borderColor: props.borderColor || typeStyle.border,
    color: props.fontColor || typeStyle.color,
    fontFamily: props.fontFamily || undefined,
    fontSize: `${props.fontSize}px`,
    borderRadius: `${borderRadius}px`
  }
})
</script>
<style scoped>
.sys-button-wrapper {
  width: 100%;
  height: 100%;
}

.sys-button {
  width: 100%;
  height: 100%;
  padding: 0 12px;
  overflow: hidden;
  line-height: 1;
  cursor: pointer;
  border: 1px solid;
  transition:
    background-color 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.sys-button-text {
  display: block;
  overflow: hidden;
  color: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
