<template>
	<view>
		<u-navbar autoBack placeholder bgColor="#FFFFFF">
			<view class="navSlot" slot="center">
				<!-- <u-icon name="arrow-left" size="19"></u-icon> -->
				<view class="title">商品管理</view>
			</view>
		</u-navbar>
		<view class="search">
			<u-search placeholder="搜索商品名称、商品描述、价格" :showAction="false" @search="search" bgColor="#FAF7F6"
				:animation="false" v-model="keyword"></u-search>
		</view>
		<view class="tab">
			<view class="gxflex">
				<view class="item" :class="{active:curent ==item.id}" v-for="(item,index) in list" :key="index"
					@click="getItem(item.id)">
					{{item.name}}
				</view>
			</view>


		</view>
		<view class="bgMains">
			<view class="evaluationList" v-for="(item, index) in dataList" :key="index" @click="startDetails(item)">
				<view>
					<view class="evaluationItem">
						<view class="">
							<image class="img" :src="item.goodsImage"></image>
						</view>

						<view class="evaluatInfo">
							<view class="online">
								<view class="goodsNmae" :style="{width:curent==2?'300rpx':'500rpx'}">{{item.goodsName}}</view>

								<view class="editOnline" v-show="IsOnline">
									<view>{{item.storeGoodsStatus == 2 ? "已下架" :"已上架"}}</view>
									<view>
										<image class="edit" src="../../static/tabar/ic_edit.png"
											@click.stop="addMyShop(item)"></image>
									</view>
								</view>

							</view>


							<view class="goodprice">
								<view class="title">商品总售：</view>
								<view class="goodsPrice">{{item.totalSales||0}}</view>
							</view>
							<view class="price">
								<view style="color: #FF4502;font-weight: 800;">￥{{item.goodsPrice}}</view>
								<view class="inventory" v-if="curent == 2">库存：{{item.inventory||0}}</view>
							</view>
						</view>

					</view>
					<u-line class="line" length="100%"></u-line>

					<view class="selComment">
						<view class="delete" v-show="isDelete" @click.stop="delGoods(item)">删除</view>
						<view v-show="!isDelete"></view>
						<block v-if="item.isAdd==2">
							<view class="comment" v-if="!isDelete" @click.stop="addMyShop(item)">
								添加到我的店铺
							</view>
						</block>
						<block v-else>
							<view class="comment" v-if="!isDelete">
								已添加
							</view>
						</block>

						<view class="comment" v-if="curent == 2" @click.stop="editStatus(item)">
							{{item.storeGoodsStatus == 2 ? "上架" :"下架"}}
						</view>
					</view>
				</view>
			</view>
			<view v-if="dataList.length == 0">
				<image style="width: 376rpx;display: block;margin: 0 auto;" src="../../static/icon_xx_k.png">
				</image>
				<text style="display: block;text-align: center;color: #ccc;">暂无数据</text>
			</view>
		</view>
		<u-popup :show="isShowMyShop" mode="center" @close="isShowMyShop = false" bgColor="transparent">
			<view class="goodsEditBox">
				<div class="goodsEditBoxTitle">
					商品编辑
				</div>
				<div class="spceList">
					<scroll-view scroll-y style="height: 350rpx;"><!-- specificationsList -->
						<div class="spceCell" v-for="(item,index) in specificationsList" :key="index">
							<div class="spceCellName">
								<input disabled type="text" v-model="item.specificationsName" placeholder="请填写规格" />
							</div>
							<div class="spceBox">
								<!-- :disabled="curent == 2" -->
								<text>库存</text><input type="text" :min="1" v-model="item.inventory" />
							</div>
						</div>
					</scroll-view>
					<div class="radioBox" style="margin-bottom: 47rpx;margin-top: 30rpx;">
						<div class="radioBoxTitle">
							是否需要预约：
						</div>

						<div class="radioBoxValue">
							<u-radio-group v-model="storeGoodsDetails.isReservation">
								<u-radio :customStyle="{marginLeft: '64rpx'}" v-for="(item, index) in radiolist1"
									:key="index" :label="item.name" :name="item.id">
								</u-radio>
							</u-radio-group>
						</div>
					</div>

					<div class="radioBox">
						<div class="radioBoxTitle">
							状态：
						</div>

						<div class="radioBoxValue">
							<u-radio-group v-model="storeGoodsDetails.storeGoodsStatus">
								<u-radio :customStyle="{marginLeft: '64rpx'}" v-for="(item, index) in radiolist2"
									:key="index" :label="item.name" :name="item.id">
								</u-radio>
							</u-radio-group>
						</div>
					</div>
				</div>

				<div class="btnList">
					<div class="btnBorder" @click="isShowMyShop = false">
						取消
					</div>
					<div class="btnBg" @click="editStoreGoods">
						确认
					</div>
				</div>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				isDelete: false,
				IsOnline: false,
				pageNum: 1,
				total: 0,
				keyword: "",
				list: [{
					id: 1,
					name: '平台管理'
				}, {
					id: 2,
					name: '店铺管理'
				}],
				curent: 1,
				isShowMyShop: false,
				itemData: {},
				specificationsList: [],
				storeGoodsDetails: {},
				radiolist1: [{
					name: '是　',
					id: '1'
				}, {
					name: '否　',
					id: '2'
				}],
				radiolist2: [{
					name: '上架',
					id: '1'
				}, {
					name: '下架',
					id: '2'
				}]
			}
		},
		onLoad() {
			this.getPlatformGoodsList()
		},
		onPullDownRefresh() {
			this.pageNum = 1
			this.getPlatformGoodsList()
		},
		onReachBottom() {
			if (this.total > this.list.length) {
				this.pageNum = this.pageNum + 1
				if (this.curent == 1) {
					this.getPlatformGoodsList(true)
				} else {
					this.getShopGoodsLIst(true)

				}
			} else {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			}
		},
		methods: {
			startDetails(item) {
				uni.navigateTo({
					url: '/pages/productDetails/productDetails?id=' + item.id
				})
			},
			groupChange(e) {
				console.log(e);
			},
			//商品编辑
			addMyShop(item) {
				this.itemData = item
				console.log(item);
				this.isShowMyShop = true
				if(this.curent == 1){
					this.storeSpecificationsList()
				}else if (this.curent == 2) {
					this.getStoreGoodsDetails()
					// this.storeSpecificationsList()
				} else {
					this.storeGoodsDetails.specificationsList.length = 0
				}
			},

			//删除
			delGoods(item) {
				uni.showModal({
					content: '是否删除该商品？',
					success: (res) => {
						console.log(res);
						if (res.confirm) {
							this.$http.get('/api/store/storeGoods/del', {
								id: item.id
							}).then(res => {
								uni.showToast({
									icon: 'none',
									title: res.msg
								})
								this.search()
							})
						}
					}
				})
				// this.itemData = item
				// console.log(item);
				// this.isShowMyShop = true
				// this.storeSpecificationsList()
				// this.getStoreGoodsDetails()
			},



			//搜索
			search() {
				this.pageNum = 1
				if (this.curent == 1) {
					this.isDelete = false
					this.IsOnline = false
					this.getPlatformGoodsList()
				} else {
					this.isDelete = true
					this.IsOnline = true
					this.getShopGoodsLIst()
				}
			},

			//修改门店商品状态
			editStatus(item) {
				this.$http.post('/api/store/storeGoods/editStatus', {
					id: item.id,
					storeGoodsStatus: item.storeGoodsStatus == 1 ? 2 : 1
				}).then(res => {
					console.log(res);
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					this.search()
				})
			},

			//修改门店商品
			editStoreGoods() {
				let data = this.storeGoodsDetails
				data.id = this.itemData.id
				data.specificationsList = this.specificationsList
				let api = ''
				api = this.curent == 1 ? '/api/store/storeGoods/addStoreGoods' : '/api/store/storeGoods/editStoreGoods'
				data.goodsId = this.itemData.id
				console.log("LMG", data);
				this.$http.post(api, data).then(res => {
					console.log(res);
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					this.isShowMyShop = false
					this.search()
				})
			},
			//门店商品详情
			getStoreGoodsDetails() {
				this.$http.get('/api/store/storeGoods/details', {
					id: this.itemData.id
				}).then(res => {
					this.storeGoodsDetails = res.data
					this.specificationsList = res.data.specificationsList
					console.log(this.storeGoodsDetails);
				})
			},
			//平台商品规格列表
			storeSpecificationsList() {
				this.$http.get('/api/store/storeGoods/specificationsList', {
					goodsId: this.itemData.id
				}).then(res => {
					console.log(res);
					this.specificationsList = res.data
				})
			},



			getPlatformGoodsList(flag) {
				this.$http.post("/api/store/storeGoods/platformGoodsList", {
					pageNum: this.pageNum,
					pageSize: '20',
					field: this.keyword
				}).then(res => {
					if (res.code == 200) {
						console.log(res.data.rows)
						this.dataList = !flag ? res.data.rows : this.dataList.concat(res.data.rows)
						this.total = res.data.total
					}
				})
			},
			getShopGoodsLIst(flag) {
				this.$http.post("/api/store/storeGoods/list", {
					pageNum: this.pageNum,
					pageSize: '20',
					field: this.keyword
				}).then(res => {
					if (res.code == 200)
						this.dataList = !flag ? res.data.rows : this.dataList.concat(res.data.rows)
					this.total = res.data.total
				})
			},
			getItem(e) {
				this.curent = e
				this.pageNum = 1
				this.dataList = []
				if (this.curent == 1) {
					this.isDelete = false
					this.IsOnline = false
					this.getPlatformGoodsList()
				} else {
					this.isDelete = true
					this.IsOnline = true
					this.getShopGoodsLIst()
				}
				console.log(e)
				console.log(this.curent)
			}
		}
	}
