<template>
	<button class="l-button l-class"
		:id="lId"
		:style="[styles, lStyle]"
		:class="[
			'l-button--' + size,
			'l-button--' + type,
			'l-button--' + shape,
			'l-button--' + computedVariant,
			{
				'l-button--ghost': ghost,
				'l-button--block': block,
				'l-button--disabled': disabled,
				'l-button--loading': loading,
			}
		]" 
		:form-type="disabled || loading ? '' : formType"
		:open-type="disabled || loading ? '' : openType" 
		:hover-stop-propagation="hoverStopPropagation"
		:hover-start-time="hoverStartTime" 
		:hover-stay-time="hoverStayTime" :lang="lang" 
		:session-from="sessionFrom"
		:hover-class="hoverClasses" 
		:send-message-title="sendMessageTitle" 
		:send-message-path="sendMessagePath"
		:send-message-img="sendMessageImg" 
		:app-parameter="appParameter" 
		:show-message-card="showMessageCard"
		@tap.stop="handleTap" 
		@getuserinfo="getuserinfo" 
		@contact="contact" 
		@getphonenumber="getphonenumber"
		@error="error" 
		@opensetting="opensetting" 
		@launchapp="launchapp" 
		@chooseavatar="chooseavatar"
		@agreeprivacyauthorization="agreeprivacyauthorization" 
		:aria-label="ariaLabel"
		:data-disabled="disabled||loading">
		<view class="l-button__loading"  v-if="loading">
			<l-loading inheritColor></l-loading>
		</view>
		<l-icon class="l-button__icon" v-if="icon" :name="icon"></l-icon>
		<view class="l-button__content" v-if="content || $slots.default">
			<slot>{{content}}</slot>
		</view>
	</button>
