<template>
	<div class="base-table">
		<el-table
			:data="data"
			style="width: 100%"
			fit
			border
			:header-cell-style="{ background: '#FAFAFA', color: '#606266', height: '40px' }"
			:max-height="maxHeight"
		>
			<!-- 表格头定义 -->
			<el-table-column
				v-for="(head, idx) in tableHeadConfigs"
				:key="idx"
				:type="head.type"
				:index="head.index"
				:label="head.label?head.label:head.name"
				:prop="head.prop"
				:width="head.width"
				:min-width="head.minWidth"
				:fixed="head.fixed"
				:show-overflow-tooltip="true"
				filter-placement="top"
				:align="head.align"
			>
				<template v-if="head.prop" slot-scope="scope">
					<component v-if="head.subcomponent" :is="head.subcomponent" :key="idx + 'sub'" :inject-data="{ ...scope.row, head }" @emitData="handleSubEmitData" />
					<span v-else>{{ scope.row[head.prop] | commonFilter(head.filter) }}</span>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
export default {
	name: 'BaseTable',
	props: {
    tableHeadConfigs: {
      type: Array,
      default: () => []
    },
		data: {
			type: Array,
			default: () => []
		},
    maxHeight: {
      type: Number,
      default: 500
    }
	},
	filters: {
		commonFilter: (source, filterType = a => a) => {
			return filterType(source)
		}
	},
	data () {
    return {}
  },
	methods: {
		handleSubEmitData(payload) {
			this.$emit('operate-event', payload)
		}
	}
}
</script>
