<template>
  <div class="btn-container" :style="computedStyle">
    <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: "",
  },
  height: {
    type: String,
    // default: '44'
  },
  paddingTop: {
    type: String,
    default: "14",
  },
  paddingBottom: {
    type: String,
    default: "14",
  },
  paddingLeft: {
    type: String,
    default: "19",
  },
  paddingRight: {
    type: String,
    default: "19",
  },
  fontSize: {
    type: String,
    default: "25",
  },
  size: {
    type: String,
    default: "large",
  },
});
const typeMap = {
  danger: {
    bg: "linear-gradient( 180deg, #FF7B83 0%, #850006 100%)",
    color: "#FFFFFF",
  },
  info: {
    bg: "linear-gradient( 180deg, #FFFFFF 0%, #ECECEC 100%)",
    color: "#666666",
  },
  blue: {
    bg: "linear-gradient( 180deg, rgb(74,160,254) 0%, rgb(7,79,149) 100%)",
    color: "white",
  },
  warning: {
    bg: "linear-gradient( 180deg, #FFFFFF 0%, #ECECEC 100%)",
    color: "#CF4A4A",
  },
  default: {
    bg: "linear-gradient( 180deg, #FFFFFF 0%, #ECECEC 100%)",
    color: "#0C85FE",
  },
  primary: {
    bg: "linear-gradient( 180deg, #51A8FF 0%, #064D92 100%)",
    color: "#FFFFFF",
  },
  disabledColor: {
    bg: "linear-gradient( 180deg,rgb(251,184,188) 0%,rgb(196,129,132) 100%)",
    color: "#FFFFFF",
  },
};
const sizeMap = {
  large: "285px",
  default: "89px",
  max: "388px",
};
const computedStyle = computed(
  () =>
    `height:${props.height}px;background:${typeMap[props.type].bg};font-size:${
      props.fontSize
    }px;color:${typeMap[props.type].color};padding:${props.paddingTop}px ${
      props.paddingRight
    }px ${props.paddingBottom}px ${props.paddingLeft}px;`
);
</script>
<style lang="less" scoped>
.btn-container {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 2px 2px 2px 2px;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.26);
  padding: 14px 19px;
  cursor: pointer;
  margin: 0 8px;
  box-sizing: border-box;
  border-radius: 4px;
}
</style>
