<template>
	<el-drawer v-model="visible" v-loading="loading" direction="rtl" size="50%" title="缴费记录">
		<el-table :data="PaymentDetailsList" @selection-change="handleSelectionChange">
			<!-- <el-table-column type="selection" width="55" align="center" />
			<el-table-column label="设备金额" align="center" prop="id" /> -->
			<el-table-column label="订单号" align="center" prop="orderNumer" />
			<el-table-column label="设备" align="center" prop="configId" v-if="props.configId==null" />
			<el-table-column label="月份" align="center" prop="year">
				<template #default="scope">
					<span class="">{{scope.row.year}}个月</span>
				</template>
			</el-table-column>
			<el-table-column label="设备金额" align="center" prop="configMoney">
				<template #default="scope">
					<span class="text-price">{{scope.row.configMoney}}</span>
				</template>
			</el-table-column>
		</el-table>
	</el-drawer>
</template>

<script setup>
	import {
		listPaymentDetails,
		// getPaymentDetails,
		// delPaymentDetails,
		// addPaymentDetails,
		// updatePaymentDetails
	} from "@/api/PaymentDetails/PaymentDetails";

	const props = defineProps({
		configId: String
	});

	const loading = ref(true);
	const total = ref(0);
	const visible = ref(false);
	const ids = ref([]);

	const queryParams = ref({
		configId: null,
	});
	const PaymentDetailsList = ref([]);

	/** 查询订单详情列表 */
	function getList() {
		console.log(props)
		loading.value = true;
		queryParams.value.configId = props.configId
		listPaymentDetails(queryParams.value).then(response => {
			PaymentDetailsList.value = response.rows;
			total.value = response.total;
			setTimeout(function() {
				loading.value = false;
			}, 500)
		});
	}

	/** 查询参数列表 */
	function show() {
		getList();
		visible.value = true;
	}

	// 多选框选中数据
	function handleSelectionChange(selection) {
		ids.value = selection.map(item => item.id);
	}

	defineExpose({
		show,
	});
</script>

<style>
</style>
