<template>
  <button
    :style="props.buttonStyle"
    :open-type="props?.openType || ''"
    :class="`nchl_button ${props?.type}_button ${props?.size || 'sm'}_size`"
    @click="handleClick"
    @getphonenumber="handleGetPhoneNumber"
  >
    {{ props?.label || "我是按钮" }}
  </button>
</template>
<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
const props = defineProps(["type", "label", "size", "openType", "buttonStyle"]);
const emit = defineEmits(["click", "onGetPhoneNumber"]);
const handleClick = () => {
  emit("click");
};
const handleGetPhoneNumber = (e: any) => {
  if (e?.detail?.errMsg === "getPhoneNumber:ok") {
    emit("onGetPhoneNumber", e);
  }
};
</script>
<style leng="scss" scoped>
button::after {
  border: none;
}
.page_title {
  font-weight: 600;
  font-size: 28rpx;
}
.nchl_button {
  padding: 0 23rpx;
  border-radius: 100rpx;
  font-weight: 400;
  font-size: 26rpx;
  background-color: #3da605;
  text-align: center;
  color: #fff;
}
.primary_button {
  background: #3da605;
}
.default_button {
  background: #fff;
  color: #000;
  border: 1rpx solid #eee;
}
.display_button {
  background: #c3c3c3;
  color: #fff;
}

.delete_button {
  background: #d43030;
  color: #fff;
}

/* 最小 */
.sm_size {
  height: 60rpx;
  line-height: 60rpx;
}
/* 常规 */
.md_size {
  height: 88rpx;
  line-height: 88rpx;
}
.lg_size {
  height: 100rpx;
  line-height: 100rpx;
}
</style>
