<template>
	<view class="control" :style="getComputedStyle()">
		<view class="u-flex control1" v-if="showControl1">
			<view class="btn" @click="changeShowControl1">批量管理</view>
			<view class="btn" @tap="go.to('PAGES_PRODUCT_ADD')">商品添加</view>
			<!-- <view class="color-999 btn u-flex u-row-center" @click="emitToggleCategory">
				<text class="u-m-r-10">{{categoryName||'选择分类'}}</text>
				<view class="arrow-down" :class="{'up':categoryShow}">
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view> -->
		</view>
		<view class="u-flex control2 u-row-between" v-else>
			<view class="u-flex u-flex-1 btn " @click="changeIsSelectAll">
				<view class="u-m-l-28">
					<my-radio v-model="isSelectAll" >
						<view class="color-fff">全选</view>
					</my-radio>
				</view>
					<!-- <label class="radio u-m-l-28" >
						<radio class="scale7" @tap.stop="changeIsSelectAll" :color="ColorMain"  value="" :checked="isSelectAll" />
						<text>全选</text>
					</label> -->
			</view>
			<view class=" btn u-flex-1  my-bg-main" @click="changeShowControl1">取消</view>
		</view>
	</view>
</template>

<script setup>
	import {$tbShopCategory} from '@/http/yskApi/goods.js'
	import go from '@/commons/utils/go.js';
	import {ColorMain} from '@/commons/color.js'
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	const props = defineProps({
		bottom: {
			type: [Number, String],
			default: 30
		},
		categoryName:{
			type:String,
			default:''
		},
		categoryShow:{
			type:Boolean,
			default:false
		}
	})
	

	let showControl1 = ref(true)
	const emits = defineEmits(['toggleCategory','controlChange','allCheckedChange','offShelf','categoryChange'])

	function emitToggleCategory() {
		emits('toggleCategory')
	}

	function changeShowControl1() {
		showControl1.value = !showControl1.value
		if(!showControl1.value){
			isSelectAll.value=false
		}
		emits('controlChange',!showControl1.value)
	}

	let isSelectAll = ref(false)

	function changeIsSelectAll() {
		console.log('changeIsSelectAll');
		isSelectAll.value = !isSelectAll.value
		emits('allCheckedChange',isSelectAll.value)
	}

	function getComputedStyle() {
		return {
			bottom: props.bottom + 'rpx'
		}
	}
	//设置是否全选
	function setisSelectAll(checked){
		isSelectAll.value =checked
	}
	defineExpose({
		setisSelectAll
	})
	
	//下架
	function offShelf(){
		emits('offShelf')
	}
</script>

<style lang="scss" scoped>
	.scale7 {
		transform: scale(0.7);
	}

	.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;
			box-sizing: border-box;
		}
		.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 {
			overflow: hidden;
			// padding: 0 28rpx;
		}
	}
</style>