<template>
   <a-button :size="props.size" :class="`${props.type}`" :type="getType(props.type)" :icon="h(getIcon(props.type))">{{props.text}}</a-button>
</template>

<script setup lang="ts">
import {defineProps,h} from "vue"
import { PlusOutlined,FormOutlined,DeleteOutlined,SearchOutlined } from '@ant-design/icons-vue';
const props = defineProps(['text','type','size'])
const getIcon = (icon:string) => {
  switch (icon) {
    case 'add':
      return PlusOutlined
    case 'edit':
      return FormOutlined
    case 'del':
      return DeleteOutlined
    case 'search':
      return SearchOutlined
    default:
      return null
  }
}
const getType = (type:string) => {
  switch (type) {
    case 'search':
      return 'default'
    default:
      return 'primary'
  }
}
</script>
<style lang="scss" scoped>
.add{
  background-color: #409167;
}
.add:hover{
  background-color: #66a785;
}
.edit{
  background-color: #0076c8
}
.edit:hover{
  background-color: #3391d3;
}
.del{
  background-color: #d63737
}
.del:hover{
  background-color: #de5f5f;
}
.position{
  margin-left:10px
}
</style>
