<template>
  <div class="btn-container" :style="computedStyle" :class="disabled ? 'btn_disabled' : ''">
    <slot name="svg" />
    {{ msg }}
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
const props = defineProps({
  type: {
    type: String,
    default: 'primary'
  },
  msg: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: 'large'
  },
  disabled: {
    type: Boolean,
    default: false
  }
});
const typeMap = {
  danger: {
    bg: 'linear-gradient( 180deg, #FF7B83 0%, #850006 100%)',
    color: '#FFFFFF'
  },
  info: {
    bg: 'linear-gradient( 180deg, #FFFFFF 0%, #ECECEC 100%)',
    color: '#666666'
  },
  primary: {
    bg: 'linear-gradient( 180deg, #51A8FF 0%, #064D92 100%)',
    color: '#FFFFFF'
  }
};
const sizeMap = {
  large: '285px',
  default: '89px',
  max: '388px'
};
const computedStyle = computed(
  () =>
    `background:${typeMap[props.type].bg};color:${typeMap[props.type].color};
    }`
);
</script>
<style lang="less" scoped>
.btn-container {
  min-width: 200px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.4);
  border-radius: 8px 8px 8px 8px;
  padding: 14px 28px;
  cursor: pointer;
  margin-right: 8px;
}
.btn_disabled {
  cursor: no-drop;
  pointer-events: none;
  opacity: 0.6;
}
</style>
