<template>
  <button
    :style="getStyleInfo()"
    :open-type="props?.openType || ''"
    :class="`nchl_button ${props?.type}_button ${props?.size || 'sm'}_size`"
    @click="handleClick"
    :disabled="props?.disabled"
    @getphonenumber="handleGetPhoneNumber"
  >
    <uni-icons
      v-if="props?.icon"
      :type="props?.icon"
      size="16"
      :color="props?.iconColor || '#0082fa'"
    ></uni-icons>
    <up-loading-icon mode="circle" size="15" v-if="props?.loading"></up-loading-icon>
    <text :class="props?.loading || props?.icon ? 'btn_text' : ''">
      {{ props?.loading_label || props?.label || '我是按钮' }}
    </text>
  </button>
</template>
<script setup lang="ts">
import { useWeAppAuthStore } from '@/common'
import { defineProps, defineEmits } from 'vue'
import { getStyleBgInfo } from '@/common/libraries/getPageConfig'
const props = defineProps([
  'type',
  'label',
  'icon',
  'size',
  'openType',
  'iconColor',
  'buttonStyle',
  'disabled',
  'loading',
  'loading_label'
])
const auth = useWeAppAuthStore()
const emit = defineEmits(['click', 'onGetPhoneNumber'])

const handleClick = () => {
  emit('click')
}
const handleGetPhoneNumber = (e: any) => {
  if (e?.detail?.errMsg === 'getPhoneNumber:ok') {
    emit('onGetPhoneNumber', e)
  }
}

const getStyleInfo = () => {
  let style: any = auth?.data?.config?.companyConfig?.config_value
  let color = style?.color?.metaColor
  return {
    ...props.buttonStyle,
    ...getStyleBgInfo(),
    color: '#fff'
  }
}
</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: #0082fa;
  text-align: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn_text {
  padding-left: 10rpx;
}
.primary_button {
  background: #0082fa;
}
.default_button {
  background: #fff;
  color: #3c5b86;
}
.display_button {
  background: #f3f3f4;
  color: #2a7efb;
}

.disabled_button {
  background: #ccc;
  color: #333;
}

.primary_two_button {
  background: #f0f7ff;
  color: #2a7efb;
}

.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;
  font-size: 28rpx;
}
.lg_size {
  height: 100rpx;
  line-height: 100rpx;
  font-size: 32rpx;
}
</style>
