<template>
	<div class="project-exit-feedback-form">
		<div class="form-heading">{{ t('projectExitFeedback.form.title') }}</div>
		<div class="feedback-table">
			<div class="table-row">
				<div class="table-cell label required">{{ t('projectExitFeedback.form.projectName') }}</div>
				<div class="table-cell value project-name-cell" >
					{{ formData.projectName }}
				</div>
			</div>
			<div class="table-row">
				<div class="table-cell label">{{ t('projectExitFeedback.form.exitTime') }}</div>
				<div class="table-cell value">
					{{ formData.exitTime }}
				</div>
			</div>
			<div class="table-row">
				<div class="table-cell label">{{ t('projectExitFeedback.form.exitExecutor') }}</div>
				<div class="table-cell value">
					{{ formData.exitExecutor }}
				</div>
			</div>
			<div class="table-row">
				<div class="table-cell label">{{ t('projectExitFeedback.form.exitDescription') }}</div>
				<div class="table-cell value">
					{{ formData.exitRemark }}
				</div>
			</div>
			<div class="table-row">
				<div class="table-cell label">{{ t('projectExitFeedback.form.exitFiles') }}</div>
				<div class="table-cell value">
					<UploadFile :modelValue="formData.exitAttachment ? JSON.parse(formData.exitAttachment as string) : []" :fileSize="20" disabled type="simple" :limit="10" :isShowTip="false" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { ProjectExitFeedback } from '/@/views/invMid/projectExitFeedback/interface/type';

const { t } = useI18n();

const props = defineProps<{
	modelValue?: ProjectExitFeedback;
}>();
const formData = reactive<ProjectExitFeedback>({ ...props.modelValue });
watch(
	() => props.modelValue,
	(newVal) => {
		if (newVal) {
			Object.assign(formData, newVal);
		}
	},
	{ immediate: true, deep: true }
);
</script>

<style scoped>
.project-exit-feedback-form {
	background-color: #fff;
	border-radius: 4px;
	border: 1px solid var(--el-border-color-lighter);
	padding: 24px;
}

.form-heading {
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	color: var(--el-text-color-primary);
	margin-bottom: 16px;
}

.feedback-table {
	border: 1px solid var(--el-border-color);
}

.table-row {
	display: flex;
	border-top: 1px solid var(--el-border-color);
}

.table-row:first-of-type {
	border-top: none;
}

.table-cell {
	border-right: 1px solid var(--el-border-color);
	padding: 12px;
	display: flex;
	align-items: center;
}

.table-cell:last-of-type {
	border-right: none;
}

.table-cell.label {
	width: 160px;
	background-color: var(--el-fill-color-light);
	font-weight: 500;
}

.table-cell.label.required::after {
	content: '*';
	color: var(--el-color-danger);
	margin-left: 4px;
}

.table-cell.value {
	flex: 1;
}

.interactive-icon {
	color: var(--el-color-primary);
}

.feedback-table :deep(.el-input),
.feedback-table :deep(.el-select),
.feedback-table :deep(.el-date-editor),
.feedback-table :deep(.el-textarea) {
	width: 100%;
}
.options {
	width: 20px;
	height: 20px;
	cursor: pointer;
	border: 1px solid var(--el-border-color);
	border-radius: 50%;
}
.active {
	background-color: var(--el-color-primary);
	color: white;
}
</style>
