<template>
	<div class="app-content" @click="operateBottomShow = false">
		<app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="50%" />
		<!-- 中间 -->
		<div class="app-middle">
			<scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop" :style="{height:height+'px'}">
				<div v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']" :data-current="index" @tap.stop="swichNav($event ,item)">
					<text>{{item.categoryName || '暂无'}}</text>
				</div>
			</scroll-view>
			<block v-for="(item,index) in tabbar" :key="index">
				<scroll-view scroll-y class="right-box" :style="{height:height+'px'}" v-if="currentTab==index">
					<!--内容部分 start -->
					<block v-if="!$util.isEmpty(list.data)">
						<div class="page-view">
							<div class="goods-list" v-for="(item, index) in list.data" :key="index" @click="pageTo(`/pages/goods/detail?id=${item.id}`)">
								<div class="img-blo">
									<img :src="item.imgList[0].middle" alt="商品图" mode="center" />
								</div>
								<div class="goods-det">
									<div class="goods-det-top">
										<div class="goods-name">{{ item.goodsName }}</div>
										<div class="goods-sales">已售{{ item.sold }}</div>
									</div>
									<div class="goods-price">￥{{ item.price }}</div>
								</div>
							</div>
						</div>
						<!-- 操作 -->
						<operate-module v-show="operateShow" :top="operateTop" :right="30" :btnData="btnData" />
					</block>
					<block v-else>
						<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
					</block>
					<!--内容部分 end -->
				</scroll-view>
			</block>
		</div>
		<!-- 底部 -->
		<div class="app-footer">
			<div class="btn-list other-btn" @click.stop="changeOperateShowFn">
				<i class="iconfont iconxiala" :class="[operateBottomShow ? 'animate-open' : 'animate-close']"></i>
				<span>其他设置</span>
			</div>
			<div class="btn-list">
				<button class="admin-button-com default" @click="pageTo('/admin/goodsManage/category')">分类管理</button>
			</div>
			<div class="btn-list">
				<button class="admin-button-com blue" @click="pageTo('/admin/goodsManage/add')">新增商品</button>
			</div>
		</div>
		<!-- 操作弹窗 -->
		<operate-line-module v-if="operateBottomShow" :btnData="btnBottomData" :bottom="120" :right="528" />
	</div>
</template>

