<template>
	<view class="warp">
		<!-- 商品开始-->
		<view class="footer-select">
			<scroll-view scroll-y="true" class="left">
				<view class="menu-item" :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>
					{{item.name}}
				</view>
			</scroll-view>
			<view class="right">
				<scroll-view scroll-y="true" class="right-scroll">

					<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">
								<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 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 class="goods-item-zhe" v-if="item.buy_num>0">
										<!-- <image src="../../../index/static/shop-zhe.png"></image> -->
										{{item.discount_ratio}}{{ i18n['折'] }}
										{{ i18n['限'] }}{{item.buy_num}}{{ i18n['份'] }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<fu-empty-ui v-if="listData.length<=0"></fu-empty-ui>
				</scroll-view>
			</view>
		</view>
		<!-- 商品结束-->
		<view class="fotter">
			<view class="" @tap="batchBtn">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cid: 0,
				CategoryList: [],
				keyword: '',
				listData: [],
				batch_show: false,
				all_choose: false, //是否全选
				is_sale: '1', //1=上架，0=下架
				thumb: '',
				id: ''
			}
		},
		onLoad(options) {
			this.thumb = options.thumb;
			this.id = options.id;
			this.setNavigationBarTitle(this.i18n['选择关联商品'])
		},
		onShow() {
			this.goodsCategoryFind()
			this.goodsList()
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/index/shop/goods_add/index'
			})
		},
		methods: {
			//分类列表
			goodsCategoryFind() {
				this.CategoryList = [{
					name: '热卖',
					aid: 0
				}]
				this.$api.post(global.apiUrls.post6487d63dc3e21).then(res => {
					if (res.data.code == 1) {
						this.CategoryList.push(...res.data.data)
					}
				})
			},
			//商品列表
			goodsList() {
				this.$api.post(global.apiUrls.post6486d3d711b65, {
					cate_id: this.cid,
					keyword: this.keyword,
					is_sale: this.is_sale
				}).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 = []
					}
				})
			},
			batchBtn() {
				let proficiency = (this.listData.map((item, index) => (item.checked ? `${item.aid}` : '')).filter(item =>
					item != '')).join(',');
				if (!proficiency) return this.$message.info('请选择要关联的商品');
				let that = this
				uni.showModal({
					title: '提示',
					content: '你确定关联该商品吗',
					confirmColor:"#FF9300",
					success(res) {
						if (res.confirm) {
							that.$api.post(global.apiUrls.get6486897b20c58, {
								aid:that.id ,
								// thumb: that.thumb,
								goods_id: proficiency,
							}).then(res => {
								that.$message.info(res.data.msg)
								if (res.data.code == 1) {
									setTimeout(function() {
										uni.navigateBack({})
									}, 300)
								}
							})
						}
					}
				})
			},
			
			
			//商品是否选中的切换
			checTap(item, index) {
				let list = this.listData;
				this.listData[index].checked = !this.listData[index].checked;
				list = list.map((item, i) => {
					if (i == index) {
						item.checked = item.checked;
					} else {
						item.checked = false;
					}
					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;
				})
			},

			
			//分类切换
			CategoryClick(item) {
				this.cid = item.aid;
				this.all_choose = false;
				this.listData = []
				this.goodsList()
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 100rpx;
		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: #ffffff;

			.left {
				flex-shrink: 0;
				height: 100%;
				width: 174rpx;
				background-color: #F6F6F6;

				.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: #F6F6F6;

					image {
						width: 16rpx;
						height: 19rpx;
						margin-right: 8rpx;
					}

					&:first-child {}
				}

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

			.right {
				width: 544rpx;
				display: flex;
				flex-direction: column;
				padding-left: 32rpx;

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

					.right-scroll-menu {
						display: flex;
						align-items: center;
						justify-content: center;

						view {
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-left: 80rpx;
							font-weight: bold;
							color: #666;
						}

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

						text {
							margin-top: 15rpx;
						}

						.active {
							font-weight: bold;
							color: #333;

							image {
								display: block;
							}

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

					.goods-item {
						padding: 24rpx 0;
						display: flex;
						flex-direction: column;
						border-bottom: 1rpx solid #eee;

						.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: 260rpx;
							}

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

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

							view {
								width: 120rpx;
								height: 48rpx;
								margin-right: 24rpx;
								text-align: center;
								line-height: 48rpx;
								font-size: 24rpx;
								color: #FE6304;
								border-radius: 8rpx;
								background-color: #FFF1ED;
							}

							.active {
								color: #333333;
								background-color: #fff;
								border: 1rpx solid #BFBFBF;
							}

							.active1 {
								color: #333333;
								background-color: #fff;
								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 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0rpx;
			z-index: 999999;
			background-color: #F8F8F8;

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

			.active {
				color: #FD501E;
				background: #FFF8F5;
				border: 1rpx solid #FD501E;
			}

			.active1 {
				color: #333333;
				background: #fff;
				border: 1rpx solid #BFBFBF;
			}
		}
	}
</style>
