<template>
	<div class="project-exit-feedback-form" :model="formData" :rules="rules" ref="formRef">
		<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" >
					<el-input v-model="formData.projectName" :placeholder="t('projectExitFeedback.placeholder.projectName')" readonly>
						<template #append>
							<el-icon class="cursor-pointer interactive-icon" @click="handleSelectProject">
								<FolderOpened />
							</el-icon>
						</template>
					</el-input>
				</div>
			</div>
			<div class="table-row">
				<div class="table-cell label">{{ t('projectExitFeedback.form.exitTime') }}</div>
				<div class="table-cell value">
					<el-date-picker
						v-model="formData.exitTime"
						type="date"
						value-format="YYYY-MM-DD"
						:placeholder="t('projectExitFeedback.placeholder.select')"
						style="width: 100%"
					/>
				</div>
			</div>
			<div class="table-row">
				<div class="table-cell label">{{ t('projectExitFeedback.form.exitExecutor') }}</div>
				<div class="table-cell value">
					<el-input v-model="formData.exitExecutor" :placeholder="t('projectExitFeedback.placeholder.projectName')" readonly>
						<template #append>
							<el-icon class="cursor-pointer interactive-icon" @click="handleSelectUser">
								<FolderOpened />
							</el-icon>
						</template>
					</el-input>
				</div>
			</div>
			<div class="table-row">
				<div class="table-cell label">{{ t('projectExitFeedback.form.exitDescription') }}</div>
				<div class="table-cell value">
					<el-input v-model="formData.exitRemark" type="textarea" :rows="3" :placeholder="t('projectExitFeedback.placeholder.input')" />
				</div>
			</div>
			<div class="table-row">
				<div class="table-cell label">{{ t('projectExitFeedback.form.exitFiles') }}</div>
				<div class="table-cell value">
					<el-input :placeholder="t('projectExitFeedback.placeholder.selectAttachment')" readonly>
						<template #append>
							<UploadFile :modelValue="formData.exitAttachment" @change="handleChange" :fileSize="20" type="simple" :limit="10" :isShowTip="false" />
						</template>
					</el-input>
				</div>
			</div>
		</div>
	</div>
	<el-dialog width="80%" title="关联列表" v-model="dialogShow" :close-on-click-modal="false">
		<template #header> </template>
		<el-table border :data="tableData" height="50vh" @current-change="handleSelectionChange">
			<el-table-column label="选择" width="80">
				<template #default="scope">
					<div class="options" :class="active === scope.$index ? 'active' : ''"></div>
				</template>
			</el-table-column>
			<el-table-column type="index" :label="t('projectExitPlanLibrary.table.index')" width="60" />
			<el-table-column prop="projectName" :label="t('projectExitPlanLibrary.table.projectName')" min-width="180" />
			<el-table-column prop="exitRecommendation" :label="t('projectExitPlanLibrary.table.exitSuggestion')" min-width="160" />
			<el-table-column prop="exitMethod" :label="t('projectExitPlanLibrary.table.exitMethod')" min-width="140" />
			<el-table-column prop="executionTask" :label="t('projectExitPlanLibrary.table.executionTask')" min-width="160" />
			<el-table-column prop="taskDescription" :label="t('projectExitPlanLibrary.table.taskDescription')" min-width="200" show-overflow-tooltip />
			<el-table-column prop="executor" :label="t('projectExitPlanLibrary.table.executor')" min-width="120" />
			<el-table-column prop="taskStartDate" :label="t('projectExitPlanLibrary.table.taskStartTime')" min-width="140" />
			<el-table-column prop="taskEndDate" :label="t('projectExitPlanLibrary.table.taskEndTime')" min-width="140" />
			<el-table-column prop="applicationDept" :label="t('projectExitPlanLibrary.table.applyDepartment')" min-width="160" />
			<el-table-column prop="reviewNotes" :label="t('projectExitPlanLibrary.table.submitMatter')" min-width="160" />
		</el-table>
		<div class="mt15 flex justify-end pagination-wrapper">
			<el-pagination
				background
				layout="sizes, prev, pager, next, jumper, total"
				:total="total"
				:page-sizes="[10, 20, 50, 100]"
				v-model:current-page="queryForm.page"
				v-model:page-size="queryForm.size"
				@size-change="handlePageSizeChange"
				@current-change="handlePageChange"
			/>
		</div>
		<template #footer>
			<el-button type="primary" @click="confirmBtn">确定</el-button>
			<el-button>取消</el-button>
		</template>
	</el-dialog>
	<user-select :visible="userDialog" @ok="confirmUserBtn"/>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { FolderOpened } from '@element-plus/icons-vue';
