<!-- 虚拟列表演示(不使用内置列表)(vue) -->
<!-- 写法较简单，在页面中对当前需要渲染的虚拟列表数据进行for循环，在vue3中兼容性良好 -->
<!-- 在各平台兼容性请查阅https://z-paging.zxlee.cn/module/virtual-list.html -->
<template>
	<view class="content">
		<su-navbar :title="title" statusBar></su-navbar>
		
		<view class="main-box">
			<view class="title">当前等级：{{clerkLevel}}</view>
			<level-list :dataList="tableList"></level-list>
		</view>
		
		<view class="bottom-box">
			<view class="btn" @click="saveLevel">保存配置</view>
		</view>
		
	</view>
</template>

<script>
	import LevelList from '@/pages/worker/levelList/components/levelList.vue';
	import ClerkApi from '@/sheep/api/worker/clerk';
	export default {
		components: {
			LevelList,
		}, 
		props: {
			title: {
				type: String,
				default: '',
			},
		},
		data() {
			return {
				tableList: [],
				id: 0,
				clerkLevel: '',
			}
		},
		created() {
			
		},
		methods: {
			initData(id) {
				this.id = id;
				ClerkApi.getGoodsList(id).then(res => {
					this.tableList = res.data;
				});
				
				ClerkApi.getClerkLevel(id).then(res => {
					this.clerkLevel = res.data;
				});
				
			},
			saveLevel() {
				var params = {
					id: this.id,
					categoryList: this.tableList
				}
				ClerkApi.saveGoodsList(params).then(res => {
					
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.main-box {
		padding: 10px;
		padding-bottom: 140rpx;
		
		.title {
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 20px;
		}
	}
	
	.bottom-box {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 7px 15px;
		background-color: #fff;
		box-shadow: 0 0 6px 0 #ccc;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
		
		.btn {
			background-color: var(--ui-BG-Main);;
			padding: 10px;
			border-radius: 40px;
			color: #fff;
			display: flex;
			flex: 1;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
		}
		
	}
</style>
