<template>
	<view class="safe-page">
		<view class="goods-list u-p-30">
			<view class="u-m-b-32" v-for="(item,index) in pageData.list" :key="index">
				<my-category 
				@del="categoryDel"
				@useTypeClick="categoryUseTypeClick" 
				@changeClick="goodsChangeClick"  
				@radioClick="goodsRadioClick" 
				:index="index" :data="item" 
				:showChecked="showChecked"
				 :showDetail="pageData.showGoodsDetail"></my-category>
			</view>
			<view class="u-m-t-44">
				<my-pagination  :size="pageData.query.size" :totalElements="pageData.totalElements"   @change="pageChange"></my-pagination>
				<view style="height: 200rpx;"></view>
			</view>
		</view>	
		
		<!-- 删除弹窗 -->
		<my-model desc="请确保此分类下没有任何商品确认删除?"  ref="delModel" @confirm="delModelConfirm"></my-model>
		
		<!-- 分类修改排序弹窗 -->
		<my-model  ref="goodsSortModel" title="修改排序" @close="goodsSortModelClose">
			<template #desc>
				<view class="u-p-40 u-text-left">
					<view>
						<view class="">排序:</view>
						<view class="u-m-t-24">
							<uni-easyinput  v-model="sort"  placeholder="请输入排序"></uni-easyinput>
						</view>
					</view>
				</view>
			
			</template>
			<template #btn>
				<view class="stock-btns u-p-b-40">
					<my-button shape="circle"  @tap="goodsSortModelSave">确认修改</my-button>
					<my-button shape="circle" type="default" @tap="goodsSortModelCancel">取消</my-button>
				</view>
			</template>
		</my-model>
		<!-- 分类修改排序弹窗 -->
		<my-model mode="bottom" ref="goodsTypeModel" :title="goodsTypeModelData.title" >
			<template #desc>
				<view class="u-p-30 u-m-t-30">
					<view class="u-flex u-m-b-20 u-row-between u-p-t-10 u-p-b-10" v-for="(item,index) in goodsTypeModelData.useTypes" :key="index">
						<view class="font-bold color-000">{{item.name}}</view>
						<my-switch v-model="item.isOpen"></my-switch>
					</view>
				</view>
				
			</template>
			<template #btn>
				<view class="u-flex  gap-20 u-p-30 u-p-b-40 ">
					<view class="u-flex-1">
						<my-button shape="circle" color="#000"  type="default" @tap="hideAllUseTypes">一键隐藏</my-button>
					</view>
					<view class="u-flex-1">
						<my-button shape="circle" @tap="showAllUseTypes">一键显示</my-button>
					</view>
				</view>
			</template>
		</my-model>
		
		<view class="fixed-b">
			<my-button :height="80" shape="circle" showShadow @tap="toAddCategory">新建分类</my-button>
		</view>
	</view>

</template>

