<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="订单号" prop="orderNumer">
				<el-input v-model="queryParams.orderNumer" placeholder="请输入订单号" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
				<el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<!-- <el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
		</el-row> -->

<!-- 		<el-table :data="paymentConfigList" @selection-change="handleSelectionChange"
			@expand-change="handleExpandChange">
			<el-table-column type="expand">
				<div class="padding">
					<payment-details-table :paymentDetailsList="paymentDetailsList" :showConfigId="true"
						:showBorder="true" />
				</div>
			</el-table-column>
			<el-table-column label="订单号" align="center" prop="orderNumer" />
			<el-table-column label="支付金额" align="center" prop="paymentMoney">
				<template #default="scope">
					<span class="text-price">{{scope.row.paymentMoney}}</span>
				</template>
			</el-table-column>
			<el-table-column label="支付方式" align="center" prop="paymentType">
				<template #default="scope">
					<dict-tag :options="com_payment_type" :value="scope.row.paymentType" />
				</template>
			</el-table-column>
			<el-table-column label="支付状态" align="center" prop="paymentState">
				<template #default="scope">
					<dict-tag :options="com_payment_state" :value="scope.row.paymentState" />
				</template>
			</el-table-column>
			<el-table-column label="支付时间" align="center" prop="parmentTime">
				<template #default="scope">
					<span>{{ parseTime(scope.row.parmentTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" fixed="right">
				<template #default="scope">
					<el-button type="text" icon="View" @click="handleView(scope.row)">详情</el-button>
				</template>
			</el-table-column>
		</el-table> -->
		<payment-config-table :paymentConfigList="paymentConfigList" @handleSelectionChange="handleSelectionChange"
			@handleExpandChange="handleExpandChange"/>

		<pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize" @pagination="getList" />
			
			<!-- <payment-config-drawer ref="paymentConfigRef" :configId="equipment.sn" /> -->
	</div>
</template>

<script setup>
	// import paymentDetailsTable from "@/views/components/paymentDetailsTable/index.vue";
	import paymentConfigDrawer from "@/views/desktop/components/paymentConfigDrawer.vue";
	import paymentConfigTable from "@/views/components/paymentConfigTable/index.vue";
	import {
		listPaymentConfig,
	} from "@/api/paymentConfig/paymentConfig";

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

	const {
		proxy
	} = getCurrentInstance();

	const {
		com_payment_type,
		com_payment_state
	} = proxy.useDict('com_payment_type', 'com_payment_state');


	const loading = ref(true);
	const total = ref(0);
	const showSearch = ref(true);

	const queryParams = ref({
		pageNum: 1,
		pageSize: 10,
		configId: null,
	});
	const paymentConfigList = ref([]);
	const paymentDetailsList = ref([]);

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

	/** 搜索按钮操作 */
	function handleQuery() {
		queryParams.value.pageNum = 1;
		getList();
	}

	/** 重置按钮操作 */
	function resetQuery() {
		proxy.resetForm("queryRef");
		handleQuery();
	}

	function handleExpandChange(row) {
		console.log(row)
		listPaymentDetails({
			pageNum: 1,
			pageSize: 9999,
			orderNumer: row.orderNumer,
		}).then(response => {
			paymentDetailsList.value = response.rows;
		});
	}
	
	/** 详情按钮操作 */
	function handleView(row){
		
	}


	getList();
</script>

<style>
</style>
