<!-- 虚拟按钮（可设置圆角、背景，边框等） -->
<template>
	<view class="virtualButton" :style="[btnStyle]" :class="{ 'blockBtn': block }" @click.stop="clickHandle">
		<slot>
			<text>虚拟按钮</text>
		</slot>
	</view>
</template>

<script>
	export default {
		name: 'VirtualButton',
		props: {
			// 按钮高
			btnHeight: {
				type: [Number, String],
				default: 64
			},
			// 按钮类型 [ 'default', 'primary'，'dange' ]
			type: {
				type: String,
				default: 'default'
			},
			// 是否需要边框
			border: {
				type: Boolean,
				default: false
			},
			// 边框类型：[ 'solid', 'dashed' ]
			borderType: {
				type: String,
				default: 'solid'
			},
			// 边框颜色
			borderColor: {
				type: String,
				default: '#564F5F'
			},
			// 是否为块级
			block: {
				type: Boolean,
				default: false
			},
			// 形状：[ 'circle', 'round' ]
			shape: {
				type: String,
				default: ''
			},
			// 幽灵属性：背景是否透明
			ghost: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				// 按钮类型
				btnTypeSet: [ 'default', 'primary', 'dange', 'grey', 'D7E1FD', '376AF5', 'F19149', '61596C', 'F7CE68', 'FFCF00' ],
				// 形状
				btnShapeSet: [ 'circle', 'round' ],
				// 背景颜色（与按钮进行映射）
				bgColor: {
					'default': '#fff',
					'primary': '#5FC48D',
					'dange': '#FE4066',
					'grey': '#999999',
					'D7E1FD': '#D7E1FD',
					'376AF5': '#376AF5',
					'F19149': '#F19149',
					'61596C': '#61596C',
					'F7CE68': '#F7CE68',
					'FFCF00': '#FFCF00',
				},
				// 字体颜色
				fontColor: {
					'default': '#999999',
					'primary': '#FFFFFF',
					'dange': '#FFFFFF',
					'grey': '#FFFFFF',
					'D7E1FD': '#FFFFFF',
					'376AF5': '#FFFFFF',
					'F19149': '#FFFFFF',
					'61596C': '#FFFFFF',
					'F7CE68': '#FFFFFF',
					'FFCF00': '#FFFFFF',
				}
			};
		},
		computed: {
			// 计算按钮样式
			btnStyle () {
				let _style = {
					"height": this.btnHeight + 'rpx',
					"line-height": this.btnHeight + 'rpx'
				}
				// 背景色/字体颜色
				if (this.btnTypeSet.indexOf(this.type) !== -1) {
					if (this.ghost) {
						_style['background-color'] = ''
						_style['color'] = this.bgColor[this.type]
					} else {
						_style['background-color'] = this.bgColor[this.type]
						_style['color'] = this.fontColor[this.type]
					}
				}
				// 边框
				if (this.border) {
					_style['border-width'] = '2rpx'
					_style['border-style'] = this.borderType
					if (this.ghost) {
						_style['border-color'] = this.bgColor[this.type]
					} else {
						_style['border-color'] = this.borderColor
					}
				}
				// 形状
				if (this.btnShapeSet.indexOf(this.shape) !== -1) {
					if (this.shape === 'circle' && !this.block) {
						_style['min-width'] = this.btnHeight + 'rpx'
					} else {
						_style['padding'] = '0 30rpx'
					}
					_style['border-radius'] = this.btnHeight + 'rpx'
				} else {
					_style['padding'] = '0 30rpx'
				}
				return _style
			}
		},
		methods: {
			clickHandle () {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss" scoped>
.virtualButton {
	display: inline-block;
	font-size: 26rpx;
	color: #999999;
	text-align: center;
	
	&.blockBtn {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	text {
		display: inline-block;
		height: inherit;
		line-height: inherit;
	}
}
</style>
