<template>
	<el-dialog
		width="80%"
		:title="t('projectLibrary.title')"
		v-model="visible"
		:close-on-click-modal="false"
		destroy-on-close
	>
		<template #header>
			<el-form inline @submit.prevent>
				<el-form-item :label="t('projectLibrary.form.projectName')">
					<el-input
						v-model="queryForm.projectName"
						:placeholder="t('projectLibrary.placeholder.input')"
						style="width: 200px"
					/>
				</el-form-item>
				<el-form-item :label="t('projectLibrary.form.projectMainUnit')">
					<el-input
						v-model="queryForm.projectMainUnit"
						:placeholder="t('projectLibrary.placeholder.input')"
						style="width: 200px"
					/>
				</el-form-item>
				<el-form-item :label="t('projectLibrary.form.projectNature')">
					<el-select
						v-model="queryForm.projectNature"
						:placeholder="t('projectLibrary.placeholder.select')"
						style="width: 160px"
						clearable
					>
						<el-option
							v-for="item in projectNatureOptions"
							:key="item.value"
							:value="item.value"
							:label="item.label"
						/>
					</el-select>
				</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>
		</template>

		<el-table
			:data="tableData"
			style="width: 100%"
			height="50vh"
			highlight-current-row
			border
			@current-change="handleSelectionChange"
		>
			<el-table-column :label="t('projectLibrary.table.select')" width="80">
				<template #default="scope">
					<div
						class="options"
						:class="active === scope.$index ? 'active' : ''"
					></div>
				</template>
			</el-table-column>

			<el-table-column
				prop="projectName"
				:label="t('projectLibrary.table.projectName')"
				min-width="200"
			/>

			<el-table-column
				prop="projectMainEntity"
				:label="t('projectLibrary.table.projectMainUnit')"
				min-width="200"
			/>

			<el-table-column
				prop="projectOwnerUnit"
				:label="t('projectLibrary.table.projectOwnerUnit')"
				min-width="200"
			/>

			<el-table-column
				prop="constructionStage"
				:label="t('projectLibrary.table.constructionStage')"
				min-width="120"
			/>

			<el-table-column
				prop="investmentCategory"
				:label="t('projectLibrary.table.investmentCategory')"
				min-width="140"
			>
				<template #default="{ row }">
					{{
						investmentCategoryOptions.find(
							(item: Enums) => item.value === row.investmentCategory
						)?.label
					}}
				</template>
			</el-table-column>

			<el-table-column
				prop="projectNature"
				:label="t('projectLibrary.table.projectNature')"
				min-width="140"
			>
				<template #default="{ row }">
					{{
						projectNatureOptions.find(
							(item: Enums) => item.value === row.projectNature
						)?.label
					}}
				</template>
			</el-table-column>

			<el-table-column
				prop="projectInvestmentDirection"
				:label="t('projectLibrary.table.projectDirection')"
				min-width="160"
			/>

			<el-table-column
				prop="projectStartTime"
				:label="t('projectLibrary.table.projectImplementationStart')"
				min-width="160"
			/>

			<el-table-column
				prop="projectEndTime"
				:label="t('projectLibrary.table.projectImplementationEnd')"
				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:page-size="queryForm.size"
				v-model:current-page="queryForm.page"
				@size-change="handlePageSizeChange"
				@current-change="handlePageChange"
			/>
		</div>

		<template #footer>
			<el-button type="primary" @click="tableSubmit" :disabled="!selectItem">
				{{ t('common.confirmB') }}
			</el-button>
			<el-button @click="cancel">
				{{ t('common.cancelB') }}
			</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import type { Enums } from '/@/hooks/enums';
import {
	investmentCategoryOptions,
	projectNatureOptions,
} from '/@/hooks/enums';
import type { ProjectLibraryDetailT } from '/@/views/invMid/projectLibrary/interface/types';
import {
	investmentProjectsPlanPage,
} from '/@/api/investment/investmentManagement';

const { t } = useI18n();

// 定义组件属性
const props = defineProps<{
	modelValue: boolean;
}>();

// 定义事件
const emit = defineEmits<{
	(e: 'update:modelValue', value: boolean): void;
	(e: 'select', row: ProjectLibraryDetailT): void;
}>();

// 控制弹窗显示隐藏
const visible = ref<boolean>(false);

// 查询表单
const queryForm = reactive({
	page: 1,
	size: 10,
	projectName: '',
	projectMainUnit: '',
	projectNature: '',
});

// 表格数据
const tableData = ref<ProjectLibraryDetailT[]>([]);
const total = ref<number>(0);
const active = ref<number>(-1);

// 当前选中项
const selectItem = ref<ProjectLibraryDetailT | null>(null);

// 监听modelValue变化
watch(
	() => props.modelValue,
	(newVal) => {
		visible.value = newVal;
		if (newVal) {
			getDataList();
		}
	}
);

// 监听visible变化
watch(
	() => visible.value,
	(newVal) => {
		emit('update:modelValue', newVal);
		if (!newVal) {
			resetSelection();
		}
	}
);

// 获取数据列表
const getDataList = async () => {
	try {
		const res = await investmentProjectsPlanPage(queryForm);
		total.value = res.data.total as number;
		tableData.value = res.data.records;
	} catch (error: any) {
		console.log(error);
	}
};

// 处理选择变更
const handleSelectionChange = (val: ProjectLibraryDetailT) => {
	if (val && val.id !== undefined) {
		active.value = tableData.value.findIndex((item) => item.id === val.id);
		selectItem.value = val;
	}
};

// 重置选择
const resetSelection = () => {
	active.value = -1;
	selectItem.value = null;
};

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

// 重置搜索条件
const handleReset = () => {
	queryForm.projectName = '';
	queryForm.projectMainUnit = '';
	queryForm.projectNature = '';
	queryForm.page = 1;
	getDataList();
};

// 分页大小改变
const handlePageSizeChange = (size: number) => {
	queryForm.size = size;
	queryForm.page = 1;
	getDataList();
};

// 页码改变
const handlePageChange = (page: number) => {
	queryForm.page = page;
	getDataList();
};

// 确认选择
const tableSubmit = () => {
	if (selectItem.value) {
		emit('select', selectItem.value);
		visible.value = false;
	}
};

// 取消
const cancel = () => {
	visible.value = false;
};
</script>

<style scoped>
.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>