<template>
	<el-dialog title="收费明细" v-model="visible" width="900px" :close-on-click-modal="false" draggable>
		<div class="fee-header">
			<span>学号: {{ serialNumber }}</span>
			<span style="margin-left: 20px">姓名: {{ realName }}</span>
			<el-button type="primary" size="small" style="margin-left: 20px" @click="handleBindProject">绑定收费项目</el-button>
		</div>
		<el-table :data="feeList" v-loading="loading" stripe border style="margin-top: 15px">
			<el-table-column type="index" label="序号" width="60" align="center" />
			<el-table-column prop="projectCode" label="项目代码" width="120" align="center" />
			<el-table-column prop="money" label="应缴金额" width="120" align="right">
				<template #default="{ row }">
					{{ row.money ? Number(row.money).toFixed(2) : '0.00' }}
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态" width="100" align="center">
				<template #default="{ row }">
					<el-tag v-if="row.status === '0'" type="info">未缴费</el-tag>
					<el-tag v-else-if="row.status === '10'" type="success">已缴费</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="payType" label="缴费方式" width="120" align="center">
				<template #default="{ row }">
					<span v-if="row.payType === '0'">-</span>
					<span v-else>{{ row.payType }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="paiedMoney" label="实缴金额" width="120" align="right">
				<template #default="{ row }">
					{{ row.paiedMoney ? Number(row.paiedMoney).toFixed(2) : '-' }}
				</template>
			</el-table-column>
			<el-table-column prop="payTime" label="缴费时间" width="180" align="center" />
			<el-table-column label="操作" align="center" fixed="right" width="180">
				<template #default="scope">
					<template v-if="scope.row.status === '0'">
						<el-button link type="primary" size="small" @click="handlePay(scope.row)">缴费</el-button>
						<el-button link type="danger" size="small" @click="handleDeleteFee(scope.row)">删除</el-button>
					</template>
					<template v-else>
						<el-button link type="warning" size="small" @click="handleCancelPay(scope.row)">取消缴费</el-button>
					</template>
				</template>
			</el-table-column>
		</el-table>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">关 闭</el-button>
			</span>
		</template>
	</el-dialog>

	<el-dialog title="绑定收费项目" v-model="bindDialogVisible" width="500px">
		<el-form label-width="100px">
			<el-form-item label="选择项目">
				<el-select v-model="selectedProjectCodes" multiple placeholder="请选择收费项目" style="width: 100%">
					<el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="bindDialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="submitBind">确 定</el-button>
		</template>
	</el-dialog>

	<el-dialog title="缴费登记" v-model="payDialogVisible" width="400px">
		<el-form label-width="100px">
			<el-form-item label="缴费金额">
				<el-input-number v-model="payForm.money" :min="0" :precision="2" style="width: 100%" />
			</el-form-item>
			<el-form-item label="缴费方式">
				<el-select v-model="payForm.payType" placeholder="请选择缴费方式" style="width: 100%">
					<el-option label="现金" value="20" />
					<el-option label="银行转账" value="30" />
					<el-option label="微信" value="40" />
					<el-option label="支付宝" value="21" />
					<el-option label="其他" value="22" />
				</el-select>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="payDialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="submitPay">确 定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="FinanceRecruitStuFeeDetail">
import { ref, reactive } from 'vue';
import { getBySerialNumber, bindProject, payRegister, cancelPay, delObj } from '/@/api/finance/recruitStuProject';
import { getList } from '/@/api/finance/recruitProject';
import { useMessage, useMessageBox } from '/@/hooks/message';

const visible = ref(false);
const loading = ref(false);
const serialNumber = ref('');
const realName = ref('');
const feeList = ref<any[]>([]);

const bindDialogVisible = ref(false);
const projectList = ref<any[]>([]);
const selectedProjectCodes = ref<string[]>([]);

const payDialogVisible = ref(false);
const payForm = reactive({
	id: '',
	money: 0,
	payType: '',
});

const openDialog = async (stuSerialNumber: string, stuRealName: string) => {
	serialNumber.value = stuSerialNumber;
	realName.value = stuRealName;
	visible.value = true;
	await loadFeeList();
};

const loadFeeList = async () => {
	loading.value = true;
	try {
		const res = await getBySerialNumber(serialNumber.value);
		feeList.value = res?.data || [];
	} catch (err: any) {
		useMessage().error(err.msg || '获取收费明细失败');
		feeList.value = [];
	} finally {
		loading.value = false;
	}
};

const handleBindProject = async () => {
	try {
		const res = await getList({});
		projectList.value = res?.data || [];
		selectedProjectCodes.value = [];
		bindDialogVisible.value = true;
	} catch (err: any) {
		useMessage().error(err.msg || '获取收费项目失败');
	}
};

const submitBind = async () => {
	if (selectedProjectCodes.value.length === 0) {
		useMessage().warning('请选择收费项目');
		return;
	}
	try {
		await bindProject(serialNumber.value, selectedProjectCodes.value);
		useMessage().success('绑定成功');
		bindDialogVisible.value = false;
		await loadFeeList();
	} catch (err: any) {
		useMessage().error(err.msg || '绑定失败');
	}
};

const handlePay = (row: any) => {
	payForm.id = row.id;
	payForm.money = Number(row.money) || 0;
	payForm.payType = '';
	payDialogVisible.value = true;
};

const submitPay = async () => {
	if (!payForm.payType) {
		useMessage().warning('请选择缴费方式');
		return;
	}
	try {
		await payRegister(payForm.id, payForm.payType);
		useMessage().success('缴费成功');
		payDialogVisible.value = false;
		await loadFeeList();
	} catch (err: any) {
		useMessage().error(err.msg || '缴费失败');
	}
};

const handleCancelPay = async (row: any) => {
	try {
		await useMessageBox().confirm('确定要取消该缴费记录吗？', '提示', { type: 'warning' });
		await cancelPay(row.id);
		useMessage().success('取消成功');
		await loadFeeList();
	} catch {
		// 用户取消操作
	}
};

const handleDeleteFee = async (row: any) => {
	try {
		await useMessageBox().confirm('确定要删除该收费项目吗？', '提示', { type: 'warning' });
		await delObj(row.id);
		useMessage().success('删除成功');
		await loadFeeList();
	} catch {
		// 用户取消操作
	}
};

defineExpose({ openDialog });
</script>

<style scoped>
.fee-header {
	padding: 10px 0;
	font-size: 14px;
	color: #606266;
}
</style>
