<template>
	<view class="page" :style="themeColor">
		<view
			class="flex flex-direction flex-wrap align-stretch justify-center benben-position-layout flex commodityManagement_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between commodityManagement_fd0_0'>
				<view class='flex flex-wrap align-center commodityManagement_fd0_0_c0' @tap.stop="handleJumpDiy"
					data-type="back" data-url="1">
				</view>
				<view class='flex flex-wrap align-center'>
					<text class='commodityManagement_fd0_0_c1_c0'>商品管理</text>
				</view>
				<view class='flex align-center justify-end commodityManagement_fd0_0_c2' @tap.stop="handleJumpDiy"
					data-type="navigateTo" :data-url="`/pages/spgl/addProduct/addProduct`">
					<image class='commodityManagement_fd0_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"94.png"'></image>
					<text class='commodityManagement_fd0_0_c2_c1'>添加商品</text>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>

		<view class="footer-select" :style="{height: pageHeight - 95 - StatusBar + 'px'}">
			<scroll-view scroll-y="true" class="left">
				<view class="menu-item text-sm" :class="cid==item.aid?'active':''" v-for="(item, index) in CategoryList"
					:key="index" @tap="CategoryClick(item)">
					<image v-if="item.aid==0" :src='STATIC_URL+"hot.png"'></image>
					<view class="">{{item.name}}</view>
				</view>
			</scroll-view>
			<view class="right">
				<scroll-view scroll-y="true" class="right-scroll">
					<view class="right-scroll-menu">
						<view @tap="saleTapMenu(1)" :class="is_sale==1?'active':''">
							出售中
							<!-- <text></text> -->
						</view>
						<view @tap="saleTapMenu(2)" :class="is_sale!=1?'active':''">
							下架中
							<!-- <text></text> -->
						</view>
					</view>
					<view class="right-warp" v-if="batch_show" @click="handleCheckAll">
						<image v-if="all_choose" :src='STATIC_URL+"44.png"'></image>
						<image v-else :src='STATIC_URL+"49.png"'></image>
						<text> 全选</text>
					</view>
					<view class="goods-item" v-if="listData.length>0" v-for="(item, index) in listData" :key="index">
						<view class="goods-item-warp">
							<view class="goods-item-choose" v-if="batch_show">
								<image v-if="item.checked" @tap="checTap(item,index)" :src='STATIC_URL+"44.png"'>
								</image>
								<image v-else @tap="checTap(item,index)" :src='STATIC_URL+"49.png"'></image>
							</view>
							<view class="goods-item-image">
								<image mode="aspectFill" :src="item.thumb"></image>
								<!-- <view class="image-pic" v-if="item.is_sale!=1">
									<image src="/static/shop/xiajia.png"></image>
								</view> -->
							</view>
							<view class="goods-item-name" :class="batch_show?'':'goods-item-name1'">
								<text class="goods-name">{{item.name}}</text>
								<view class="goods-money">
									<text class="salse">月销{{item.sales_sum}} </text>
									<view class="goods-item-money">
										<text class="discount-price">¥<text>{{item.shop_price}}</text></text>
										<text class="original-price">¥{{item.market_price}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="goods-status" v-if="!batch_show">
							<view class="" @tap.stop="edit(item)">编辑</view>
							<view class="active" v-if="item.is_sale==1" @tap="saleTap(item,index)">下架</view>
							<view class="active1" v-else @tap="saleTap(item,index)">上架</view>
						</view>
					</view>
					<fu-empty-ui v-if="listData.length<=0"></fu-empty-ui>
				</scroll-view>
			</view>
		</view>

		<view class="fotter" v-if="!batch_show">
			<view class="" @tap="handleJump" data-url="/pages/spgl/commodityManagement/commodityManagement">管理分类</view>
			<view class="active" @tap="batch(1)">批量管理</view>
		</view>
		<view class="fotter" v-if="batch_show">
			<view class="" @tap="batch(2)">取消</view>
			<view v-if="is_sale!=1" class="active1" @tap="batchTap(1)">上架</view>
			<view v-if="is_sale==1" class="active1" @tap="batchTap(2)">下架</view>
			<view class="active" @tap="batchTap(3)">删除</view>
		</view>
		<view :style="{height: '130rpx'}"></view>


	</view>
</template>
<script>
	export default {
		components: {},


		data() {
			return {
				cid: 0,
				CategoryList: [],
				keyword: '',
				listData: [],
				batch_show: false,
				all_choose: false, //是否全选
				is_sale: '1', //1=上架，0=下架
				pageHeight: 0
			};
		},
		onLoad() {
			let platInfo = uni.getSystemInfoSync();
			console.log(platInfo)
			this.pageHeight = platInfo.windowHeight
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		onShow() {
			this.goodsCategoryFind()
			this.goodsList()
		},

		methods: {
			//分类列表
			goodsCategoryFind() {
				this.CategoryList = [{
					name: '热卖',
					aid: 0
				}]
				this.$api.post(global.apiUrls.post6487d63dc3e21).then(res => {
					if (res.data.code == 1) {
						this.CategoryList = [...this.CategoryList,...res.data.data]
						console.log(this.CategoryList)
					}
				})
			},
			//商品列表
			goodsList() {
				this.$api.post(global.apiUrls.post6486d3d711b65, {
					cid: this.cid,
					keyword: this.keyword,
					is_sale: this.is_sale,
					pageSize: 100
				}).then(res => {
					console.log(res)
					if (res.data.code == 1) {
						if (res.data.data.data.length > 0) {
							this.listData = res.data.data.data;
							this.listData.forEach(res => {
								res.checked = false
							})
						} else {
							this.listData = []
						}
						console.log(this.listData)
					} else {
						this.listData = []
					}
				})
			},
			//上下架操作
			saleTap(item, index) {
				let content = item.is_sale == 1 ? '您确定下架该商品吗？' : '您确定上架该商品吗？';
				let that = this;
				uni.showModal({
					title: '温馨提示',
					content: content,
					cancelText: '取消',
					confirmText: '确定',
					success(res) {
						if (res.confirm) {
							that.$api.post(global.apiUrls.post6486d6892d380, {
								id: item.aid
							}).then(res => {
								console.log(res)
								that.$message.info(res.data.msg)
								if (res.data.code == 1) {
									that.listData.splice(index, 1)
								}
							})
						}
					}
				});
			},
			//编辑商品跳转
			edit(item) {
				console.log(item)
				uni.navigateTo({
					url: '/pages/spgl/addProduct/addProduct?id=' + item.aid
				})
			},
			//商品是否选中的切换
			checTap(item, index) {
				let list = this.listData;
				this.listData[index].checked = !this.listData[index].checked;
				list = list.map((item) => {
					item.checked = item.checked;
					return item;
				})
				this.all_choose = list.every(i => i.checked);
				console.log(this.all_choose)
				this.listData = list
			},
			//点击全选
			handleCheckAll() {
				this.all_choose = !this.all_choose;
				this.listData = this.listData.map(item => {
					item.checked = this.all_choose;
					return item;
				})
			},
			//批量上下架
			batchTap(index) {
				console.log(this.listData)
				let list = this.listData;
				let ids = [];
				list.forEach(item => {
					if (item.checked) {
						ids.push(item.aid);
					}
				});
				const cart_ids = ids.join(',');
				console.log(index)
				
				if (index == 3) {
					if (!cart_ids) return this.$message.info('请选择删除的商品')
					this.$api.post(global.apiUrls.post6486d7cae40ad, {
						ids: cart_ids,
					}).then(res => {
						this.$message.info(res.data.msg)
						if (res.data.code == 1) {
							this.goodsList()
						}
					})
				} else {
					if (!cart_ids) return this.$message.info('请选择上下架的商品')
					this.$api.post(global.apiUrls.post6486d6daa3505, {
						ids: cart_ids,
						is_sale: index
					}).then(res => {
						this.$message.info(res.data.msg)
						if (res.data.code == 1) {
							this.goodsList()
							this.all_choose = false
						}
					})
				}
			},
			saleTapMenu(type) {
				this.is_sale = type;
				this.all_choose = false
				this.goodsList()
			},
			//搜索
			searchTap() {
				if (!this.keyword) return this.$message.info(`${this.LANGUAGE_DATA['请输入商品名称'][this.LANGUAGE]}`);
				this.goodsList()
			},
			clearTap() {
				this.keyword = "";
				this.goodsList()
			},
			//分类切换
			CategoryClick(item) {
				this.cid = item.aid;
				this.all_choose = false;
				this.listData = []
				this.goodsList()
			},
			//批量管理
			batch(index) {
				this.batch_show = !this.batch_show
				if (index == 2 && this.all_choose) {
					this.all_choose = !this.all_choose;
					this.listData = this.listData.map(item => {
						item.checked = this.all_choose;
						return item;
					})
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(248, 248, 248, 1);
		background-size: 100% auto !important;
	}

	page {
		// padding-bottom: 240rpx;
		background-color: #F8F8F8;

		.serach {
			width: 750rpx;
			padding: 20rpx 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #F2F2F2;

			.search-warp {
				width: 702rpx;
				height: 72rpx;
				padding: 0 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				border-radius: 36rpx;

				image {
					width: 26rpx;
					height: 26rpx;
				}

				input {
					width: 540rpx;
					padding-left: 16rpx;
					font-size: 28rpx;
				}

				.iconfont {
					color: #999;
				}
			}

			.search-box {
				font-size: 32rpx;
				color: #F64722;
			}
		}

		//底部筛选
		.footer-select {
			display: flex;
			height: 100vh;
			padding-top: 24rpx;
			background-color: #F8F8F8;
			.left {
				flex-shrink: 0;
				height: 100%;
				width: 174rpx;
				background-color: #fff;

				.menu-item {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					border-top: none;
					border-left: none;
					font-size: 28rpx;
					color: #666;
					background-color: #fff;

					image {
						width: 26rpx;
						height: 30rpx;
						margin-right: 8rpx;
					}

					view {
						width: 110rpx;
						word-break: break-all;
						overflow-wrap: break-word;
						word-wrap: break-word;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					&:first-child {}
				}

				.active {
					font-weight: bold;
					color: #FF9300;
					font-size: 32rpx;
					background-color: #F8F8F8;
					border-radius: 0px 0px 0px 0rpx;
				}
			}

			.right {
				width: 544rpx;
				display: flex;
				flex-direction: column;
				padding-left: 32rpx;
				// padding-bottom: 20rpx;
				
				.right-warp {
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;

					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 24rpx;
					}
				}

				.right-scroll {
					// height: calc(100% - 42rpx);
					height: 100%;

					.right-scroll-menu {
						display: flex;
						align-items: center;
						margin-bottom: 10rpx;
						view {
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-left: 80rpx;
							font-weight: bold;
							color: #8E8E93;
						}

						image {
							width: 40rpx;
							height: 15rpx;
							display: none;
						}

						text {
							margin-top: 15rpx;
						}

						.active {
							font-weight: bold;
							color: #0E0E0C;

							image {
								display: block;
							}

							text {
								margin-top: 0rpx;
							}
						}
					}

					.goods-item {
						padding: 24rpx;
						display: flex;
						margin-bottom: 24rpx;
						flex-direction: column;
						background: #fff;
						.goods-item-warp {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.goods-item-image {
								position: relative;

								image {
									height: 168rpx;
									width: 168rpx;
									border-radius: 16rpx;
								}

								.image-pic {
									height: 160rpx;
									width: 160rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									top: 0;
									left: 0;
									position: absolute;
									z-index: 99;
									opacity: 0.7;
									background-color: #333;
									border-radius: 16rpx;

									image {
										height: 80rpx;
										width: 80rpx;
									}
								}
							}

							.goods-item-name {
								width: 250rpx;
								height: 160rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.goods-name {
									width: 250rpx;
									font-weight: bold;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}

								.salse {
									font-size: 24rpx;
									color: #999999;
								}

								.goods-item-money {
									margin-top: 11rpx;

									.discount-price {
										color: #FD501E;
										font-size: 24rpx;
										line-height: 36rpx;

										text {
											font-size: 32rpx;
										}
									}

									.original-price {
										font-size: 22rpx;
										color: #999999;
										line-height: 34rpx;
										text-decoration: line-through;
										padding-left: 16rpx;
									}
								}

								.goods-item-zhe {
									display: flex;
									align-items: center;
									font-size: 20rpx;
									color: #FD501E;

									image {
										width: 18rpx;
										height: 18rpx;
										margin-right: 5rpx;
									}
								}
							}

							.goods-item-name1 {
								width: 280rpx;
							}

							.goods-item-choose {
								image {
									width: 36rpx;
									height: 36rpx;
								}
							}
						}

						.goods-status {
							margin-top: 24rpx;
							display: flex;
							align-items: center;

							view {
								width: 188rpx;
								height:64rpx;
								margin-right: 24rpx;
								text-align: center;
								line-height: 64rpx;
								font-size: 24rpx;
								color: #FF9300;
								border-radius: 8rpx;
								background-color: #FFEACC;
							}

							.active {
								color: #666666;
								background-color: #F2F2F2;
								// border: 1rpx solid #BFBFBF;
							}

							.active1 {
								color: #666666;
								background-color: #F2F2F2;
								// border: 1rpx solid #BFBFBF;
							}
						}
					}

					.goods-item-img {
						margin-top: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 369.6rpx;
							height: 261.6rpx;
						}
					}
				}
			}
		}

		.fotter {
			width: 100%;
			height: 100rpx;
			padding: 0 104rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			
			/* #ifdef APP-PLUS */
			bottom: calc(constant(safe-area-inset-bottom) + 0rpx);
			bottom: calc(env(safe-area-inset-bottom) + 0rpx);
			/* #endif */
			
			/* #ifdef H5 */
			bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
			bottom: calc(env(safe-area-inset-bottom) + 100rpx);
			/* #endif */
			
			
			z-index: 999999;
			background-color: #fff;

			view {
				width: 240rpx;
				height: 64rpx;
				margin-left: 24rpx;
				text-align: center;
				line-height: 64rpx;
				font-size: 24rpx;
				color: #fff;
				font-weight: bold;
				border-radius: 32rpx;
				background: #FF9300;
			}

			.active {
				color: #FF9300;
				background: #FFFFFF;
				border: 1rpx solid #FF9300;
			}

			.active1 {
				color: #666666;
				background: #E5E5E5;
			}
		}
	}


	.commodityManagement_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.commodityManagement_fd0_0_c2_c1 {
		font-size: 28rpx;
		font-weight: 500;
		color: #373737;
		line-height: 28rpx;
	}

	.commodityManagement_fd0_0_c2_c0 {
		width: 28rpx;
		height: 28rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 0rpx 10rpx 0rpx 0rpx;
	}

	.commodityManagement_fd0_0_c2 {
		padding: 0rpx 0rpx 0rpx 0rpx;
		width: 200rpx;
	}

	.commodityManagement_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 600;
		color: #373737;
		line-height: 36rpx;
	}

	.commodityManagement_fd0_0_c0 {
		width: 200rpx;
	}

	.commodityManagement_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}
</style>
