<template>
	<div class="layout-padding committee-review-library-page">
		<div class="layout-padding-auto layout-padding-view">
			<div class="page-title">{{ t('committeeReviewLibrary.title') }}</div>
			<div class="filter-header">
				<div class="filter-actions">
					<el-button type="primary" icon="Download" @click="handleExport">
						{{ t('committeeReviewLibrary.actions.export') }}
					</el-button>
					<el-button icon="Delete" @click="handleDelete">
						{{ t('committeeReviewLibrary.actions.delete') }}
					</el-button>
				</div>
				<el-form :model="filters" inline class="filter-form">
					<el-form-item :label="t('committeeReviewLibrary.filters.projectName')" class="filter-item">
						<el-input v-model="filters.projectName" :placeholder="t('committeeReviewLibrary.placeholder.input')" />
					</el-form-item>
					<el-form-item :label="t('committeeReviewLibrary.filters.submitItem')" class="filter-item">
						<el-input v-model="filters.reviewNotes" :placeholder="t('committeeReviewLibrary.placeholder.input')" />
					</el-form-item>
					<el-form-item :label="t('committeeReviewLibrary.filters.department')" class="filter-item">
						<el-input v-model="filters.applicationDept" :placeholder="t('committeeReviewLibrary.placeholder.input')" />
					</el-form-item>
					<el-form-item class="filter-buttons">
						<el-button type="primary" @click="handleQuery">
							{{ t('committeeReviewLibrary.actions.query') }}
						</el-button>
						<el-button @click="handleReset">
							{{ t('committeeReviewLibrary.actions.reset') }}
						</el-button>
					</el-form-item>
				</el-form>
			</div>

			<el-card class="table-card" shadow="never">
				<el-table :data="pagedData" style="width: 100%" border @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="48" />
					<el-table-column type="index" :label="t('committeeReviewLibrary.table.index')" width="60" />
					<el-table-column prop="reviewNotes" :label="t('committeeReviewLibrary.table.submitItem')" min-width="160" />
					<el-table-column prop="projectName" :label="t('committeeReviewLibrary.table.projectName')" min-width="160" />
					<el-table-column prop="applicationDept" :label="t('committeeReviewLibrary.table.department')" min-width="160" />
					<el-table-column prop="createBy" :label="t('committeeReviewLibrary.table.applicant')" min-width="140" />
					<el-table-column prop="createTime" :label="t('committeeReviewLibrary.table.applyDate')" min-width="160" />
					<el-table-column :label="t('committeeReviewLibrary.table.actions')" min-width="120" fixed="right">
						<template #default="{ row }">
							<el-button link type="primary" @click="handleView(row)">
								{{ t('committeeReviewLibrary.actions.view') }}
							</el-button>
							<el-button link type="primary" @click="handleDownload(row)">
								{{ t('committeeReviewLibrary.actions.download') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>

				<div class="table-footer">
					<div class="total-text">
						{{ t('committeeReviewLibrary.pagination.total', { total: pagination.total }) }}
					</div>
					<el-pagination
						background
						:current-page="filters.page"
						:page-size="filters.size"
						:total="pagination.total"
						layout="prev, pager, next, jumper, ->, sizes"
						:page-sizes="[10, 20, 50, 100]"
						@current-change="handlePageChange"
						@size-change="handleSizeChange"
					/>
				</div>
			</el-card>

			<el-drawer v-model="detailDrawerVisible" :title="t('committeeReviewLibrary.drawer.title')" size="50%" append-to-body destroy-on-close>
				<el-table :data="detailRows" border style="width: 100%" class="detail-table" v-loading="loading">
					<el-table-column prop="label" :label="t('committeeReviewLibrary.drawer.label')" width="220" />
					<el-table-column prop="value" :label="t('committeeReviewLibrary.drawer.value')">
						<template #default="{ row }">
							<div v-if="row.type === 'files'" class="file-list">
								<el-link v-for="(file, index) in row.files" :key="index" type="primary" :underline="false" @click="handleDownloadFile(file)">
									{{ file.name }}
								</el-link>
							</div>
							<span v-else>{{ row.value }}</span>
						</template>
					</el-table-column>
				</el-table>
			</el-drawer>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useMessage } from '/@/hooks/message';
import { paramsData, ProjectExitFeedback } from '/@/views/invMid/committeeReview/interface/type';
import { getCommitteeApplicationPage, getCommitteeApplicationView } from '/@/api/investment/committeeApplication';

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

const filters: paramsData = reactive({
	projectName: '',
	reviewNotes: '',
	applicationDept: '',
	page: 1,
	size: 10,
});
const tableData = ref<ProjectExitFeedback[]>([
	{
		id: 1,
		reviewNotes: 'xxx',
		projectName: 'xxx',
		applicationDept: 'xxx',
		createBy: 'xxx',
		createTime: '2025-06-28',
	},
	{
		id: 2,
		reviewNotes: 'xxx',
		projectName: 'xxx',
		applicationDept: 'xxx',
		createBy: 'xxx',
		createTime: '2025-06-27',
	},
]);

const selection = ref<ProjectExitFeedback[]>([]);

const pagination = reactive({
	total: tableData.value.length,
});

interface DetailRow {
	label: string;
	value?: string;
	type?: 'text' | 'files';
	files?: Array<{ name: string; url: string }>;
}

const detailDrawerVisible = ref(false);
const detailRows = ref<DetailRow[]>([]);

const pagedData = ref<ProjectExitFeedback[]>([]);
const getDataLIst = () => {
	getCommitteeApplicationPage(filters).then((res) => {
		pagedData.value = res.data.records;
		pagination.total = res.data.total;
	});
};
getDataLIst();
const handleSelectionChange = (rows: ProjectExitFeedback[]) => {
	selection.value = rows;
};

const handleQuery = () => {
	filters.page = 1;
	getDataLIst()
};

const handleReset = () => {
	filters.projectName = '';
	filters.reviewNotes = '';
	filters.applicationDept = '';
	filters.page = 1;
	getDataLIst()
};

const handlePageChange = (page: number) => {
	filters.page = page;
};

const handleSizeChange = (size: number) => {
	filters.size = size;
	filters.page = 1;
};

const handleExport = () => {
	message.info(t('committeeReviewLibrary.messages.export'));
};

const handleDelete = () => {
	if (!selection.value.length) {
		message.warning(t('committeeReviewLibrary.messages.deleteEmpty'));
		return;
	}
	message.success(t('committeeReviewLibrary.messages.deleteSuccess'));
	// TODO: remove rows from tableData
};
const loading = ref(false);
const handleView = (item: ProjectExitFeedback) => {
	detailDrawerVisible.value = true;
	if (!item.id ) {
		message.warning(t('committeeReviewLibrary.messages.viewEmpty'));
		return;
	}
	loading.value = true;
	getCommitteeApplicationView(item.id).then(res =>{
		const row = res.data;
		detailRows.value = [
			{
				label: t('committeeReviewLibrary.drawer.department'),
				value: row.applicationDept,
			},
			{
				label: t('committeeReviewLibrary.drawer.applyDate'),
				value: row.createTime,
			},
			{
				label: t('committeeReviewLibrary.drawer.submitItem'),
				value: row.reviewNotes,
			},
			{
				label: t('committeeReviewLibrary.drawer.projectName'),
				value: row.projectName,
			},
			{
				label: t('committeeReviewLibrary.drawer.materials'),
				type: 'files',
				files: row.attachmentList ? JSON.parse(row.attachmentList) : []
			},
			{
				label: t('committeeReviewLibrary.drawer.applyOpinion'),
				value: row.applicationDeptOpinion,
			},
			{
				label: t('committeeReviewLibrary.drawer.investmentOpinion'),
				value: row.investmentDeptOpinion,
			},
			{
				label: t('committeeReviewLibrary.drawer.relatedOpinion'),
				value: row.cooperationDeptOpinion,
			},
			{
				label: t('committeeReviewLibrary.drawer.groupOpinion'),
				value: row.groupLeaderOpinion,
			},
		];
	}).catch(err => {
		message.error(err.msg);
	}).finally(() => {
		loading.value = false;
	});
};

const handleDownload = (row: ProjectExitFeedback) => {
	message.info(`${row.projectName} ${t('committeeReviewLibrary.messages.download')}`);
};

const handleDownloadFile = (file: { name: string; url: string }) => {
	message.info(`${file.name} ${t('committeeReviewLibrary.messages.download')}`);
};
</script>

<style scoped>
.page-title {
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 12px;
}

.filter-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.filter-form {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 24px;
}

.filter-item :deep(.el-form-item__label) {
	line-height: 32px;
}

.filter-item :deep(.el-input) {
	width: 200px;
}

.filter-buttons {
	display: flex;
	gap: 12px;
}

.filter-buttons :deep(.el-form-item__content) {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-left: 0 !important;
}

.table-card {
	margin-top: 0;
}

.table-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 12px;
}

.total-text {
	color: var(--el-text-color-regular);
}

.file-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.detail-table :deep(.el-table__row td:first-child) {
	background-color: #f5f7fa;
	font-weight: 500;
}
</style>
