<template>
	<view class="control" :style="getComputedStyle()">
		<view class="u-flex control1">
			<view class="btn add font-bold u-font-28 color-fff" @tap="go.to('PAGES_PRODUCT_ADD')">商品添加</view>
		</view>
	</view>
</template>

<script setup>
	import go from '@/commons/utils/go.js';
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	const props = defineProps({
		bottom: {
			type: [Number, String],
			default: 30
		},
	})
	
	let showControl1 = ref(true)
	const emits = defineEmits(['toggleCategory','controlChange','allCheckedChange','offShelf','categoryChange'])


	function getComputedStyle() {
		return {
			bottom: props.bottom + 'rpx'
		}
	}
	
</script>

<style lang="scss" scoped>
	.scale7 {
		transform: scale(0.7);
	}
	.add{
		background-color: $my-main-color;
		border-radius: 100rpx;
		overflow: hidden;
	}
	.borde-r {
		position: relative;

		&::after {
			display: block;
			content: '';
			position: absolute;
			top: 20rpx;
			bottom: 20rpx;
			width: 2px;
			background-color: #fff;
			right: 0;
		}
	}

	.control {
		position: fixed;
		left: 110rpx;
		right: 110rpx;
		z-index: 100;
		background: #3E3A3A;
		border-radius: 100rpx;
		overflow: hidden;
		.btn{
			color: #fff;
		}
		.control1 {
			.arrow-down {
				transform: rotate(90deg);
				transition: all .2s ease-in-out;
				&.up{
					transform: rotate(-90deg);
				}
			}
		}

		.control1 .btn:not(:last-child)::after {
			display: block;
			content: '';
			position: absolute;
			top: 20rpx;
			bottom: 20rpx;
			width: 2px;
			background-color: #fff;
			right: 0;
		}

		.control1 .btn {
			flex: 1;
		}

		.control1 .btn,
		.control2 .btn{
			position: relative;
			line-height: 76rpx;
			text-align: center;
		}

		.control2 {
			padding: 0 28rpx;
		}
	}
</style>