<template>
	<view :class="className" @click="click">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			loading: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			type: {
				type: String
			},
			inline: {
				Boolean,
				default: false,
			}
		},
		methods: {
			click(e) {
				if (this.loading || this.disabled) {
					return;
				}
				this.$emit('click', e)
			}
		},
		computed: {
			className() {
				let name = "jl-button"
				if (this.inline) {
					name += ' inline'
				}
				if (this.disabled) {
					name += ' disabled'
				}
				if (this.loading) {
					name += " loading"
				}
				if (this.type) {
					name += " " + this.type
				}
				return name
			}
		},
	};
</script>

<style>
	.jl-button {
		display: inline-block;
		padding: 15rpx 47rpx;
		border-radius: 10rpx;
		text-align: center;
		font-size: 32rpx;
		color: #666666;
		border: 1rpx solid #c8c7cc;
	}

	.jl-button.inline {
		display: block;
		height: 80rpx;
		line-height: 80rpx;
		padding:0;
	}

	.jl-button.primary {
		color: #fefefe;
		background-color: #1b66ff;
		border-color: #1b66ff;
	}

	.jl-button.loading,
	.jl-button.disabled {
		opacity: 0.3;
	}
</style>
