<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row class="page-breadcrumb mb10">
				<el-button link icon="Back" @click="handleBack">{{ t('common.backBtn') || '返回' }}</el-button>
				<span class="breadcrumb-divider">/</span>
				<span class="breadcrumb-current">{{ t('projectExitPlanLibrary.title') }}</span>
			</el-row>

			<el-row class="page-title-row mb15">
				<div class="page-title">{{ t('projectExitPlanLibrary.title') }}</div>
			</el-row>

			<el-row class="toolbar-row mb15" justify="space-between" align="middle">
				<div class="toolbar-left">
					<el-button icon="Download" @click="handleExport">{{ t('common.exportBtn') || '导出' }}</el-button>
					<el-button type="primary" plain icon="Delete" :disabled="!selectedRows.length" @click="handleBatchDelete">{{
						t('common.delBtn') || '删除'
					}}</el-button>
				</div>
				<el-form :model="queryForm" :inline="true" class="search-form" @submit.prevent>
					<el-form-item :label="t('projectExitPlanLibrary.form.projectName')">
						<el-input v-model="queryForm.projectName" :placeholder="t('projectExitPlanLibrary.placeholder.input')" style="width: 200px" />
					</el-form-item>
					<el-form-item :label="t('projectExitPlanLibrary.form.submitMatter')">
						<el-input v-model="queryForm.reviewNotes" :placeholder="t('projectExitPlanLibrary.placeholder.input')" style="width: 200px" />
					</el-form-item>
					<el-form-item :label="t('projectExitPlanLibrary.form.applyDepartment')">
						<el-input v-model="queryForm.applicationDept" :placeholder="t('projectExitPlanLibrary.placeholder.input')" style="width: 200px" />
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="Search" @click="handleSearch">{{ t('common.queryBtn') || '查询' }}</el-button>
						<el-button icon="Refresh" @click="handleReset">{{ t('common.resetBtn') || '重置' }}</el-button>
					</el-form-item>
				</el-form>
			</el-row>

			<el-table border :data="tableData" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="48" />
				<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-column :label="t('projectExitPlanLibrary.table.action')" fixed="right" width="140">
					<template #default="{ row }">
						<el-button link type="primary" @click="handleView(row)">{{ t('common.viewBtn') || '查看' }}</el-button>
						<el-button link type="primary" @click="handleDownload(row)">{{ t('projectExitPlanLibrary.table.download') }}</el-button>
					</template>
				</el-table-column>
			</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>
		</div>
		<el-drawer v-model="visible" size="60%" :close-on-click-modal="false">
			<project-exit-plan-form-detail v-model="detailForm" title="项目退出计划申请表 - 详情"/>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useMessage } from '/@/hooks/message';
import { paramsDataProjectExitPlan, projectExitPlanItem } from '/@/views/invMid/projectExitPlan/interface/type';
import { getProjectExitPlanPage } from '/@/api/investment/projectExitPlan';
import ProjectExitPlanFormDetail from '/@/components/investment/common/ProjectExitPlanFormDetail.vue';

interface ProjectExitPlanLibraryItem {
	id: number;
	projectName: string;
	exitSuggestion: string;
	exitMethod: string;
	executionTask: string;
	taskDescription: string;
	executor: string;
	taskStartTime: string;
	taskEndTime: string;
	applyDepartment: string;
	submitMatter: string;
}

const { t } = useI18n();
const message = useMessage();

const queryForm = ref<paramsDataProjectExitPlan>({
	projectName: '',
	reviewNotes: '',
	applicationDept: '',
	page: 1,
	size: 10,
});

const total = ref(0);
const originData = ref<ProjectExitPlanLibraryItem[]>([]);
const tableData = ref<projectExitPlanItem[]>([]);
const selectedRows = ref<ProjectExitPlanLibraryItem[]>([]);
const detailForm = ref({})
const visible = ref(false)

const getDataList = () => {
	getProjectExitPlanPage(queryForm.value).then((res) => {
		tableData.value = res.data.records;
		total.value = res.data.total;
	});
};

const handleSearch = () => {
	queryForm.value.page = 1;
	getDataList();
};

const handleReset = () => {
	queryForm.value.projectName = '';
	queryForm.value.applicationDept = '';
	queryForm.value.reviewNotes = '';
	queryForm.value.page = 1;
	getDataList();
};

const handleSelectionChange = (rows: ProjectExitPlanLibraryItem[]) => {
	selectedRows.value = rows;
};

const handleExport = () => {
	message.info(t('projectExitPlanLibrary.message.exportInfo'));
};

const handleBatchDelete = () => {
	if (!selectedRows.value.length) return;
	const ids = selectedRows.value.map((item) => item.id);
	originData.value = originData.value.filter((item) => !ids.includes(item.id));
	selectedRows.value = [];
	if (tableData.value.length === 0 && queryForm.value.page > 1) {
		queryForm.value.page -= 1;
	}
	getDataList();
	message.success(t('projectExitPlanLibrary.message.deleteSuccess'));
};

const handleView = (row: ProjectExitPlanLibraryItem) => {
	detailForm.value = row;
	visible.value = true;
};

const handleDownload = (row: ProjectExitPlanLibraryItem) => {
	message.success(`${t('projectExitPlanLibrary.message.downloadInfo')}：${row.projectName}`);
};

const handlePageChange = (page: number) => {
	queryForm.value.page = page;
	getDataList();
};

const handlePageSizeChange = (size: number) => {
	queryForm.value.size = size;
	queryForm.value.page = 1;
	getDataList();
};

const handleBack = () => {
	history.length > 1 ? history.back() : message.info(t('projectExitPlanLibrary.message.backInfo'));
};

getDataList();
</script>

<style scoped>
.page-breadcrumb {
	align-items: center;
	gap: 6px;
}

.breadcrumb-divider {
	color: var(--el-text-color-placeholder);
}

.breadcrumb-current {
	font-size: 14px;
	color: var(--el-text-color-secondary);
}

.page-title-row {
	display: flex;
	justify-content: center;
}

.page-title {
	font-size: 20px;
	font-weight: 600;
}

.toolbar-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.toolbar-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.search-form {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	justify-content: flex-end;
}

.search-form :deep(.el-form-item) {
	margin-bottom: 0;
}

.pagination-wrapper {
	width: 100%;
}
</style>
