<template>
  <button
    :style="props.buttonStyle"
    :open-type="props?.openType || ''"
    :class="`nchl_button ${props?.type}_button ${props?.size || 'sm'}_size`"
    @click="handleClick"
    @getphonenumber="handleGetPhoneNumber"
    :disabled="props?.disabled"
  >
    <uni-icons
      v-if="props?.icon"
      :type="props?.icon"
      size="16"
      :color="props?.iconColor || '#0082fa'"
    ></uni-icons>
    {{ props?.label || '我是按钮' }}
  </button>
</template>
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
const props = defineProps([
  'type',
  'label',
  'icon',
  'size',
  'openType',
  'disabled',
  'iconColor',
  '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;
  text-align: center;
  color: #3c5b86;
  display: flex;
  background-color: #fff;
  align-items: center;
  justify-content: center;
}
.primary_button {
  background: #0082fa;
  color: #fff;
}
.default_button {
  background: #fff;
  color: #000;
  border: 1rpx solid #eee;
}
.display_button {
  background: #f3f3f4;
  color: #0082fa;
}

.delete_button {
  background: #d43030;
  color: #fff;
}
.ghost_button {
  background: #fff;
  border: 1rpx solid #0082fa;
  color: #0082fa;
}
/* 最小 */
.sm_size {
  height: 60rpx;
  line-height: 60rpx;
}
/* 常规 */
.md_size {
  height: 80rpx;
  line-height: 80rpx;
}
.lg_size {
  height: 100rpx;
  line-height: 100rpx;
  font-size: 32rpx;
}
</style>
