<template>
	<el-table-column
		:label="opt.label ? opt.label : opt.name"
		:prop="opt.prop || null"
		:width="opt.width || null"
		:min-width="opt.minWidth || null"
		:fixed="opt.fixed || null"
		:show-overflow-tooltip="opt.showOverflowTooltip || false"
		filter-placement="top"
		:align="opt.align || null"
		v-bind="opt.more"
	>
		<template v-if="opt.prop" slot-scope="scope">
			<component v-if="opt.subcomponent" :is="opt.subcomponent" :key="idx + 'sub'" :inject-data="{ ...scope.row, head: opt }" @emit-data="handleSubEmitData" />
			<!-- 直接展示数据或应用过滤器 -->
			<span v-else>{{ scope.row[opt.prop] | commonFilter(opt.filter) }}</span>
		</template>
		<!-- 递归 -->
		<template v-if="!opt.prop && opt.children">
			<TableHead v-for="(subhead, index) in opt.children" :key="'subhead' + index" :opt="subhead" />
		</template>
	</el-table-column>
</template>

<script>
export default {
	name: 'TableHead',
	filters: {
		commonFilter: (source, filterType = a => a) => {
			return filterType(source)
		}
	},
	props: {
		opt: {
			type: Object,
			default: () => ({})
		}
	}
}
</script>
