// 流程 - 审批意见列表、操作记录列表
<template>
	<a-card>
		<div class="subtitle">
			{{ getI18n('system', 'SYSTEM_Process_HistoryRecordNodes') }}
		</div>
		<a-table
			:rowKey="() => getRandomString()"
			:columns="columns"
			:data-source="processsList"
			:loading="tableLoading"
			:bordered="true"
			:pagination="false"
			:scroll="{ x: 1200, y: 660 }"
			style="
				margin: 1em auto;
				width: 80%;
				padding-bottom: 10px;
				box-shadow: 5px 5px 5px 3px #eee;
			"
			size="small"
		>
			<!-- 序号 -->
			<template #index="{ index }">
				<span>{{ index + 1 }}</span>
			</template>
			<!-- 操作内容 -->
			<template #recordContents="{ record }">
				<div
					v-if="
						Array.isArray(record.recordContents) &&
						record.recordContents.length
					"
				>
					<div
						v-for="(item, key) in record.recordContents"
						:key="key"
					>
						<div v-if="item.nodeName">
							{{ `下一节点【${item.nodeName}】` }}
						</div>
						<div v-if="item.nodeName === 'END'">
							{{ `结束` }}
						</div>
						<div
							v-if="
								PermissionButtonConstatnt.buttonSign.includes(
									record.actionCode
								) && item.receiveName
							"
							style="padding-left: 1em"
						>
							{{ `办理人【${item.receiveName || ''}】` }}
						</div>
					</div>
				</div>
			</template>
		</a-table>
	</a-card>
</template>

<script lang="ts">
import dayjs from 'dayjs'
import { defineComponent, ref, watch, PropType } from 'vue'
import { validatenull, getRandomString } from '@/utils/tool/translateValue'
import { getI18n } from '@/utils/i18n'

import { PermissionButtonConstatnt } from '@/utils/constant'
import { ProcessViewNodeModel } from '@/types/process'

const columns = [
	// 序号
	{
		title: getI18n('common', 'Common_Columns_Index'),
		dataIndex: 'index',
		align: 'center',
		slots: { customRender: 'index' },
		width: '5%',
	},
	// 节点名称
	{
		title: getI18n('system', 'SYSTEM_Process_NodeName'),
		dataIndex: 'taskName',
		align: 'center',
		width: '12%',
	},
	// 办理人
	{
		title: getI18n('system', 'SYSTEM_Process_HandlePerson'),
		dataIndex: 'operator',
		align: 'center',
		width: '10%',
	},
	// 办理方式
	{
		title: getI18n('system', 'SYSTEM_Process_HandleMethod'),
		dataIndex: 'actionName',
		align: 'center',
		width: '8%',
	},
	// 办理时间
	{
		title: getI18n('system', 'SYSTEM_Process_HandleTime'),
		dataIndex: 'startTime',
		customRender: ({ text }) => dayjs(text).format('YYYY.MM.DD HH:mm:ss'),
		align: 'center',
		width: '15%',
	},
	// 操作内容
	{
		title: getI18n('system', 'SYSTEM_Process_ReceivePerson'),
		dataIndex: 'recordContents',
		align: 'left',
		width: '30%',
		slots: { customRender: 'recordContents' },
	},
	// 办理意见
	{
		title: getI18n('system', 'SYSTEM_Process_HandleOptions'),
		align: 'left',
		dataIndex: 'message',
		width: '23%',
	},
]

export default defineComponent({
	components: {},
	props: {
		// 操作记录列表
		operationHistoryRecordsList: {
			type: Array as PropType<ProcessViewNodeModel[]>,
			required: false,
			default: () => [],
		},
	},
	setup(props) {
		// 列表loading
		const tableLoading = ref<boolean>(false)
		// 列表数据
		const processsList = ref<ProcessViewNodeModel[]>([])
		watch(
			() => props.operationHistoryRecordsList,
			newVal => {
				!validatenull(newVal) && (processsList.value = newVal)
			},
			{ deep: true, immediate: true }
		)

		return {
			PermissionButtonConstatnt,
			columns,
			tableLoading,
			processsList,
			getRandomString,
			getI18n,
		}
	},
})
</script>