<script setup>
	import {
		reactive, ref, watch
	} from 'vue';
	import {onShow} from '@dcloudio/uni-app'
	import go from '@/commons/utils/go.js';
	import myCategory from './components/category.vue'
	import infoBox from "@/commons/utils/infoBox.js"
	import myPagination from '@/components/my-components/my-pagination.vue'
	import myModel from "@/components/my-components/my-model.vue"
	import myButton from "@/components/my-components/my-button.vue"
	import mySwitch from "@/components/my-components/my-switch.vue"
	import {$productCategory} from '@/http/yskApi/goods.js'
	
	
	const tabsList = ['简洁', '详情']
	const statesTabsList = ['在售中', '已下架']
	const states1TabsList = ['全部', '已售罄']
	const control=ref(null)
	const delModel=ref(null)
	const goodsSortModel=ref(null)
	const goodsTypeModel=ref(null)
	let sort=ref(0)
	const goodsTypeModelData=reactive({
		title:'',
		index:null,
		useTypes:[
			{name:'堂食',isOpen:true},
			{name:'自取',isOpen:true},
			{name:'外卖',isOpen:true},
			{name:'快递',isOpen:true}
		]
	})
	const pageData = reactive({
		stateCurrent:0,
		stateCurrent1:0,
		componentBottom:264,
		search: {
			value: '',
			placeholder: '输入搜索的商品'
		},
		showGoodsDetail:false,
		query:{
			page: 0,
			size:10
		},
		totalElements:0,
		list:[]
		
	})
	
	async function init() {
		const res=await $productCategory.get(pageData.query)
		pageData.list=res.content.map(v=>{
			return {
				...v,
				isSellNone:false,
				checked:false,
				showDetail:false,
				useTypes:[
					{name:'堂食',isOpen:true},
					{name:'自取',isOpen:true},
					{name:'外卖',isOpen:true},
					{name:'快递',isOpen:true}
				]
			}
		})
		pageData.totalElements=res.totalElements
	}
	onShow(()=>{
		init()
	})
	function toAddCategory(){
		go.to('PAGES_CATEGORY_EDIT',{type:'add'})
	}
	
	function hideAllUseTypes(){
		goodsTypeModelData.useTypes.map(v=>{
			v.isOpen=false
		})
		pageData.list[goodsTypeModelData.index].useTypes.map(v=>{
			v.isOpen=false
		})
	}
	
	function showAllUseTypes(){
		goodsTypeModelData.useTypes.map(v=>{
			v.isOpen=true
		})
		pageData.list[goodsTypeModelData.index].useTypes.map(v=>{
			v.isOpen=true
		})
	}
	
	function goodsSortModelCancel(){
		console.log('goodsSortModelCancel');
		goodsSortModel.value.close()
	}
	function goodsSortModelSave(){
		console.log('goodsSortModelSave');
		// $productCategory.update()
	}
	
	
	function categoryUseTypeClick(index){
		goodsTypeModelData.index=index
		goodsTypeModelData.useTypes=pageData.list[index].useTypes
		goodsTypeModel.value.open()
	}
	
	
	//点击修改按钮弹出修改商品弹窗
	function goodsChangeClick(index){
		console.log(index);
		sort.value=pageData.list[index].sort
		goodsSortModel.value.open()
	}
	
	function statesTableClick(index){
		pageData.stateCurrent=index
	}
	function states1TableClick(index){
		pageData.stateCurrent1=index
	}
	
	let test=ref(false)
	
	function tabsChange(i) {
		console.log(i);
		pageData.showGoodsDetail=i?true:false
	}

	
	//改变商品的选中状态
	function changeGoodsChecked(checked,index){
		if(index!==undefined){
			 pageData.list[index].checked=checked
		}else{
			pageData.list.map(v=>{
				v.checked=checked
			})
		}
		control.value.setisSelectAll(isAllChecked()?true:false)
	}
	
	
	// 获取已经选中的商品
	function getChechkedlist(){
		return pageData.list.filter(v=>v.checked)
	}
	//是否全部选中
	function isAllChecked(){
		return getChechkedlist().length===pageData.list.length
	}
	// 是否有商品选中
	function isHasChekdGoods(){
		return getChechkedlist().length?true:false
	}

	function searchFunc() {
		console.log('searchFunc');
	}
	
	let showChecked=ref(false)
	
	//商品start
	
	function goodsRadioClick(index){
		var checked=!pageData.list[index].checked
		changeGoodsChecked(checked,index)
	}

	
	//下架
	function offShelf(){
		const hasCheckedArr=getChechkedlist()
		const hasChecked=isHasChekdGoods()
		if(!hasChecked){
			return infoBox.showToast('您还没有选中商品！')
		}
		model.value.open()
	}
	let nowCateIndex=null
	function categoryDel(index){
		nowCateIndex=index
		delModel.value.open()
	}
	//删除分类确认
	function delModelConfirm(){
		console.log('confirm');
		pageData.list.splice(nowCateIndex,1)
		delModel.value.close()
	}
	
	//商品end
	
	//控制条
	function controlChange(bol){
		console.log(bol);
		showChecked.value=bol
	}
	
	

	// 全选
	function allCheckedChange(checked){
		changeGoodsChecked(checked)
	}
	
	// 页数改变事件
	function pageChange(page) {
		pageData.query.page=page-1
		init()
	}
	
	
	//分类
	const category=ref(null)
	function toggleCategory(){
		category.value.toggle()
	}
	function cateClick(cate){
		console.log(cate);
	}
</script>
<style scoped>
	page{
		background: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.stock-btns{
		padding: 0 100rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	.safe-page{
		background: #F9F9F9;
	}
	.icon-guige{
		width: 42rpx;
		height: 42rpx;
	}
	.bg-fff{
		background-color:#fff;
	}
	.myTabs {
		margin: 0 auto;
		width: 434rpx;
		height: 64rpx;
	}

	.input-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 26rpx;
		background-color: $J-bg-ff;

		.input-main {
			flex: 1;
			display: flex;
			align-items: center;
			height: 64rpx;

			image {
				padding: 22rpx;
				width: 26rpx;
				height: 26rpx;
			}

			input {
				flex: 1;
				font-size: 27rpx;
			}

			::v-deep uni-button {
				font-size: 28rpx;
				color: $my-main-color;
				background: rgba(255, 255, 255, 1);
			}

			::v-deep.uni-easyinput {
				.uni-easyinput__content {
					background-color: $J-bg-f5 !important;
					border-radius: $J-b-r12;

					.uni-easyinput__content-input {
						padding-left: 0 !important;

						.uni-input-input {
							border-radius: $J-b-r12 !important;
							overflow: hidden !important;
						}
					}

					.uni-input-placeholder {
						font-size: 27rpx;
					}

					.uni-icons {
						color: rgba(230, 230, 230, 1) !important;
					}
				}
			}
		}
	}

	.input-icon {
		position: relative;
		z-index: 10;
	}

	.search-button {
		position: absolute;
		right: 0;
		background-color: transparent !important;
		color: transparent !important;
	}
	.states1{
		margin-top: 78rpx;
		.item{
			font-size: 24rpx;
			color: #666;
			margin-right: 70rpx;
			background: #F4F4F4;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
		.item.active{
			background: #E6F0FF;
			color: $my-main-color;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
	.fixed-b{
		position: fixed;
		left: 110rpx;
		right: 110rpx;
		bottom: 110rpx;
	}
</style>