import { ProjectExitFeedback } from '/@/views/invMid/projectExitFeedback/interface/type';
import userSelect from "/@/components/UserSelect/index.vue"
import { FormRules } from 'element-plus';
import { paramsDataProjectExitPlan, projectExitPlanItem } from '/@/views/invMid/projectExitPlan/interface/type';
import { getProjectExitPlanPage } from '/@/api/investment/projectExitPlan';
const { t } = useI18n();
const formRef = ref<HTMLFormElement | null>();
const rules = ref<FormRules<ProjectExitFeedback>>({});
const props = defineProps<{
	modelValue?: ProjectExitFeedback;
}>();
const active = ref<number>(-1);
const queryForm = ref<paramsDataProjectExitPlan>({
	projectName: '',
	reviewNotes: '',
	applicationDept: '',
	page: 1,
	size: 10,
});
const userDialog = ref(false)
const emit = defineEmits<{
	(e: 'update:modelValue', value: ProjectExitFeedback): void;
}>();
const projectName = ref('');
const dialogShow = ref(false);

const formData = reactive<ProjectExitFeedback>({ ...props.modelValue });

const handleSelectProject = () => {
	dialogShow.value = true;
};
const handlePageSizeChange = (size:number) =>{
	queryForm.value.size = size;
	getDataList();
}
const handlePageChange = (page:number) =>{
	queryForm.value.page = page;
	getDataList();
}
const tableData = ref<projectExitPlanItem[]>([]);
watch(()=>formData, () => {
	emit('update:modelValue', { ...formData })
}, { deep: true,immediate: true});

watch(
	() => props.modelValue,
	(newVal) => {
		if (newVal) {
			Object.assign(formData, newVal);
		}
	},
	{ immediate: true, deep: true }
);

interface ProjectExitPlanLibraryItem {
	id: number;
	projectName: string;
	exitSuggestion: string;
	exitMethod: string;
	executionTask: string;
	taskDescription: string;
	executor: string;
	taskStartTime: string;
	taskEndTime: string;
	applyDepartment: string;
	submitMatter: string;
	projectId?: number;
}
const total = ref<number>(0);
const selectedRows = ref<ProjectExitPlanLibraryItem>();
const handleSelectionChange = (rows: ProjectExitPlanLibraryItem) => {
	selectedRows.value = rows;
	projectName.value = selectedRows.value?.projectName;
	active.value = tableData.value.findIndex((item) => item.id === rows.id);
};
const confirmBtn = () => {
	emit('update:modelValue', {
		...formData,
		projectName:projectName.value,
		projectId: selectedRows.value?.projectId,
	});
	dialogShow.value = false;
};
const getDataList = () => {
	getProjectExitPlanPage(queryForm.value).then((res) => {
		tableData.value = res.data.records;
		total.value = res.data.total;
	});
};
getDataList();
const handleSelectUser = () =>{
	userDialog.value = true
}
const confirmUserBtn = (value:any) =>{
	formData.exitExecutor = value?.name
}
const handleChange = (_:any, data:any[]) => {
	if (!data || Object.prototype.toString.call(data) !== '[object Array]' || data.length === 0){
		formData.exitAttachment = [];
		return;
	}
	formData.exitAttachment = data.map((item:any) => {
		return {
			name: item.name,
			url: item.url
		}
	})
}
</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>
