<template>
	<view class="container">
		<view class="search-wrap" :style="{ top: `${top}px` }">
			<view class="ipt">
				<u-input
					placeholder="请输入商品名称"
					suffixIcon="search"
					shape="circle"
					clearable
					v-model="queryForm.wareName"
					@confirm="resetGetList()"
					@clear="resetGetList()"
				></u-input>
			</view>
			<div class="ipt" @click="showStatusSheet = true">
				<u-input placeholder="上架状态" readonly v-model="queryForm.onlineStatusLabel" suffixIcon="arrow-down"></u-input>
			</div>
		</view>
		<view class="list">
			<view class="item" v-for="item in listData.list" :key="item.id">
				<view class="header">
					<text class="t1">成团人数：{{ item.groupPeopleNum }}</text>
					<text class="t1">成团期限（小时）：{{ item.groupTimeoutHour }}</text>
				</view>
				<view class="goods-info">
					<view class="img-wrap">
						<image class="img" :src="item.wareImgs.split(',')[0]" mode="aspectFill"></image>
					</view>
					<view class="info">
						<text class="t1">{{ item.wareName }}</text>
						<text class="t1">原价：{{ item.originalPrice }}</text>
						<text class="t1">拼团价：{{ item.groupPrice }}</text>
					</view>
					<view class="status" v-if="item.shopId == shopInfo.id">
						<view class="row">
							<u-switch v-model="item.onlineStatus" :active-value="1" :inactive-value="0" @change="onlineStatusChange($event, item)"></u-switch>
						</view>
						<text class="t1">
							<template v-if="item.onlineStatus">下架</template>
							<template v-else>上架</template>
						</text>
					</view>
				</view>
				<view class="footer-wrap" v-if="item.shopId == shopInfo.id">
					<view class="btn">
						<button class="wx-btn" type="primary" open-type="share" @click="setShareOptions(item)">分享</button>
					</view>
					<template v-if="!item.onlineStatus">
						<view class="btn">
							<u-button shape="circle" @click="delHandle(item)">删除</u-button>
						</view>
						<view class="btn">
							<u-button type="primary" shape="circle" @click="editorHandle(item)">编辑</u-button>
						</view>
					</template>
					<template v-else>
						<view class="btn" style="width: 150px">
							<u-button shape="circle">下架后编辑/删除</u-button>
						</view>
					</template>
				</view>
			</view>
		</view>
		<u-loadmore :status="listData.status"></u-loadmore>
		<u-action-sheet
			:actions="[
				{ name: '全部', value: '' },
				{ name: '上架', value: 1 },
				{ name: '下架', value: 0 }
			]"
			title="上架状态"
			:show="showStatusSheet"
			cancelText="取消"
			@close="showStatusSheet = false"
			@select="sheetConfirm"
		></u-action-sheet>
	</view>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { getGbWarePage, editOnlineStatus, deleteGbWare } from '@/http/api/ware.js';

const emits = defineEmits(['share']);
function setShareOptions(item) {
	item.wareImgs = item.wareImgs.split(',');
	emits('share', item);
}

const shopInfo = ref('');

const props = defineProps({
	top: {
		type: Number,
		default: 0
	}
});

const showStatusSheet = ref(false);
const queryForm = reactive({
	wareName: '',
	onlineStatusLabel: '',
	onlineStatus: ''
});

// 选择状态
function sheetConfirm(e) {
	queryForm.onlineStatusLabel = e.name;
	queryForm.onlineStatus = e.value;
	resetGetList();
}

const listData = reactive({
	page: 1,
	size: 10,
	status: 'loading',
	list: []
});

function reachBottom() {
	if (listData.status != 'nomore') {
		listData.page++;
		getGbWarePageAjax();
	}
}

// 改变状态
async function onlineStatusChange(e, item) {
	try {
		const res = await editOnlineStatus({
			id: item.id,
			onlineStatus: item.onlineStatus
		});
	} catch (error) {
		console.log(error);
		item.onlineStatus = !item.onlineStatus;
	}
}

// 删除
async function delHandle(item) {
	uni.showModal({
		title: '注意',
		content: `确定要删除${item.wareName}商品吗？`,
		success: async (res) => {
			try {
				if (res.confirm) {
					uni.showLoading({
						title: '删除中...',
						mask: true
					});
					const res = await deleteGbWare(item.id);
					let index = listData.list.findIndex((val) => val.id == item.id);
					listData.list.splice(index, 1);
				}
			} catch (error) {
				console.log(error);
			}
			uni.hideLoading();
		}
	});
}

// 编辑
function editorHandle(item) {
	uni.setStorageSync('groupGoods', item);
	uni.navigateTo({
		url: '/pageMarket/groupGoods/addGoods?type=editor'
	});
}

// 重置列表请求
function resetGetList() {
	listData.page = 1;
	getGbWarePageAjax();
}

// 拼团商品-列表
async function getGbWarePageAjax() {
	try {
		const res = await getGbWarePage({
			page: listData.page,
			size: listData.size,
			...queryForm
		});

		if (listData.page == 1) {
			listData.list = res.records;
		} else {
			listData.list.push(...res.records);
		}

		if (res.pageNumber >= res.totalPage) {
			listData.status = 'nomore';
		}
	} catch (error) {
		console.log(error);
	}
	setTimeout(() => {
		uni.stopPullDownRefresh();
	}, 300);
}

defineExpose({
	reachBottom,
	resetGetList
});

onMounted(() => {
	shopInfo.value = uni.getStorageSync('shopInfo');
	resetGetList();
});
</script>

<style scoped lang="scss">
.container {
	padding-top: 50px;
}
.search-wrap {
	display: flex;
	align-items: center;
	gap: 28upx;
	width: 100%;
	height: 50px;
	position: fixed;
	left: 0;
	background-color: #fff;
	z-index: 999;
	padding: 0 28upx;
	.ipt {
		flex: 1;
	}
}
.list {
	padding-bottom: 28upx;
	.item {
		background-color: #fff;
		border-radius: 20upx;
		padding: 28upx;
		&:not(:first-child) {
			margin-top: 28upx;
		}
		.header {
			display: flex;
			justify-content: space-between;
			.t1 {
				font-size: 28upx;
				color: #666;
			}
		}
		.goods-info {
			display: flex;
			align-items: center;
			padding: 28upx 0;
			.img-wrap {
				$size: 160upx;
				position: relative;
				width: $size;
				height: $size;
				.img {
					width: 100%;
					height: 100%;
					border-radius: 8upx;
				}
			}
			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 28upx;
				gap: 4px;
				.t1 {
					font-size: 28upx;
					color: #333;
				}
			}
			.status {
				display: flex;
				align-items: center;
				flex-direction: column;
				gap: 4px;
				.t1 {
					font-size: 28upx;
					color: #333;
				}
			}
		}
		.footer-wrap {
			display: flex;
			justify-content: flex-end;
			gap: 28upx;
			.btn {
				width: 140upx;
				.wx-btn {
					border-radius: 100px;
					height: 40px;
					line-height: 40px;
					font-size: 28upx;
					background-color: #318afe;
				}
			}
		}
	}
}
</style>
