<template>
	<view>
		<view class="list">
			<view class="item" v-for="item in listData.list" :key="item.id">
				<view class="top">
					<text class="t">排序值：{{ item.sort }}</text>
					<view class="quantity" @click="showEdtorQuantityHandle(item)">
						<text class="t">库存：{{ item.quantity }}</text>
						<u-icon name="edit-pen" color="#999"></u-icon>
					</view>
				</view>
				<view class="goods-wrap">
					<view class="left">
						<view class="icon" v-if="includesString(item.goodsCategory, '其它商品')">
							<image class="img" :src="item.goodsImageUrl" mode="aspectFill"></image>
						</view>
						<view class="icon border" v-if="includesString(item.goodsCategory, '优惠券')">
							<couponIcon :item="item.couponInfo" typeKey="couponType" v-if="item.couponInfo" />
						</view>
						<view class="info-wrap">
							<text class="name">{{ item.goodsName }}</text>
							<text class="num">{{ item.requiredPoints }}积分 + {{ item.extraPrice || 0 }}元</text>
						</view>
					</view>
					<view class="status-wrap">
						<u-switch v-model="item.status" :active-value="1" :inactive-value="0" @change="statusChange($event, item)"></u-switch>
						<text class="t">
							<template v-if="item.status == 0">上架</template>
							<template v-if="item.status == 1">下架</template>
						</text>
					</view>
				</view>
				<view class="footer-wrap">
					<view class="btn">
						<u-button shape="circle" @click="delHandle(item)">删除</u-button>
					</view>
					<view class="btn">
						<u-button type="primary" shape="circle" @click="toEditor(item)">编辑</u-button>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="listData.status"></u-loadmore>
		<u-popup :show="showEdtorQuantity" mode="center" :safeAreaInsetBottom="false" @close="showEdtorQuantity = false">
			<view class="quantity-wrap">
				<view class="title">
					<text class="t">修改库存</text>
				</view>
				<view class="form-content">
					<u-form :model="quantityItem" :rules="quantityFormRules">
						<u-form-item label="数量">
							<u-input v-model="quantityItem.quantity" placeholder="请输入数量" @change="quantityInput" clearable></u-input>
						</u-form-item>
					</u-form>
				</view>
				<view class="quantity-footer">
					<view class="btn">
						<u-button style="width: 100%" shape="circle" @click="showEdtorQuantity = false">取消</u-button>
					</view>
					<view class="btn">
						<u-button type="primary" style="width: 100%" shape="circle" @click="submitQuntity">确认</u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { onReachBottom } from '@dcloudio/uni-app';
import { pointsGoodsPage, pointsGoodsPost, pointsGoodsDel } from '@/http/api/market/point.js';
import { filterNumberInput, includesString } from '@/utils/index.js';
import couponIcon from './coupon-icon.vue';

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

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

// 积分:商品:列表
async function pointsGoodsPageAjax(page = listData.page, isPull = false) {
	try {
		const res = await pointsGoodsPage({
			page: page,
			size: listData.size
		});

		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);
	}
	if (isPull) {
		setTimeout(() => {
			uni.showToast({
				title: '刷新成功',
				icon: 'none'
			});
			uni.stopPullDownRefresh();
		}, 300);
	}
}

// 状态修改
function statusChange(e, item) {
	pointsGoodsPostAjax(item);
}

// 积分:商品:新增/修改
async function pointsGoodsPostAjax(item) {
	try {
		await pointsGoodsPost(item);
		pointsGoodsPageAjax();
	} catch (error) {
		console.log(error);
	}
}

// 显示修改库存
const quantityItem = ref({});
const showEdtorQuantity = ref(false);
const quantityFormRules = ref({
	quantity: [
		{
			required: true,
			trigger: ['blur'],
			message: '请输入',
			validator: (rule, value, callback) => {
				if (quantityItem.value.quantity < 0 || quantityItem.value.quantity === '') {
					return false;
				} else {
					return true;
				}
			}
		}
	]
});

function quantityInput(e) {
	setTimeout(() => {
		quantityItem.value.quantity = filterNumberInput(e, 1);
	}, 50);
}

function showEdtorQuantityHandle(item) {
	quantityItem.value = { ...item };
	showEdtorQuantity.value = true;
}

// 提交库存修改
async function submitQuntity() {
	try {
		uni.showLoading({
			title: '保存中...',
			mask: true
		});
		await pointsGoodsPost(quantityItem.value);
		setTimeout(() => {
			uni.showToast({
				title: '保存成功',
				icon: 'none'
			});
		}, 300);
		pointsGoodsPageAjax();
		showEdtorQuantity.value = false;
	} catch (error) {
		console.log(error);
	}
	uni.hideLoading();
}

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

function toEditor(item) {
	uni.navigateTo({
		url: `/pageMarket/points/addProduct?id=${item.id}`
	});
}

defineExpose({
	reachBottom,
	pointsGoodsPageAjax
});

onMounted(() => {
	pointsGoodsPageAjax();
});
</script>

<style scoped lang="scss">
.list {
	padding-bottom: 28upx;
	.item {
		border-radius: 16upx;
		background-color: #fff;
		padding: 28upx;
		&:not(:first-child) {
			margin-top: 28upx;
		}
		.top {
			display: flex;
			align-items: center;
			gap: 44upx;
			.t {
				font-size: 24upx;
				color: #666;
			}
			.quantity {
				display: flex;
				align-items: center;
				gap: 4upx;
			}
		}
		.goods-wrap {
			display: flex;
			padding: 28upx 0;
			.left {
				flex: 1;
				display: flex;
				align-items: center;
				.icon {
					$size: 180upx;
					width: $size;
					height: $size;
					&.border {
						border: 1px solid #ececec;
						border-radius: 16upx;
						padding: 16upx;
					}
					.img {
						width: 100%;
						height: 100%;
						border-radius: 16upx;
					}
				}
				.info-wrap {
					display: flex;
					flex-direction: column;
					gap: 28upx;
					padding-left: 20upx;
					.name {
						font-size: 28upx;
						font-weight: bold;
						color: #333;
					}
				}
			}
			.status-wrap {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 4upx;
				.t {
					font-size: 24upx;
					color: #666;
				}
			}
		}
		.footer-wrap {
			display: flex;
			justify-content: flex-end;
			gap: 28upx;
			.btn {
				width: 140upx;
			}
		}
	}
}
.quantity-wrap {
	width: 80vw;
	.title {
		display: flex;
		justify-content: center;
		padding: 28upx;
		.t {
			font-size: 32upx;
			font-weight: bold;
			color: #333;
		}
	}
	.form-content {
		padding: 0 28upx;
	}
	.quantity-footer {
		display: flex;
		gap: 28upx;
		padding: 28upx;
		.btn {
			flex: 1;
		}
	}
}
</style>
