<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 btn">
				<view class="u-m-r-58">
					<label class="radio" @click="changeIsSelectAll">
						<radio class="scale7" @tap.stop="changeIsSelectAll" :color="ColorMain"  value="" :checked="isSelectAll" />
						<text>全选</text>
					</label>
				</view>
				<view class="u-p-l-30 u-p-r-30 my-bg-main" @click="changeShowControl1">取消</view>
				<view class="u-p-l-60 u-p-r-60 borde-r" @click="offShelf">下架</view>
			</view>
			<view class=" u-flex u-row-center btn" @click="emitToggleCategory">
				<text class="u-m-r-10">分类至</text>
				<uni-icons type="right" size="16" color="#fff"></uni-icons>
			</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
		emits('controlChange',!showControl1.value)
	}

	let isSelectAll = ref(false)

	function 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: 30rpx;
		right: 30rpx;
		z-index: 100;
		background: #3E3A3A;
		border-radius: 100rpx;
		.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>