<!--
 * @Descripttion: 
 * @version: 
 * @Author: fzq
 * @Date: 2022-11-25 09:51:46
 * @LastEditors: fzq
 * @LastEditTime: 2023-02-09 10:17:22
-->
<template>
<!-- 数字代表多级表头最小列宽 -->
<!-- :width="opt.width || null" -->
<!-- :width="flexColumnWidth(opt.prop || null)" -->
<!-- header-align="center" align="center" -->
<!-- :min-width="opt.minWidth || null" -->
	<el-table-column
		:label="opt.label ? opt.label : opt.name"
		:prop="opt.prop || null"
		:min-width="[$route.fullPath == '/monitoring-realtimeQualityInspection' ? 170 : (opt.minWidth || null)]"
		:fixed="opt.fixed || null"
		:show-overflow-tooltip="opt.showOverflowTooltip || false"
		filter-placement="top"
		:align="opt.align || 'center'"
		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: () => ({})
		}
	},
	methods: {
		// 自定义表头列宽
        flexColumnWidth(str) {
          let flexWidth = 0
          for (const char of str) {
            if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
              // 如果是英文字符，为字符分配8个单位宽度
              flexWidth += 8
            } else if (char >= '\u4e00' && char <= '\u9fa5') {
              // 如果是中文字符，为字符分配20个单位宽度
              flexWidth += 20
            } else {
              // 其他种类字符，为字符分配5个单位宽度
              flexWidth += 5
            }
          }
        //   if (flexWidth < 50) {
        //     // 设置最小宽度
        //     flexWidth = 50
        //   }
          if (flexWidth > 250) {
            // 设置最大宽度
            flexWidth = 250
          }
          return flexWidth + 'px'
        },
	}
}
</script>
