<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row class="header-summary mb10">
				<div class="title">{{ t('postInvestmentManagement.title') }}</div>
			</el-row>

			<el-row class="toolbar-row mb10">
				<div class="toolbar-left">
					<el-button icon="Download" @click="handleExport">{{ t('common.exportBtn') || '导出' }}</el-button>
				</div>
				<div class="toolbar-right">
					<el-form class="search-form" :inline="true" :model="queryForm" @submit.prevent>
						<el-form-item :label="t('postInvestmentManagement.form.projectName')">
							<el-input v-model="queryForm.projectName" :placeholder="t('postInvestmentManagement.placeholder.input')" style="width: 180px" />
						</el-form-item>
						<el-form-item :label="t('postInvestmentManagement.form.projectMainUnit')">
							<el-input v-model="queryForm.projectMainUnit" :placeholder="t('postInvestmentManagement.placeholder.input')" style="width: 180px" />
						</el-form-item>
						<el-form-item :label="t('postInvestmentManagement.form.majorInvestmentProject')">
							<el-select
								v-model="queryForm.majorInvestmentProject"
								:placeholder="t('postInvestmentManagement.placeholder.select')"
								clearable
								style="width: 160px"
							>
								<el-option label="是" value="是" />
								<el-option label="否" value="否" />
							</el-select>
						</el-form-item>
						<el-form-item :label="t('postInvestmentManagement.form.projectNature')">
							<el-input v-model="queryForm.projectNature" :placeholder="t('postInvestmentManagement.placeholder.input')" style="width: 160px" />
						</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>
				</div>
			</el-row>

			<el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="48" />
				<el-table-column type="index" :label="t('postInvestmentManagement.table.index')" width="60" />
				<el-table-column prop="projectName" :label="t('postInvestmentManagement.table.projectName')" min-width="200" />
				<el-table-column prop="projectMainEntity" :label="t('postInvestmentManagement.table.projectMainUnit')" min-width="200" />
				<el-table-column prop="projectOwnerUnit" :label="t('postInvestmentManagement.table.projectOwnerUnit')" min-width="200" />
				<el-table-column prop="investmentCategory" :label="t('postInvestmentManagement.table.investmentCategory')" min-width="140">
					<template #default="{ row }">
						{{ initTypeEnums(investmentCategoryOptions, row.investmentCategory) }}
					</template>
				</el-table-column>
				<el-table-column prop="projectNature" :label="t('postInvestmentManagement.table.projectNature')" min-width="140">
					<template #default="{ row }">
						{{ initTypeEnums(projectNatureOptions, row.projectNature) }}
					</template>
				</el-table-column>
				<el-table-column prop="projectInvestmentDirection" :label="t('postInvestmentManagement.table.projectDirection')" min-width="160" />
				<el-table-column prop="projectStartTime" :label="t('postInvestmentManagement.table.projectImplementationStart')" min-width="160" />
				<el-table-column prop="projectEndTime" :label="t('postInvestmentManagement.table.projectImplementationEnd')" min-width="160" />
				<el-table-column prop="investmentArea" :label="t('postInvestmentManagement.table.investmentRegion')" min-width="140">
					<template #default="{ row }">
						{{ initTypeEnums(investmentAreaOptions, row.investmentArea) }}
					</template>
				</el-table-column>
				<el-table-column prop="majorInvestmentProjects" :label="t('postInvestmentManagement.table.majorInvestmentProject')" min-width="160" />
				<el-table-column :label="t('postInvestmentManagement.table.action')" width="100" fixed="right">
					<template #default="{ row }">
						<el-button link type="primary" @click="handleView(row)">{{ t('common.viewBtn') || '查看' }}</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:page-size="queryForm.pageSize"
					v-model:current-page="queryForm.page"
					@size-change="handlePageSizeChange"
					@current-change="handlePageChange"
				/>
			</div>
		</div>

		<el-drawer
			v-model="detailDrawerVisible"
			class="post-investment-management-detail-drawer"
			direction="rtl"
			size="70%"
			:with-header="false"
			:close-on-click-modal="false"
		>
			<div class="detail-header">
				<span class="detail-title">{{ t('postInvestmentManagement.detail.title') }}</span>
				<el-button class="close-btn" link icon="Close" @click="detailDrawerVisible = false" />
			</div>
			<div class="detail-content">
				<PostInvestmentEvaluationFormDetals v-model="detailFormData" />
			</div>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useMessage } from '/@/hooks/message';
