<template>
	<view data-remark='按钮' class="g-rh-button g-components-button">
		<button class="bocai-btn" :class="['bocai_btn_size_' + size, 'bocai_btn_mode_' + mode, 'bocai_btn_type_' + type, 'g_w_' + width, 'g_h_' + height, customBgColor ? 'customBgColor' : '']" :style="{ ...buttonStyle, lineHeight: customLH }" :hover-stop-propagation="true" hover-class="thover" @click="handleClick" :form-type="formType" :open-type="openType" @getphonenumber="getphonenumber">
			<view class="g_flex_row_center">
				<view class="g_flex_column_center g_mr_4" v-if="loading">
					<u-loading mode="flower"></u-loading>
				</view>
				<view class="g_flex_column_center" v-if="icon">
					<view class="iconfont icon" :class="icon" style="font-size: 16px"></view>
				</view>
				<view class="g_flex_column_center" :class="'g_fs_' + fontSize">
					{{ btnText }}
				</view>
			</view>
		</button>
	</view>
</template>

<script>
/* 按钮
 * @params size 尺寸
 * 			   medium 大；
 * 				 default 默认（中）；
 * 				 small 小；
 * 				 mini 迷你；
 * @params btnText 按钮文本。
 * @params mode 形状
 * 				 circle 胶囊式圆角；square 圆角方形
 * @parmas type 类型
 * 				 primary 主要按钮（底色是主题色）
 * 				 default 默认按钮（底色是白色）
 * 				 infro   信息按钮（底色是灰色）无法触发事件
 * 				 delete  删除按钮（白底红色）
 * 				 none    没有样式（白底黑字）
 * 				 default_b  灰色边框（白底黑字灰框）
 *         disabled  禁用（白底黑字）
 * @params openType 开放类型
 * @params openType 开放类型
 * @params icon 图标 项目id 4374774
 * @params gradual 渐变背景色
 * @params customBgColor 背景色
 */
export default {
	props: {
		gradual: {
			type: String,
			default: () => {
				return "";
			},
		},
		size: {
			type: String,
			default: () => {
				return "default";
			},
		},
		btnText: {
			type: String,
			default: () => {
				return "按钮";
			},
		},
		mode: {
			type: String,
			default: () => {
				return "circle";
			},
		},
		type: {
			type: String,
			default: () => {
				return "default";
			},
		},
		openType: {
			type: String,
			default: () => {
				return "";
			},
		},
		formType: {
			type: String,
			default: () => {
				return "";
			},
		},

		icon: {
			type: String,
			default: () => {
				return "";
			},
		},
		width: {
			default: () => {
				return "auto";
			},
		},
		height: {
			default: () => {
				return "auto";
			},
		},
		fontSize: {
			default: () => {
				return "16";
			},
		},
		color: {
			default: () => {
				return "";
			},
		},

		loading: {
			default: () => {
				return false;
			},
		},
		customBgColor: {
			default: () => {
				return "";
			},
		},
		primaryColor: {
			default: () => {
				return "";
			},
		},
	},
	data() {
		return {
			customLH: "40px",
			currentThemeColor: getApp().globalData.themeColor,
		};
	},
	mounted() {
		let that = this;
		uni.$on('themeChanged', (color) => {
			that.currentThemeColor = color;
		});
		const query = uni.createSelectorQuery().in(this);
		query
			.select(".bocai-btn")
			.fields(
				{
					computedStyle: ["height", "border"],
				},
				(res) => {
					console.log("resresresresres", res);
					if (res.border && res.border.indexOf("1px") > -1) {
						this.customLH = `calc(${res.height} - 2px)`;
					} else {
						this.customLH = res.height;
					}
				}
			)
			.exec();
	},
	computed: {
		resolvedColor() {
			return this.primaryColor || this.currentThemeColor;
		},
		buttonStyle() {
			const baseStyle = {
				padding: 0,
				color: this.color || "",
			};

			if (this.type === "primary") {
				const themeStyle = {
					backgroundColor: this.resolvedColor,
					border: `1px solid ${this.resolvedColor}`,
				};
				return { ...baseStyle, ...themeStyle };
			} else if (this.type === "default") {
				const defaultStyle = {
					color: this.resolvedColor,
					border: `1px solid ${this.resolvedColor}`,
				};
				return { ...baseStyle, ...defaultStyle };
			} else {
				return baseStyle;
			}
		},
	},
	methods: {
		handleClick() {
			if (!this.loading) {
				this.$emit("clickBtn");
			}
		},
		getphonenumber(e) {
			this.$emit("clickTel", e);
		},
	},
};
</script>