<script>
import AppTabs from '@/components/plugin/tabs'
import OperateModule from '@/admin/home/components/module/operate'
import OperateLineModule from '@/admin/home/components/module/operate-line'
import AppWrapperEmpty from '@/components/app-wrapper-empty'
// api
import { categoryListB, getCategoryGoodsB } from '@/api/goods'
import { list } from '@/mixins'
export default {
	name: 'goods-manage-list',
	components: {
		AppTabs,
		OperateLineModule,
		OperateModule,
		AppWrapperEmpty
	},
	mixins: [list],
	data() {
		return {
			// tabs
			tabIndex: 0,
			tabs: [
				{
					name: '出售中'
				},
				{
					name: '已下架'
				}
			],
			// 中间
			tabbar: [],
			height: 0, // scroll-view高度
			currentTab: 0, // 预设当前项的值
			scrollTop: 0, // tab标题的滚动条位置
			form: {
				categoryId: ''
			},
			// 操作菜单
			operateData: {},
			operateShow: false,
			operateIndex: null,
			operateTop: 0,
			// 底部操作
			operateBottomShow: false,
			btnBottomData: [
				{
					name: '图库管理',
					click: () => this.$util.pageTo('/admin/goodsManage/img-store')
				},
				{
					name: '运费设置',
					click: () => this.$util.pageTo('/admin/goodsManage/freight')
				},
				{
					name: '通用简介',
					click: () => alert('请在电脑端进行设置!')
				},
				{
					name: '自动涨价',
					click: () => this.$util.pageTo('/admin/goodsManage/price-increase')
				}
			]
		}
	},
	computed: {
		btnData() {
			return [
				{
					text: '置顶',
					icon: 'iconzhiding',
					click: () => {
						this.delModal = true
					}
				},
				{
					text: '编辑',
					icon: 'iconbianji',
					click: () => {
						this.$util.pageTo({
							url: '/admin/ad/add',
							query: {
								type: this.tabIndex,
								id: this.operateData.id
							}
						})
					}
				},
				{
					text: this.operateData.status == 1 ? '下架' : '启用',
					icon: this.operateData.status == 1 ? 'iconxiajia' : 'iconqiyong',
					click: () => {
						this.changeStatusFn()
					}
				},
				{
					text: '删除',
					icon: 'iconshanchu1',
					click: () => {
						this.delModal = true
					}
				}
			]
		}
	},
	onLoad: function() {
		if (this.$util.isLogin()) {
			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						this.height = res.windowHeight - 90
						this.sInit()
					}
				})
			}, 50)
		}
	},
	methods: {
		async sInit() {
			this._getClass()
			this._list()
		},
		// 分类
		_getClass() {
			categoryListB().then(res => {
				this.tabbar = res.data
			})
		},
		// 列表
		_list() {
			return getCategoryGoodsB({
				status: this.tabIndex == 0 ? 1 : 0,
				...this.form
			}).then(res => {
				this.completes(res)
			})
		},
		// tabs
		change(e) {
			if (this.tabIndex == e.index) {
				return false
			} else {
				this.tabIndex = e.index
				this.operateCloseFn()
				this.resetList()
				this._list()
			}
		},
		// 操作按钮
		operateFn(item, index) {
			if (this.operateIndex == index) {
				this.operateCloseFn()
			} else {
				this.operateData = item
				this.operateData.index = index
				this.operateIndex = index
				this.operateTop = (index + 1) * 214
				this.operateShow = true
			}
		},
		// 关闭操作按钮
		operateCloseFn() {
			this.operateData = {}
			this.operateIndex = null
			this.operateShow = false
		},
		// 点击标题切换当前页时改变样式
		swichNav(e, item) {
			let cur = e.currentTarget.dataset.current
			if (this.currentTab == cur) {
				return false
			} else {
				this.currentTab = cur
				this.form.categoryId = item.id
				this.resetList()
				this._list()
				// this.checkCor()
			}
		},
		// 判断当前滚动超过一屏时，设置tab标题滚动条。
		checkCor() {
			let that = this
			// 这里计算按照实际情况进行修改，动态数据要进行动态分析
			// 思路：窗体高度/单个分类高度 200rpx 转px计算 =>得到一屏幕所显示的个数，结合后台传回分类总数进行计算
			// 数据很多可以多次if判断然后进行滚动距离计算即可
			if (that.currentTab > 7) {
				that.scrollTop = 500
			} else {
				that.scrollTop = 0
			}
		},
		// operate
		changeOperateShowFn() {
			this.operateBottomShow = !this.operateBottomShow
		}
	}
}
</script>

<style lang="scss" scoped>
	.app-content {
		min-height: calc(100vh - 80px);
		padding-top: 80px;
		background-color: #fff;
		// padding-bottom: 100px;
	}

	page {
		background: #fff;
	}

	/* 左侧导航布局 start*/

	/* 隐藏scroll-view滚动条*/

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.tab-view {
		/* height: 100%; */
		width: 200upx;
		position: fixed;
		left: 0;
		z-index: 10;
		background-color: #f0f2f6;

		.tab-bar-item {
			width: 200upx;
			height: 110upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26upx;
			color: #444;
			font-weight: 400;
		}

		.active {
			position: relative;
			color: $mainColor;
			font-size: 26px;
			background: #fff;
		}

		.active::before {
			content: '';
			position: absolute;
			border-left: 8upx solid $mainColor;
			height: 100%;
			left: 0;
		}
	}

	/* 左侧导航布局 end*/

	.right-box {
		width: 100%;
		position: fixed;
		padding-left: 220upx;
		box-sizing: border-box;
		left: 0;
		.page-view {
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
			padding-bottom: env(safe-area-inset-bottom);
			.goods-list {
				@include disFlex(flex-start, flex-start);
				margin: 40px 0;
				.img-blo {
					width: 200px;
					height: 200px;
					margin-right: 20px;
				}
				.goods-det {
					padding-top: 18px;
					font-size: 28px;
					.goods-name {
						margin-bottom: 10px;
					}
					.goods-sales {
						color: $fontColor3;
						font-size: 24px;
					}
					.goods-price {
						margin-top: 50px;
						color: $mainColor;
						font-weight: bold;
					}
				}
			}
		}
	}
	// 底部
	.app-footer {
		justify-content: space-between;
		.btn-list {
			width: 33.33%;
			border-left: 1px solid $borderColor;
			&:first-child {
				border-left: 0;
			}
			.admin-button-com {
				width: 160px;
				padding-top: 16px;
				padding-bottom: 16px;
			}
		}
		.other-btn {
			color: $fontColor2;
			.iconfont {
				font-size: 24px;
				color: $fontColor3;
				transform: scale(0.4);
			}
		}
	}
</style>
