<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"
				@editName="popupShow($event,'name',true)"
					@editSort="popupShow($event,'sort',true)" @edit="actionsShow" @radioClick="goodsRadioClick"
					@isShowChange="isSHowChange" :index="index" :data="item" :showChecked="showChecked"
					:showDetail="pageData.showGoodsDetail"></my-category>
			</view>
			<view class="u-m-t-44" v-if="pageData.list.length>0">
				<my-pagination :page="pageData.query.page+1" :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>
		<view class="fixed-b">
			<my-button :height="80" shape="circle" font-weight="700" @tap="toAddCategory">新建分组</my-button>
		</view>
	</view>

	<edit-sort @save="updataGroup" :item="popup.selData" v-model:show="popup.sort.show"></edit-sort>
	<edit-name @save="updataGroup" :item="popup.selData" v-model:show="popup.name.show"></edit-name>
	<edit-time @save="updataGroup" :item="popup.selData" v-model:show="popup.time.show"></edit-time>

	<up-action-sheet :round="10" @select="actionSelect" @close="actionsHide" cancelText="取消" :actions="actions.list"
		:show="actions.show"></up-action-sheet>
</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 editSort from './components/edit-sort.vue';
	import editName from './components/edit-name.vue';
	import editTime from './components/edit-time.vue';
	import {
		tbProductGroupGet,
		tbProductGroupDelete,
		tbProductGroupPut,
		upGroupSort,
		tbProductGroupPost
	} from '@/http/yskApi/shop.js'
	const $productCategory = {
		add: tbProductGroupPost,
		del: tbProductGroupDelete,
		update: tbProductGroupPut,
		get: tbProductGroupGet
	}
	const actions = reactive({
		list: [{
			name: '排序',
			color: '#333',
			fontSize: '16'
		}, {
			name: '管理商品',
			color: '#333',
			fontSize: '16'
		},
		{
			name: '售卖时间',
			color: '#333',
			fontSize: '16'
		}
		],
		show: false,
	})

	function actionSelect(e) {
		console.log(e);
		if (e.name == '排序') {
			return popupShow(actions.selIndex, 'sort', true)
		}
		if (e.name == '管理商品') {
			const {id,isShow,name,sort}=actions.selData
			return go.to('PAGES_GOODS_GROUP_EDIT_GOODS', {
				id,isShow,name,sort
			})

		}
		if (e.name == '售卖时间') {
			return popupShow(actions.selIndex, 'time', true)
		}
	}

	function actionsHide() {
		actions.show = false
	}

	function actionsShow(e) {
		console.log(e);
		actions.selData = pageData.list[e]
		actions.selIndex = e
		actions.show = true
	}


	const popup = reactive({
		selIndex: -1,
		selData: {
			sort: ''
		},
		sort: {
			show: false
		},
		name:{
			show: false
		},
		time:{
			show: false
		}
	})

	function popupShow(e, key, show) {
		popup.selData = pageData.list[e]
		popup.selIndex = e
		popup[key].show = show
	}
	async function updataGroup(e) {
		console.log(e);
		const res = await $productCategory.update(e)
		popup.sort.show = false;
		popup.name.show = false;
		popup.time.show = false;
		pageData.list[popup.selIndex] = e
		infoBox.showToast('更新成功')
	}
	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({
		selCategory: '',
		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,
			sort: 'id',
			shopId: uni.getStorageSync('shopId')
		},
		totalElements: 0,
		list: [],
		selCategory: ''
	})

	async function init() {
		const res = await $productCategory.get(pageData.query)
		pageData.list = res.content
		pageData.totalElements = res.totalElements
	}
	onShow(() => {
		init()
	})

	function toAddCategory() {
		go.to('PAGES_GOODS_GROUP_EDIT', {
			type: 'add'
		})
	}



	function goodsSortModelCancel() {
		console.log('goodsSortModelCancel');
		goodsSortModel.value.close()
	}
	async function goodsSortModelSave() {
		console.log('goodsSortModelSave');

		const res = await $productCategory.update({
			...pageData.selCategory,
			sort: sort.value
		})
		infoBox.showToast('修改成功')
		goodsSortModelCancel()
		init()
	}

	async function isSHowChange(data) {
		const res = await $productCategory.update({
			...data
		})
		infoBox.showToast('修改成功')
		// init()
	}

	function categoryUseTypeClick(index) {
		goodsTypeModelData.index = index
		// goodsTypeModelData.useTypes=pageData.list[index].useTypes
		const cateItem = pageData.list[index]
		console.log(cateItem);
		goodsTypeModelData.selCategory = cateItem
		goodsTypeModelData.title = cateItem.name
		goodsTypeModel.value.open()
	}


	//点击修改按钮弹出修改商品弹窗
	function goodsChangeClick(index) {
		console.log(index);
		const goods = pageData.list[index]
		sort.value = goods.sort
		pageData.selCategory = goods
		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()

		uni.showModal({
			title: '提示',
			content: '请确保此分类下没有任何商品确认删除?',
			success: res => {
				if (res.confirm) {
					const islast = pageData.list.length === 1
					$productCategory.del([pageData.list[index].id]).then(res => {
						infoBox.showToast('删除成功')
						if(islast&&pageData.query.page>=1){
							pageData.query.page-=1
						}
						// if(islast&&pageData.query.page>=1){
						// 	pageData.query.page--
						// }
						init()
					})
				}

			},
			fail: () => {},
			complete: () => {}
		});
	}
	//删除分类确认
	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>