<style lang="scss" scoped>
.g_mr_4 {
	margin-right: 4px;
}
.g_flex_column_center {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.g_flex_row_center {
	display: flex;
	justify-content: center;
}

.g-components-button {
	.bocai-btn {
		width: 100%;
		color: #ffffff;
		box-sizing: border-box;
	}
	.bocai_btn_size {
		&_medium {
			height: 56px;
			font-size: 18px;
		}
		&_default {
			width: 250px !important;
			height: 42px;
			font-size: 18px;
			.icon {
				font-size: 27px;
			}
			&_auto {
				width: 100%;
				height: 42px;
				font-size: 18px;
			}
		}
		&_small {
			width: 120px !important;
			height: 40px;
			font-size: 16px;
			.icon {
				font-size: 27px;
			}
			&_auto {
				width: 100%;
				height: 40px;
				font-size: 16px;
			}
		}
		&_160 {
			width: 160px !important;
			height: 40px;
			font-size: 16px;
			.icon {
				font-size: 27px;
			}
			&_auto {
				width: 100%;
				height: 40px;
				font-size: 16px;
			}
		}
		&_mini {
			height: 28px !important;
			padding: 0 12px !important;
			font-size: 14px !important;
			.icon {
				font-size: 12px;
			}
		}
		&_height {
			height: 40px;
			font-size: 16px;
			.icon {
				font-size: 27px;
			}
			&_auto {
				width: 100%;
				height: 40px;
				font-size: 16px;
			}
		}
	}
	.bocai_btn_mode {
		&_circle {
			border-radius: 60px;
		}
		&_square {
			border-radius: 6px;
		}
	}
	.bocai_btn_type {
		&_primary {
			color: #fff;
			&.thover {
				opacity: 0.8;
			}
		}
		&_default {
			background-color: #fff;
			&.thover {
				opacity: 0.8;
			}
		}
		&_default_b {
			background-color: #fff;
			color: #333;
			border: 1rpx solid #d9d9d9;
			&.thover {
				opacity: 0.8;
			}
		}
		&_infro {
			pointer-events: none;
			background: #ddd;
			color: #666;
			border: 0.5px solid #ddd;
			&.thover {
				background: #cccccc;
			}
		}
		&_delete {
			border: 1rpx solid #fff;
			background-color: #fff;
			color: #fa5151;
			&.thover {
				opacity: 1;
				background-color: #f9f9f9;
				border: 1rpx solid #f9f9f9;
			}
		}
		&_none {
			background-color: #fff;
			color: #333;
			&.thover {
				opacity: 0.8;
			}
		}
		&_disabled {
			background-color: rgba(0, 0, 0, 0.05);
			color: rgba(0, 0, 0, 0.2);
			border: 1rpx solid rgba(0, 0, 0, 0.05);
			&.thover {
				opacity: 1;
			}
		}
		&_noStyle {
			background-color: rgba(0, 0, 0, 0.05);
			color: #333;
			font-weight: 600;
			&.thover {
				opacity: 0.8;
			}
		}
		&_gradual {
			background: linear-gradient(-130deg, #5c6cf7, #9963f9);
			color: #fff;
			opacity: 1;
			&.thover {
				opacity: 0.8;
			}
		}
	}
	.customBgColor {
		background-color: "#6a81ff";
		color: #fff;
	}
	.g_w_260 {
		width: 260px !important;
	}
	.g_h_48 {
		height: 48px !important;
	}
}
</style>
