<template>
	<view class="box-foot">
		<view class="btn-box" :hover-class="btnHover" @click="$u.throttle(btnClick)">
			<slot></slot>
		</view>
		<lineView :left="left" />
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex';
	import lineView from "@/components/form/lineView.vue";
	export default {
		name: "btnView",
		components: {
			lineView,
		},
		props: {
			isOpacity: { //按钮颜色是透明度还是颜色
				type: Boolean,
				default: false,
			},
			readonly: { //按钮颜色是透明度还是颜色
				type: Boolean,
				default: false,
			},
		},

		data() {
			return {
				tabBarHeight: 0,
				left: 15,
				btnHover: "btn-hover-class"
			};
		},
		methods: {
			btnClick() {
				if (this.readonly) {
					return;
				}
				this.$emit('click');
			}

		},
		mounted() {
			if (this.readonly) {
				//只读状态没有状态
				this.btnHover = "none";
			} else if (this.isOpacity) {
				this.btnHover = "btn-opacity-hover-class"
			} else {
				this.btnHover = "btn-hover-class"
			}
		}

	}
</script>

<style lang="scss" scoped>
	/* 只限制上下,不限制左右,可以右更多的自定义空间 */
	.box-foot {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;

		.btn-box {
			width: 750rpx;
			display: flex;
			min-height: 50px;
			align-items: center;
			justify-content: space-between;
			background-color: #ffffff;
		}

		.btn-hover-class {
			color: $uni-describe-text-color !important;
			background: $btn-default-btn-hover-color !important;
		}

		.btn-opacity-hover-class {
			&:before {
				opacity: $btn-default-btn-hover-opticty !important;
			}
		}
	}
</style>