<template>
	<view class="safe-page min-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="groupDel" 
					@editName="popupShow($event,'name',true)"
					@editSort="popupShow($event,'sort',true)" 
					@edit="actionsShow" 
					@isShowChange="isSHowChange" :index="index" :data="item"
					:showDetail="pageData.showGoodsDetail"></my-category>
			</view>
			<view class="u-m-t-44" v-if="pageData.list.length>0">
				<my-pagination :page="pageData.query.page" :size="pageData.query.size" :totalElements="pageData.totalElements"
					@change="pageChange"></my-pagination>
				<view style="height: 200rpx;"></view>
			</view>
		</view>


		<view class="fixed-b">
			<my-button :height="80" shape="circle" font-weight="700" @tap="toAddGroup">新建分组</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 } from 'vue';
	import { onShow } from '@dcloudio/uni-app'
	import go from '@/commons/utils/go.js';
	import myCategory from './components/category.vue'
	import editSort from './components/edit-sort.vue';
	import editName from './components/edit-name.vue';
	import editTime from './components/edit-time.vue';
	import { getProdGroupPage, addProdGroup, updateProdGroup, delProdGroup,editProdGroup } from '@/http/api/product.js'
	
	const pageData = reactive({
		showGoodsDetail: false,
		query: {
			page: 1,
			size: 10,
		},
		totalElements: 0,
		list: [],
		selCategory: ''
	})
	
	/**
	 * 编辑列表
	 */
	const actions = reactive({
		list: [{
			name: '排序',
			color: '#333',
			fontSize: '16'
		}, {
			name: '管理商品',
			color: '#333',
			fontSize: '16'
		},
		{
			name: '售卖时间',
			color: '#333',
			fontSize: '16'
		}
		],
		show: false,
	})
	
	
	/**
	 * 编辑数据
	 */
	const popup = reactive({
		selIndex: -1,
		selData: {
			sort: ''
		},
		sort: {
			show: false
		},
		name:{
			show: false
		},
		time:{
			show: false
		}
	})
	
	onShow(() => {
		getList()
	})
	
	/**
	 * 获取分组数据
	 */
	async function getList() {
		const res = await getProdGroupPage(pageData.query)
		pageData.list = res.records
		pageData.totalElements = res.totalRow
		if(res.records.length <= 0&&res.totalPage>1) {
			pageData.query.page = res.totalPage
			getList()
		}
	}
	
	/**
	 * 编辑列表显示
	 * @param {Object} e
	 */
	function actionsShow(e) {
		popup.selData = pageData.list[e]
		popup.selIndex = e
		actions.show = true
	}
	
	/**
	 * 编辑列表隐藏
	 */
	function actionsHide() {
		actions.show = false
	}
	
	/**
	 * 编辑列表选择
	 * @param {Object} e
	 */
	function actionSelect(e) {
		if (e.name == '排序') {
			return popupShow(popup.selIndex, 'sort', true)
		}
		if (e.name == '管理商品') {
			const {id,status,name,sort}=popup.selData
			return go.to('PAGES_GOODS_GROUP_EDIT_GOODS', {
				id,status,name,sort
			})
		}
		if (e.name == '售卖时间') {
			return popupShow(popup.selIndex, 'time', true)
		}
	}
	
	/**
	 * 编辑打开
	 * @param {Object} e
	 * @param {Object} key
	 * @param {Object} show
	 */
	function popupShow(e, key, show) {
		popup[key].show = show
		popup.selIndex = e
		popup.selData = pageData.list[e]
	}

	/**
	 * 编辑确认
	 * @param {Object} e
	 */
	async function updataGroup(e) {
		console.log(e)
		const res = await editProdGroup(e)
		popup.sort.show = false;
		popup.name.show = false;
		popup.time.show = false;
		pageData.list[popup.selIndex] = e
		uni.$utils.showToast('更新成功')
		getList()
	}
		
	/**
	 * 状态修改
	 * @param {Object} data
	 */
	async function isSHowChange(data) {
		const res = await editProdGroup({
			...data
		})
		uni.$utils.showToast('更新成功')
		
	}
	

	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
			}
		]
	})
	
	/**
	 * 新增分组
	 */
	function toAddGroup() {
		go.to('PAGES_GOODS_GROUP_EDIT', {
			type: 'add'
		})
	}

	/**
	 * 删除分组
	 * @param {Object} index
	 */
	function groupDel(index) {
		uni.showModal({
			title: '提示',
			content: '请确保此分组下没有任何商品确认删除?',
			success: res => {
				if (res.confirm) {
					delProdGroup(pageData.list[index].id).then(res => {
						uni.$utils.showToast('删除成功')
						setTimeout(()=>{
							getList()
						},1500)
					})
				}
			},
			fail: () => {},
			complete: () => {}
		});
	}


	// 页数改变事件
	function pageChange(page) {
		pageData.query.page = page
		getList()
	}

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