<template>
	<view>
		
		<table-bd style="width: 100%;">
		  <table-tr>
		    <table-td :span="18" height="80rpx" :fontSize="30" :bold="true" fontColor="#01BEFF" alignItems="center">服务项目</table-td>
			<table-td :span="6" height="80rpx" :fontSize="30" :bold="true" fontColor="#01BEFF" alignItems="center">价格</table-td>
		  </table-tr>
		  
		  <block v-for="(tb,t) in tableList">
			  <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 :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  :span="24" borderWidth="1rpx" :borderRight="false" alignItems="center">{{ fen2yuan(tb2.price) }}</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 :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  :span="24" borderWidth="1rpx" :borderRight="false" alignItems="center">{{ fen2yuan(tb3.price) }}</table-td>
								</table-tr>
							</block>
						</block>
					</table-td>
				</block>
				
			  </table-tr>
		  </block>
		
		</table-bd>
		
		
	</view>
</template>

<script>
	import TableBd from '@/pages/clerk/detail/components/table-bd.vue';
	import TableTd from '@/pages/clerk/detail/components/table-td.vue';
	import TableTr from '@/pages/clerk/detail/components/table-tr.vue';
	export default {
		components: {
			TableBd,
			TableTd,
			TableTr,
		},
		props: {
			tableList: {
				type: Array,
				default: [],
			},
		},
		data() {
			return {
			
			}
		},
		methods: {
			fen2yuan(price) {
			  return (price / 100.0).toFixed(0)
			},
		}
	}
</script>

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