<template>
	<view class="control" :style="getComputedStyle()">
		<view class="u-flex control1">
<!-- 			<view class="btn  font-bold u-font-28 color-fff" @click="allControl" v-if="!showControl1">批量操作</view>
			<view class="btn  font-bold u-font-28 color-fff danger" @click="allControlCancel" v-else>取消</view> -->
			<!-- <view class="btn add font-bold u-font-28 color-fff" @tap="go.to('PAGES_PRODUCT_ADD')">商品添加</view> -->
			<view class="btn add font-bold u-font-28 color-fff" @tap="go.to('PAGES_PRODUCT_ADD')">商品添加</view>
			<!-- <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(false)
	const emits = defineEmits(['toggleCategory', 'controlChange', 'allCheckedChange', 'offShelf', 'categoryChange'])

	function allControl() {
		showControl1.value = true
		emits('allCheckedChange',showControl1.value)
	}
	function allControlCancel(){
		showControl1.value = false
		emits('allCheckedChange',showControl1.value)
	}

	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: 0 100rpx 100rpx 0;
		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;
		background: $my-main-color;
		
		border-radius: 100rpx;
		overflow: hidden;

		.btn {
			color: #fff;
			&.danger{
				background-color: #f02842;
			}
		}

		.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>