<!-- 
    filename: DateBtnGroup.vue
    author: liubin
    date: 2023-12-05 14:35:14
    description: 日期按钮组
-->

<template>
	<div class="date-btn-group">
		<button
			class="btn"
			:class="{ 'btn-active': active == '日' }"
			@click="handleClick('日')">
			日
		</button>
		<button
			class="btn"
			:class="{ 'btn-active': active == '周' }"
			@click="handleClick('周')">
			周
		</button>
		<button
			class="btn"
			:class="{ 'btn-active': active == '月' }"
			@click="handleClick('月')">
			月
		</button>
	</div>
</template>

<script>
export default {
	name: 'DateBtnGroup',
	data() {
		return {
			active: '日',
		};
	},
	methods: {
		handleClick(v) {
			this.active = v;
			this.$emit('change', v);
		},
	},
};
</script>

<style scoped lang="scss">
button {
	appearance: none;
	border: none;
	outline: none;
	background: none;
	padding: 6px 8px;
}
.date-btn-group {
	// position: absolute;
	// top: 40px;
	// right: 100px;
	// border: 1px solid #ccc;
	// padding: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.btn {
	cursor: pointer;
	border: 1px solid #11e8e4;
	border-radius: 4px;
	color: #11e8e4;
	transition: all 0.3s ease-in-out;

	&:hover {
		background: #11e8e4;
		color: #013433;
	}
}

.btn-active {
	background: #11e8e4;
	color: #013433;
}
</style>
