<template>
	<view>
		<table-bd style="width: 100%;">
		  <table-tr>
		    <table-td :span="18" height="60" :fontSize="30" :bold="true" fontColor="#01BEFF" alignItems="center">技能列表</table-td>
			<table-td :span="6" height="60" :fontSize="30" :bold="true" fontColor="#01BEFF" alignItems="center">开关</table-td>
		  </table-tr>
		  
		  <block v-for="(tb,t) in dataList">
			  <table-tr>
			    <table-td :span="6" alignItems="center">{{tb.name}}</table-td>
				
				<block v-if="tb.goodsList">
					<table-td :span="12" :ellipsis="true" padding="0">
						<block v-for="(tb2,t2) in tb.goodsList">
						  <table-tr :borderWidth="t2 == tb.goodsList.length-1 ? 0 : 1">
							<table-td height="60" :span="24" :borderRight="false" alignItems="center">{{tb2.name}}</table-td>
						  </table-tr>
						</block>
					</table-td>
					<table-td :span="6" :ellipsis="true" padding="0">
						<block v-for="(tb2,t2) in tb.goodsList">
							<table-tr :borderWidth="t2 == tb.goodsList.length-1 ? 0 : 1">
							  <table-td height="60" :span="24" borderWidth="1rpx" :borderRight="false" alignItems="center">
								  <view @click="changeLevel(tb2)"><u-switch active-color="var(--ui-BG-Main)" size="36" v-model="tb2.deleted"></u-switch></view>
							  </table-td>
							</table-tr>
						</block>
					</table-td>
				</block>
			  	
			  	<block v-if="tb.categoryList">
					<table-td :span="12" :ellipsis="true" padding="0">
						<block v-for="(tb2,t2) in tb.categoryList">
							<table-tr :borderWidth="t2 == tb.categoryList.length-1 ? 0 : 1">
							  <table-td :span="12" borderWidth="1rpx" alignItems="center">{{tb2.name}}</table-td>
							  <table-td :span="12" :ellipsis="true" :borderRight="false" padding="0">
								  <block v-for="(tb3,t3) in tb2.goodsList">
									  <table-tr :borderWidth="t3 == tb2.goodsList.length-1 ? 0 : 1">
										<table-td height="60" :span="24" :borderRight="false" alignItems="center">{{tb3.name}}</table-td>
									  </table-tr>
								  </block>
							  </table-td>
							</table-tr>
						</block>
					</table-td>
					
					<table-td :span="6" :ellipsis="true" padding="0">
						<block v-for="(tb2,t2) in tb.categoryList">
							<block v-for="(tb3,t3) in tb2.goodsList">
								<table-tr :borderWidth="t2 == tb.categoryList.length-1 && t3 == tb2.goodsList.length-1 ? 0 : 1">
								  <table-td height="60" :span="24" borderWidth="1rpx" :borderRight="false" alignItems="center">
									  <view @click="changeLevel(tb3)"><u-switch active-color="var(--ui-BG-Main)" size="36" v-model="tb3.deleted"></u-switch></view>
								  </table-td>
								</table-tr>
							</block>
						</block>
					</table-td>
				</block>
				
			  </table-tr>
		  </block>
		
		</table-bd>
		
		
	</view>
</template>

<script>
	import TableBd from '@/pages/worker/levelList/components/table-bd.vue';
	import TableTd from '@/pages/worker/levelList/components/table-td.vue';
	import TableTr from '@/pages/worker/levelList/components/table-tr.vue';
	export default {
		components: {
			TableBd,
			TableTd,
			TableTr,
		},
		props: {
			dataList: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			changeLevel(e) {
				if(e.deleted){
					e.deleted = true;
				}else{
					e.deleted = false;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	
</style>