<template>
  <view class="b-wrapper" :class="[buttonSize()]" :style="{ paddingBottom: bottom, marginTop: pdTop, padding: pd }">
    <view
      @tap.stop="handleTap"
      class="b-main"
      :style="{
        color: color,
        backgroundColor: bgColor,
      }"
      hover-class="u-cell-hover"
      hover-stay-time="150"
    >
      <slot>登录</slot>
    </view>
  </view>
  <view :style="{ height }" v-if="height"></view>
</template>

<script setup>
import { reactive } from "vue"

const props = defineProps({
  color: {
    type: String,
    default: "#fff",
  },
  bgColor: {
    type: String,
    default: "$primaryColor",
  },
  size: {
    type: String,
    default: "",
  },
  bottom: {
    type: String,
    default: "75rpx",
  },
  pdTop: {
    type: String,
    default: "30rpx",
  },
  height: {
    type: String,
    default: "",
  },
  pd: {
    type: String,
  },
})
const size = reactive({
  medium: "medium",
  max: "max",
})
const buttonSize = () => {
  return size[props.size]
}
const emits = defineEmits(["HandleTouch"])
const handleTap = () => {
  emits("HandleTouch")
}
</script>

<style lang="scss" scoped>
.b-wrapper {
  padding: 50rpx;
  .b-main {
    position: relative;
    font-size: 33rpx;
    height: 110rpx;
    background-color: $primaryColor;
    border-radius: 20rpx;
    outline: 0;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 33rpx;
  }

  .u-cell-hover {
    opacity: 0.5;
  }
}
.max {
  padding: 50rpx;
}
.medium {
  padding: 0 50rpx 50rpx 50rpx;
}
</style>