</template>
<script lang="ts">
	// @ts-nocheck
	/**
	 * Button 按钮组件
	 * @description 提供丰富的按钮样式和交互功能，支持多种形态和平台特性
	 * <br> 插件类型：LButtonComponentPublicInstance 
	 * @tutorial https://ext.dcloud.net.cn/plugin?name=lime-button
	 * 
	 * @property {string} ariaLabel 无障碍标签（用于屏幕阅读器）
	 * @property {boolean} block 块级布局（占满父容器宽度）
	 * @property {boolean} disabled 禁用状态
	 * @property {boolean} ghost 幽灵模式（透明背景+边框）
	 * @property {string} icon 左侧图标名称/路径
	 * @property {string} iconSize 图标尺寸（支持CSS单位）
	 * @property {boolean} loading 加载状态（显示加载动画）
	 * @property {UTSJSONObject} loadingProps 加载动画配置
	 * @property {'rectangle' | 'square' | 'round' | 'circle'} shape 按钮形状
	 * @value rectangle 长方形（默认）
	 * @value square 正方形
	 * @value round 圆角矩形
	 * @value circle 圆形
	 * @property {SizeEnum} size 按钮尺寸
	 * @value small 小号
	 * @value medium 中号（默认）
	 * @value large 大号
	 * @property {string} suffix 右侧附加内容（图标/文本）
	 * @property {'default' | 'primary' | 'danger' | 'warning' | 'success' | 'info'} type 色彩类型
	 * @value default
	 * @value primary
	 * @value danger 
	 * @value warning
	 * @value success
	 * @value info
	 * @property {'solid' | 'outline' | 'text' | 'light' | 'dashed'} variant 样式变体
	 * @value solid 
	 * @value outline
	 * @value text 
	 * @value light
	 * @value dashed
	 * @property {string} radius 自定义圆角（覆盖shape设置）
	 * @property {string} fontSize 文字字号（支持CSS单位）
	 * @property {string} textColor 文字颜色（支持CSS颜色值）
	 * @property {string} color 主色（背景/边框色）
	 * 
	 * @platform 微信小程序
	 * @property {string} formType 表单类型（submit/reset）
	 * @property {string} openType 开放能力（contact/share等）
	 * @property {string} lang 用户信息语言（zh_CN/zh_TW/en）
	 * @property {string} sessionFrom 会话来源（contact模式有效）
	 * @property {string} sendMessageTitle 消息卡片标题（contact模式有效）
	 * @property {string} sendMessagePath 消息跳转路径（contact模式有效）
	 * @property {string} sendMessageImg 消息卡片图片（contact模式有效）
	 * @property {string} appParameter APP启动参数（launchApp模式）
	 * @property {boolean} showMessageCard 显示消息卡片提示
	 * 
	 * @property {string} hoverClass 点击态样式类（默认：button-hover）
	 * @property {boolean} hoverStopPropagation 阻止祖先点击态
	 * @property {number} hoverStartTime 点击态延迟（默认：20ms）
	 * @property {number} hoverStayTime 点击态保留时间（默认：70ms）
	 * @event {Function} click 点击事件（禁用状态下不触发）
	 * @event {Function} getuserinfo 用户信息授权回调
	 * @event {Function} contact 客服会话回调
	 * @event {Function} agreeprivacyauthorization
	 * @event {Function} chooseavatar
	 * @event {Function} getphonenumber
	 * @event {Function} error
	 * @event {Function} opensetting
	 * @event {Function} launchapp
	 */
	import { computed, defineComponent } from '@/uni_modules/lime-shared/vue';
	import ButtonProps from './props'
	const name = 'l-button'
	export default defineComponent({
		name,
		options: {
			addGlobalClass: true,
		    virtualHost: true
		},
		behaviors: ['wx://form-field-button'],
		externalClasses: ['l-class',`l-class-icon`, `l-class-loading`],
		props: ButtonProps,
		emits: ['click','agreeprivacyauthorization', 'chooseavatar', 'getuserinfo','contact', 'getphonenumber', 'error', 'opensetting', 'launchapp'],
		setup(props, { emit }) {
			
			const computedVariant  = computed(():string => props.variant || (props.color ? 'solid' : (props.type == 'default' ? 'outline': 'solid')))
			const classes = computed(() => {
				return {
					[`${name}--${props.size}`]: true,
					[`${name}--${props.type}`]: true,
					[`${name}--${props.shape}`]: true,
					[`${name}--${computedVariant .value}`]: true,
					// [`${name}--color`]: props.color,
					[`${name}--ghost`]: props.ghost,
					[`${name}--block`]: props.block,
					[`${name}--disabled`]: props.disabled,
					[`${name}--loading`]: props.loading,
				}
			})
			const hoverClasses = computed(() => {
				return props.disabled || props.loading ? '' : (props.hoverClass || `l-button--hover`)
			})
			const styles = computed(()=>{
				const style:Record<string, any> = {}
				if(props.gap) {
					style['--l-button-gap'] = props.gap
				}
				if(props.color){
					if(['outline'].includes(props.variant) ){
						style['--l-button-border-color'] = props.color
						style['color'] = props.color
					} else {
						style['--l-button-border-color'] = props.color
						style['background'] = props.color
						style['color'] = 'white'
					}
				}
				
				return style
			})
			const getuserinfo = (e) => {
				emit('getuserinfo', e);
			}
			const contact = (e) => {
				emit('contact', e);
			}
			const getphonenumber = (e) => {
				emit('getphonenumber', e);
			}
			const error = (e) => {
				emit('error', e);
			}
			const opensetting = (e) => {
				emit('opensetting', e);
			}
			const launchapp = (e) => {
				emit('launchapp', e);
			}
			const chooseavatar = (e) => {
				emit('chooseavatar', e);
			}
			const agreeprivacyauthorization = (e) => {
				emit('agreeprivacyauthorization', e);
			}
			const handleTap = (e)=>{
				if (props.disabled || props.loading) return;
				emit('click', e);
			}
			
			return {
				classes,
				hoverClasses,
				styles,
				computedVariant,
				agreeprivacyauthorization,
				chooseavatar,
				getuserinfo,
				launchapp,
				opensetting,
				error,
				getphonenumber,
				contact,
				handleTap
			}
		}
	})
</script>
<style lang="scss">
	@import './index-u';
</style>