<template>
	<view class="btnBox">
		<u-button v-if="!custom_style" @click="btnClick" data-name="3333" :loading="loading" :plain="plain"
			:shape="shape" :size="size" :hairline="hairline" :type="type">{{btnTitle}}</u-button>
		<u-button v-if="custom_style" :custom-style="custom_style" @click="btnClick" data-name="3333" :loading="loading"
			:hairline="hairline">{{btnTitle}}</u-button>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex';
	export default {
		name: "generalButton",
		props: {
			btnTitle: {
				type: String,
				default: ""
			},
			btnStyle: {
				type: String,
				default: "default", //预留，用于自定义一些默认按钮
			},
			loading: {
				type: Boolean,
				default: false, //是否在加载中
			},
			type: {
				type: String,
				default: 'primary', //主题 //primary//error/warning//success
			},
			size: {
				type: String,
				default: 'normal', //medium，mini
			},
			shape: {
				type: String,
				default: 'square', //直角'square' 圆角'circle';
			},
			hairline: {
				type: Boolean,
				default: false, //细线;
			},
			plain: {
				type: Boolean,
				default: false, //是否镂空
			},
			btnKey: {
				type: String,
				default: 'customKey', //按钮自定义标识，任意字符串
			},
			custom_style: {
				type: Object,
				default: () => { // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					return null;
					// return {
					// 	marginLeft: "100px",
					// 	marginRight: "100px",
					// }
				},
			},

		},
		mounted() {
			this.typeChange(this.btnStyle);
		},
		data() {
			return {

			};
		},
		computed: {
			...mapGetters(['customTabBarHeightRpx'])
		},
		methods: {
			typeChange(btnStyle) {
				switch (btnStyle) {
					case 'default': //用于自定义样式改变按钮样式

						break;
				}
			},
			btnClick() {
				this.$emit('click', this.btnKey);
			}
		}

	}
</script>

<style lang="scss" scoped>
	/* 只限制上下,不限制左右,可以右更多的自定义空间 */
	.btnBox {
		display: flex;
		flex: 1,
	}
</style>