import { getInvestmentEvaluationList, getInvestmentEvaluationView } from '/@/api/investment/postVoteList';
import { ProjectInvestmentInfo, requestData } from '/@/views/invBid/postInvestmentEvaluation/interface/type';
import { Enums, investmentAreaOptions, investmentCategoryOptions, projectNatureOptions } from '/@/hooks/enums';
import PostInvestmentEvaluationFormDetals from '/@/components/invBid/common/PostInvestmentEvaluationFormDetals.vue';

interface PostInvestmentManagementItem {
	id: number;
	projectName: string;
	projectMainUnit: string;
	projectOwnerUnit: string;
	investmentCategory: string;
	projectNature: string;
	projectDirection: string;
	projectImplementationStart: string;
	projectImplementationEnd: string;
	investmentRegion: string;
	majorInvestmentProject: string;
}

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

const queryForm: requestData = reactive({
	page: 1,
	size: 10,
	projectName: '',
	projectMainEntity: '',
	projectNature: '',
	majorInvestmentProjects: '',
});

const tableData = ref<ProjectInvestmentInfo[]>([]);
const selectedRows = ref<ProjectInvestmentInfo[]>([]);
const total = ref<number | undefined>(0);
const detailDrawerVisible = ref(false);
const detailFormData = ref<PostInvestmentEvaluationFormData>({
	actualTotalRevenue: '',
	actualInvestmentIncome: '',
	actualInvestmentReturnRate: '',
	attachments: [],
});
const getDataList = () => {
	getInvestmentEvaluationList(queryForm).then((response) => {
		tableData.value = response.data.records;
		total.value = response.data.total;
	});
};

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

const handleReset = () => {
	queryForm.projectName = '';
	queryForm.projectMainUnit = '';
	queryForm.majorInvestmentProject = '';
	queryForm.projectNature = '';
	queryForm.page = 1;
	getDataList();
};

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

const handleSelectionChange = (selection: PostInvestmentManagementItem[]) => {
	selectedRows.value = selection;
};

const handlePageChange = () => {
	getDataList();
};

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

const handleView = (row: PostInvestmentManagementItem) => {
	// 暂时使用空数据，后续需要根据 row.id 从接口获取数据
	if (row) {
		getInvestmentEvaluationView(row.id).then(res =>{
			Object.assign(detailFormData.value, res.data);
		})
		detailDrawerVisible.value = true;
	}
};
const initTypeEnums = (enums: Enums[], type: string) => {
	return enums.find((item: Enums) => item.value === type)?.label;
};
// 初始化
getDataList();
</script>

<style scoped>
.header-summary .title {
	margin: 0 auto;
	font-size: 22px;
	font-weight: 600;
	text-align: center;
}

.toolbar-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.toolbar-left {
	display: flex;
	gap: 10px;
}

.toolbar-right {
	display: flex;
	align-items: center;
}

.search-form {
	display: flex;
	align-items: center;
}

.pagination-wrapper {
	margin-top: 15px;
}

.post-investment-management-detail-drawer {
	--el-drawer-padding-primary: 0;
}

.detail-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
	border-bottom: 1px solid var(--el-border-color-light);
}

.detail-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--el-text-color-primary);
}

.close-btn {
	font-size: 20px;
}

.detail-content {
	padding: 20px;
	overflow-y: auto;
	height: calc(100vh - 80px);
}
</style>
