<template> 
	<view class="container">
		<view class="main-block flex box-pack-between">
			<scroll-view scroll-y class="left-bar">
				<view class="item" :class="[catIndex == -1?'active':'']" @click="onCatChange(-1)">默认</view>
				<view class="item" :class="[catIndex == index?'active':'']" v-for="(item,index) in catList" :key="index" 
				@click="onCatChange(index)">{{item.name}}</view>
			</scroll-view>
			<scroll-view scroll-y class="right-bar">
				<view class="cat-name">{{catIndex == -1?'默认':catList[catIndex].name}}</view>
				<view class="goods-list">
					<view class="item flex" v-for="(item,index) in list" :key="index" @click="toDetail(index)">
					
						<view class="goods-img-block">
							<image :src="getImgPath(item.thumb)" mode="aspectFill" class="goods-img"></image>
							<view class="goods-tips" v-if="item.stock == 0">已售罄</view>
						</view>
						
						<view class="info-block">
							<view class="goods-name text-1 flex flex-y-center box-pack-between arr-r">{{item.name}}</view>
							<view class="stock">库存:{{item.stock}}</view>
							<view class="goods-btm flex flex-y-center box-pack-between">
								<view class="price">￥{{item.price}}</view>
								<view class="btn-block flex flex-y-center">
									<view class="btn" v-if="item.status == 0" @click.stop="onStatusChange(index,1)">上架</view>
									<view class="btn" v-if="item.status == 1" @click.stop="onStatusChange(index,0)">下架</view>
									<view class="btn" style="margin-left:24rpx;" @click.stop="onDel(index)">删除</view>
								</view>
							</view>
						</view>	
					</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				store_id:"",
				typeActive: 1,
				catIndex: -1, //选中分类
				page:1,
				list:[],
				is_bottom:false,
				catList:[]
			}
		},
		
		onLoad(options) {
			this.store_id = options.store_id
			this.getCatList()
		},
		onShow() {
			this.getData(1)
		},
		onReachBottom() {
			if (!this.is_bottom) {
				this.getData(this.page + 1)
			}
		},
		
		methods: {
			getImgPath(path) {
				return this.$siteroot + path
			},
			onTypeChange(index) {
				if (index != this.typeActive) {
					this.typeActive = index
					this.getData(1)
				}
			},
			
			onCatChange(index) {
				if (index != this.catIndex) {
					this.catIndex = index
					this.getData(1)
				}
			},
			
			getData(page) {
				if (page == 1) {
					this.list = []
					this.page = 1
					this.is_bottom = false
				}
				let params = {
					page,
					limit: 10,
					admin_id: uni.getStorageSync("admin_id"),
					type_id: this.catIndex == -1?'':this.catList[this.catIndex].id,
				}
				if(this.typeActive == 2){
					params.status = 1
				}else if(this.typeActive == 3){
					params.status = 0
				}else{
					params.status = ""
				}
				this.request({
					url: 'Smdcshop/jfgoods_lists',
					data: params
				}).then(res => {
					if (res.code == 200 && res.data.length) {
						this.list = this.list.concat(res.data)
						this.page = page
					} else {
						this.is_bottom = true
					}
				})
			},
			
			getCatList(){
				this.request({
					url:'Smdcshop/jftype_index',
					data:{
						admin_id: uni.getStorageSync("admin_id")
					}
				}).then(res=>{
					this.catList = res.data
				})
			},
			
			onStatusChange(index,status){
				this.request({
					url:'Smdcshop/jfgoods_state',
					data:{
						id:this.list[index].id,
						is_show:status
					}
				}).then(res=>{
					this.list[index].status = status == 1 ?1:0
				})
			},
			onDel(index){
				uni.showModal({
					content:"确定删除该商品",
					success: (r) => {
						if(r.confirm){
							this.request({
								url:"Smdcshop/jfgoods_delect",
								data:{
									id:this.list[index].id
								}
							}).then(res=>{
								if(res.code == 200){
									this.getData(1)
								}
							})
						}
					}
				})
			},
			toDetail(index){
				let id=this.list[index].id;
				uni.navigateTo({
					url:`./editGoods?id=${id}`
				})
			},
		}
	}
</script>

<style>
	page {}

	.header {
		height: 96rpx;
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 100;
		box-sizing: border-box;
		border-bottom: 8rpx solid #F4F5F7;

	}

	.header .item {
		width: 33.33vw;
		box-sizing: border-box;
		flex: none;
		height: 88rpx;
		position: relative;
	}

	.header .item.active .title {
		color: #247EFF;
		font-size: 32rpx;
		font-weight: 600;
	}

	.header .item.active::after {
		content: "";
		display: block;
		width: 40rpx;
		height: 4rpx;
		border-radius: 2rpx;
		background-color: #247EFF;
		position: absolute;
		bottom: 8rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.header .item .title {
		font-size: 28rpx;
		color: #666;

	}

	.main-block {
		width: 100%;
		height: calc(100vh);
	}

	.main-block .left-bar {
		width: 176rpx;
		flex: none;
		height: 100%;
		background-color: #F4F5F7;
		/*兼容 IOS<11.2*/
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		padding-bottom: env(safe-area-inset-bottom);
	}

	.main-block .item {
		padding: 30rpx 15rpx;
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
		line-height: 40rpx;    text-align: center;
	}

	.main-block .item.active {
		color: #247EFF;
		font-weight: 600;
		background-color: #fff;
	}

	.main-block .right-bar {
		width: 574rpx;
		flex: none;
		height: 100%;
		background-color: #fff;
		box-sizing: border-box;
		padding: 30rpx 0 30rpx 25rpx;
		position: relative;
		/*兼容 IOS<11.2*/
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
		padding-bottom: env(safe-area-inset-bottom);
	}

	.main-block .right-bar .cat-name {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		line-height: 42rpx;
		background-color: #fff;

	}

	.main-block .right-bar .item {
		padding: 40rpx 30rpx 40rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.main-block .right-bar .item .goods-img-block {
		flex: none;
		width: 120rpx;
		height: 120rpx;
		overflow: hidden;
		border-radius: 8rpx;
		position: relative;
	}

	.main-block .right-bar .item .goods-img-block .goods-img {
		display: block;
		width: 120rpx;
		height: 120rpx;
	}

	.main-block .right-bar .item .goods-img-block .goods-tips {
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 35rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		line-height: 35rpx;
		text-align: center;
		font-size: 20rpx;
	}

	.main-block .right-bar .item .info-block {
		padding-left: 24rpx;
		width: 405rpx;
		box-sizing: border-box;
	}

	.main-block .right-bar .item .info-block .goods-name {
		padding-right: 15rpx;
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		line-height: 1;
	}

	.main-block .right-bar .item .arr-r::after {
		border-color: #333 #333 transparent transparent;
	}

	.main-block .right-bar .item .info-block .stock {
		font-size: 24rpx;
		color: #999;
		line-height: 1;
		margin-top: 16rpx;
	}

	.main-block .right-bar .item .info-block .goods-btm {
		margin-top: 12rpx;
	}

	.main-block .right-bar .item .info-block .goods-btm .price {
		font-size: 30rpx;
		color: #FD3939;
		font-weight: 600;
	}

	.main-block .right-bar .item .info-block .goods-btm .btn {
		width: 100rpx;
		height: 38rpx;
		font-size: 20rpx;
		line-height: 38rpx;
		text-align: center;
		color: #666;
		border: 1rpx solid #DBDDE1;
		background-color: #F4F5F7;
	}
</style>