</script>

<style lang="less">
	
	.bgMains{
		padding: 24rpx;
		background: #f9f6f4;
		min-height: 100vh;
	}
	
	.gxflex {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.item {
		background: #FFFFFF;
		text-align: center;
		padding-left: 30rpx;
	}

	.active {
		background: #FFFFFF;
		color: #FF4502 !important;
	}

	.evaluationList {
		padding: 21rpx;
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		margin-top: 40rpx;
		
		&:nth-child(1){
			margin-top: 0;
		}

		.selComment {
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;

			.delete {
				font-size: 28rpx;
				color: #999999;
			}

			.comment {
				font-size: 28rpx;
				color: white;
				padding: 12rpx 55rpx 12rpx 55rpx;
				background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
				border-radius: 30rpx 30rpx 30rpx 30rpx;
			}
		}

		.line {
			padding-left: 20rpx;
			padding-top: 10rpx;
		}

		.evaluationItem {

			display: flex;

			.evaluatInfo {
				flex: 1;
				padding-left: 10rpx;

				.online {
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					color: #FF4502;

					.editOnline {
						display: flex;

						.edit {
							padding-left: 40rpx;
							width: 38rpx;
							height: 38rpx;
						}
					}

				}

				.goodsNmae {
					width: 300rpx;
					// display: flex;
					font-size: 28rpx;
					color: #333333;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: 20rpx;
				}

				.goodprice {
					padding-top: 13rpx;
					display: flex;

					.title {
						font-size: 24rpx;
						color: #333333;
					}

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

				.price {
					padding-top: 15rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

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


					}
				}
			}

		}
	}

	.tab {
		padding: 24rpx;
		display: flex;
	}

	.img {
		width: 156rpx;
		height: 156rpx;
	}

	.search {
		padding: 24rpx;
	}

	.goodsEditBox {
		padding-bottom: 30rpx;
		max-height: 862rpx;
		width: 624rpx;
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;

		.goodsEditBoxTitle {
			width: 624rpx;
			height: 147rpx;
			background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 147rpx;
			text-align: center;
		}

		.spceList {
			padding: 26rpx 34rpx;
			box-sizing: border-box;

			.spceCell {
				padding: 0 30rpx;
				box-sizing: border-box;
				width: 556rpx;
				height: 105rpx;
				background: #FAF7F6;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.spceCellName {
					flex: 1;
					display: flex;
					align-items: center;
					font-size: 28rpx;
				}

				.spceBox {
					font-size: 28rpx;
					color: #333333;
					display: flex;
					align-items: center;

					input {
						width: 100rpx;
					}
				}
			}

			.radioBox {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.radioBoxTitle {
					font-size: 28rpx;
					color: #333333;
				}
			}

		}

		.btnList {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 60rpx;

			.btnBorder {
				width: 194rpx;
				height: 57rpx;
				background: #FFFFFF;
				border-radius: 29rpx 29rpx 29rpx 29rpx;
				border: 2rpx solid #707070;
				text-align: center;
				line-height: 57rpx;
				font-size: 28rpx;
				color: #333333;
				margin-right: 10rpx;
			}

			.btnBg {
				width: 194rpx;
				height: 57rpx;
				background: #FF4502;
				border-radius: 29rpx 29rpx 29rpx 29rpx;
				text-align: center;
				line-height: 57rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}
</style>