<template>
	<el-dialog
		width="80%"
		:title="t('committeeReviewLibrary.title')"
		v-model="visible"
		:close-on-click-modal="false"
		destroy-on-close
	>
		<el-form :model="filters" inline class="filter-form mb15">
			<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>

		<el-table
			:data="pagedData"
			style="width: 100%"
			height="50vh"
			border
			highlight-current-row
			@current-change="handleSelectionChange"
		>
			<el-table-column :label="t('committeeReviewLibrary.table.index')" width="60">
				<template #default="scope">
					<div class="options" :class="active === scope.$index ? 'active' : ''"></div>
				</template>
			</el-table-column>
			<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>

		<div class="mt15 flex justify-end pagination-wrapper">
			<el-pagination
				background
				layout="sizes, prev, pager, next, jumper, total"
				:total="pagination.total"
				:page-sizes="[10, 20, 50, 100]"
				v-model:page-size="filters.size"
				v-model:current-page="filters.page"
				@size-change="handleSizeChange"
				@current-change="handlePageChange"
			/>
		</div>

		<template #footer>
			<el-button type="primary" @click="handleConfirm" :disabled="!selectedRow">
				{{ t('committeeReview.projectSelect.confirm') }}
			</el-button>
			<el-button @click="handleCancel">
				{{ t('committeeReview.projectSelect.cancel') }}
			</el-button>
		</template>
	</el-dialog>
</template>

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

const { t } = useI18n();

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

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

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

// 查询条件
const filters = reactive<paramsData>({
	projectName: '',
	reviewNotes: '',
	applicationDept: '',
	page: 1,
	size: 10,
});

// 表格数据
const pagedData = ref<ProjectExitFeedback[]>([]);
const pagination = reactive({
	total: 0,
});

// 选中行相关
const active = ref<number>(-1);
const selectedRow = ref<ProjectExitFeedback | 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 = () => {
	getCommitteeApplicationPage(filters).then((res) => {
		pagedData.value = res.data.records;
		pagination.total = res.data.total;
	});
};

// 处理选择变更
const handleSelectionChange = (val: ProjectExitFeedback | null) => {
	selectedRow.value = val;
	if (val && val.id) {
		active.value = pagedData.value.findIndex((item) => item.id === val.id);
	} else {
		active.value = -1;
	}
};

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

// 查询
const handleQuery = () => {
	filters.page = 1;
	getDataList();
};

// 重置查询条件
const handleReset = () => {
	filters.projectName = '';
	filters.reviewNotes = '';
	filters.applicationDept = '';
	filters.page = 1;
	getDataList();
};

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

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

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

// 取消
const handleCancel = () => {
	visible.value = false;
};

// 组件挂载时获取数据
onMounted(() => {
	visible.value = props.modelValue;
	if (props.modelValue) {
		getDataList();
	}
});
</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;
}

.filter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

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

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

.filter-buttons {
	display: flex;
	gap: 12px;
}
</style>