<template>
	<div class="feesTable">
		<el-scrollbar>
			<table>
				<thead class="columnView">
					<tr class="th" v-if="data.header">
						<th class="td sq">序号</th>
						<th class="td">成本类型</th>
						<th class="td" v-for="(item,index) in data.header" :key="index">{{item}}</th>
					</tr>
				</thead>
				<tbody class="rowView">
					<tr class="tr" v-for="(item,index) in data.data" :key="index">
						<td class="td sq">{{index + 1}}</td>
						<td class="td" v-for="(em,ind) in item" :key="ind">{{em}}</td>
					</tr>
				</tbody>
			</table>
		</el-scrollbar>
	</div>
</template>

<script>
export default {
	name: "",
	props:{
		info:{
			type:Object,
		}
	},
	watch:{
		info:{
			handler(val){
				if(val){
					this.data = val;
				}
			},
			deep:true
		}
	},
	data(){
		return{
			data:this.info
		}
	},
	mounted() {

	},
	methods:{

	}
}
</script>

<style scoped lang="scss">
	.columnView{
		display: flex;
		flex-wrap: nowrap;
		.th{
			display: flex;
			flex-wrap: nowrap;
			background: #F5F7FA;
			padding: 6px 5px;
			.td{
				white-space: nowrap;
				margin: 0 10px;
				line-height: 23px;
				width: 85px;
				text-align: left;
				color: #606266;
				font-weight: 400;
			}
			.sq{
				width: 45px;
			}
		}
	}
	.rowView{
		.tr{
			display: flex;
			flex-wrap: nowrap;
			border-bottom: 1px solid #ebeef5;
			padding: 6px 5px;
			.td{
				white-space: nowrap;
				margin: 0 10px;
				width: 85px;
				line-height: 23px;
				color: #606266;
				font-weight: inherit;
			}
			.sq{
				width: 45px;
			}
		}
	}
</style>
