<route lang="yaml">
    name: tableDataView
    </route>

<script lang="ts" setup name="tableDataView">
import { ref } from "vue";
import {
	queryData
} from "@/api/modules/dataAsset";
import { calcColumnWidth } from "@/utils/index";
import Moment from 'moment';
import { TableColumnWidth } from "@/utils/enum";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance() as any;

const route = useRoute();

const tableData: any = ref([]);
const tableDataLoading = ref(false);

const tableFields: any = ref([]);

const getData = () => {
	tableData.value = [];
	tableDataLoading.value = true;
	queryData(route.query.guid).then((res: any) => {
		tableDataLoading.value = false;
		if (res.code == proxy.$passCode) {
			tableData.value = res.data.datas || [];
			tableFields.value = res.data.fields || [];
		} else {
			ElMessage.error(res.msg);
		}
	});
}

const getTextAlign = (field) => {
	if (field.dataType === 'decimal' || field.dataType === 'int' || field.dataType == 'bit' || field.dataType == 'tinyint') {
		return 'right';
	}
	return 'left'
}

/** otherWidth表示使用标题宽度时添加标题排序图标等宽度 */
const calcTableColumnWidth = (data: any[], prop, title, otherWidth = 0) => {
	let d: any[] = [];
	data.forEach((dt) => d.push(dt[prop]));
	return calcColumnWidth(
		d,
		title,
		{
			fontSize: 14,
			fontFamily: "SimSun",
		},
		{
			fontSize: 14,
			fontFamily: "SimSun",
		},
		otherWidth
	);
};

/** 每列字段对应的列宽计算结果。 */
const originTableFieldColumn = ref({});

watch(
	tableData,
	(val: any[], oldVal) => {
		if (!tableFields.value?.length) {
			originTableFieldColumn.value = {};
			return;
		}
		originTableFieldColumn.value = {};
		tableFields.value.forEach((field, index) => {
			originTableFieldColumn.value[field.enName] = calcTableColumnWidth(
				val?.slice(0, 20) || [],
				field.enName,
				field.chName,
				24
			);
		});
	},
	{
		deep: true,
	}
);

onActivated(() => {
	getData();
});

const formatterPreviewDate = (row, info) => {
	let enName = info.enName;
	let v = row[enName];
	if (v === 0 || v === "") {
		return v;
	}
	if (!v) {
		return v || '--';
	}
	if (info.dataType === 'datetime') {
		return Moment(v).format('YYYY-MM-DD HH:mm:ss');
	}
	if (info.dataType === 'date') {
		if (isNaN(<any>(new Date(v)))) {
			return Moment(parseInt(v)).format('YYYY-MM-DD');
		} else {
			return Moment(v).format('YYYY-MM-DD');
		}
	}
	return v;
};

</script>

<template>
	<div class="table_tool_wrap" v-loading="tableDataLoading">
		<span v-if="!tableFields.length || !tableData.length" class="tips_text">未导入数据时，该表数据为空。</span>
		<el-table ref="tableRef" v-show="tableFields.length" :data="tableData" :highlight-current-row="true" stripe border
			tooltip-effect="light" height="100%" row-key="guid" :style="{ width: '100%', height: 'calc(100% - 36px)' }">
			<template v-for="(item, index) in (tableFields || [])">
				<el-table-column :label="item.chName" :width="item.dataType === 'datetime'
					? TableColumnWidth.DATETIME
					: item.dataType === 'date'
						? TableColumnWidth.DATE
						: originTableFieldColumn[item.enName]
					" :align="getTextAlign(item)" :header-align="getTextAlign(item)"
					:formatter="(row) => formatterPreviewDate(row, item)" :show-overflow-tooltip="true">
				</el-table-column>
			</template>
		</el-table>
		<div v-show="!tableFields.length" class="empty-content">
			<img src="../../assets/images/empty-data.png" :style="{ width: '168px', height: '96px' }" />
			<div class="empty-text">暂无数据</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.table_tool_wrap {
	width: 100%;
	height: 100%;
	padding: 16px 16px;

	.tips_text {
		font-size: 14px;
		color: var(--el-text-color-tip);
		display: block;
		font-weight: normal;
		margin-bottom: 8px;
		line-height: 21px;
	}

	.el-table {
		display: inline-block;
	}

	.empty-content {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width: 100%;
		flex-direction: column;

		.empty-text {
			font-size: 14px;
			color: #b2b2b2;
		}
	}
}
</style>