<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: #f1f1f1;
}
</style>
<style lang="scss" scoped>
.stock-btns {
	padding: 0 100rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.safe-page {
	background: #f1f1f1;
}

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