<template>
	<view class="content">
		<!-- 分类 -->
		<view class="tabs">
			<view class="item" :class="{'show': status == '0'}" @click="onTabs('0')">已发布</view>
			<view class="item" :class="{'show': status == '1'}" @click="onTabs('1')">待认证</view>
			<view class="item" :class="{'show': status == '2'}" @click="onTabs('2')">审核中</view>
			<view class="item" :class="{'show': status == '3'}" @click="onTabs('3')">已驳回</view>
		</view>
		<!-- 优选商品 -->
		<goodsList :list="goods" priceType="CNY" :status='status' toast="暂无产品权证">
			<template v-slot:statistics="goods">
				<view>库存{{goods.value.stock}}</view>
			</template>
			<template v-slot:footer="goods">
				<view class="footer-btns">
					<block v-if="status == '0'">
						<button class="button-item" size="mini" @click="openLay(goods.value, 'goodsBurn')">燃烧</button>
						<button class="button-item" size="mini" @click="openLay(goods.value, 'goodsMint')">增发</button>
					</block>
					<block v-if="status == '1'">
						<button class="button-item" size="mini" @click="goodsAuth(goods.value.goods_id)">认证</button>
						<button class="button-item" size="mini" @click="goodsRemove(goods.value.goods_id)">删除</button>
					</block>
					<block v-if="status == '2'">
						<button class="button-item" size="mini" @click="goodsRemove(goods.value.goods_id)">删除</button>
					</block>
					<block v-if="status == '3'">
						<button class="button-item" size="mini" @click="goodsPut(goods.value.goods_id, goods.value.reason)">驳回原因</button>
						<button class="button-item" size="mini" @click="goodsRemove(goods.value.goods_id)">删除</button>
					</block>
				</view>
			</template>
		</goodsList>
		<!-- 燃烧 增发 弹窗 -->
		<uni-popup ref="popupLay" :safe-area="true" background-color="#ffffff">
			<view class="popup">
				<view class="title">库存{{stockType == 'goodsMint' ? '增发': '燃烧'}}</view>
				<view class="des">
					剩余库存
					<text>{{itemGoods.stock}}</text>
				</view>
				<view class="des">
					数量
					<uni-number-box v-model='stock' :min="1" :max="stockType == 'goodsBurn' ? itemGoods.stock : 9999"></uni-number-box>
				</view>
				<view class="btn" @click="additionalOrBurning">确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { managesGoodsIndex, managesGoodsDelete, managesGoodsBurn, managesGoodsMint, managesGoodsCreateBefore } from '@/apis/interfaces/goods'
	import goodsList from '@/components/goods-list/goods-list'
	export default {
		components: {
			goodsList
		},
		data() {
			return {
				status	  : 0,
				goods	  : [],
				pages	  : {},
				itemGoods : {},
				stock	  : 1,
				stockType : ''
			};
		},
		onShow() {
			this.getList()
		},
		methods: {
			// tabs
			onTabs(value){
				if(value == this.status) return
				this.goods = []
				this.status = value
				this.getList()
			},
			// 权证列表
			getList(){
				managesGoodsIndex({
					status: this.status
				}).then(res => {
					console.log(res)
					this.goods = res.data
					this.pages = res.page
				})
			},
			// 修改产品
			goodsPut(id, text){
				uni.showModal({
					title		: '驳回原因',
					content		: text,
					confirmText	: '编辑',
					cancelText	: '确定',
					success		: res => {
						if(res.confirm){
							this.$Router.push({name: 'GoodsMagAdd', params: {type: 'edit', id}})
						}
					}
				})
			},
			// 商品认证
			goodsAuth(id){
				this.$Router.push({name: 'goodsAuth', params: {id, type: 'magList'}})
			},
			// 燃烧，增发
			openLay(item, type){
				this.itemGoods	= item
				this.stockType	= type
				this.stock		= 1
				this.$refs.popupLay.open('bottom')
			},
			// 提交燃烧，增发
			additionalOrBurning(){
				let data = {
					id	 : this.itemGoods.goods_id,
					stock: this.stock
				}
				switch (this.stockType){
					case 'goodsBurn':
						managesGoodsBurn({...data}).then(res => {
							let goodsIndex = this.goods.findIndex(val => val.goods_id === this.itemGoods.goods_id)
							this.itemGoods.stock -= data.stock
							this.$refs.popupLay.close()
						}).catch(err => {
							uni.showToast({
								title: err.message,
								icon : 'none'
							})
						})
						break;
					case 'goodsMint':
						managesGoodsMint({...data}).then(res => {
							let goodsIndex = this.goods.findIndex(val => val.goods_id === this.itemGoods.goods_id)
							this.itemGoods.stock += data.stock
							this.$refs.popupLay.close()
						}).catch(err => {
							uni.showToast({
								title: err.message,
								icon : 'none'
							})
						})
						break;
					default:
						uni.showToast({
							title: '类型错误',
							icon : 'none'
						})
						break;
				}
			},
			// 移出删除商品
			goodsRemove(id){
				let index = this.goods.findIndex(val => val.goods_id == id)
				managesGoodsDelete(id).then(res => {
					this.goods.splice(index,1)
					if(this.goods.length === 0) this.getList()
					uni.showToast({
						title: '商品权证已删除',
						icon : 'none'
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			}
		},
		onNavigationBarButtonTap() {
			this.$Router.push({name: 'addClassify'})
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-top: 90rpx;
	}
	// tabs
	.tabs{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
		display: flex;
		justify-content: space-around;
		background: white;
		padding: 15rpx 0;
		font-size: $title-size-lg;
		color: $text-gray;
		.item{
			height: 60rpx;
			line-height: 60rpx;
			&.show{
				color: $text-price;
				border-bottom: solid 4rpx $text-price;
			}
		}
	}
	// 按钮组
	.footer-btns{
		display: flex;
		justify-content: space-between;
		padding-top: $padding/2;
		margin-left: -10rpx;
		margin-right: -10rpx;
		.button-item[size='mini']{
			padding: 0;
			margin: 0 10rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 0;
			flex: 1;
			background: $border-color-lg;
			color: $text-gray;
			&::after{
				border: none;
			}
		}
	}
	// 增发燃烧弹窗
	.popup {
		width: 100%;
		background-color: #fff;
		padding-bottom: $padding;
		.title {
			font-size: 36rpx;
			text-align: center;
			padding: 50rpx 30rpx 30rpx 30rpx;
			font-weight: bold;
		}
		.btn {
			background-color: $text-price;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			font-weight: bold;
			font-size: $title-size;
			margin: $padding * 2;
		}
		.des {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: $padding $padding * 2;
			color: $text-gray;
			text{
				color: $text-color;
			}
		}
	}
</style>
