<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row class="ml10" v-show="showSearch">
				<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList" ref="queryRef">
					<el-form-item label="商户名称" prop="merchantName">
						<el-input placeholder="请输入商户名称" style="max-width: 180px" v-model="state.queryForm.merchantName" clearable />
					</el-form-item>
					<el-form-item label="银行账号" prop="bankAccount">
						<el-input placeholder="请输入银行账号" style="max-width: 180px" v-model="state.queryForm.bankAccount" clearable />
					</el-form-item>
					<el-form-item label="真实姓名" prop="realName">
						<el-input placeholder="请输入真实姓名" style="max-width: 180px" v-model="state.queryForm.realName" clearable />
					</el-form-item>
					<el-form-item label="审核状态" prop="auditStatus">
						<el-select v-model="state.queryForm.auditStatus" placeholder="请选择审核状态" style="max-width: 180px" clearable>
							<el-option label="待审核" :value="0" />
							<el-option label="通过" :value="1" />
							<el-option label="拒绝" :value="2" />
						</el-select>
					</el-form-item>
					<el-form-item label="申请时间" prop="dateRange">
						<el-date-picker
							v-model="dateRange"
							type="datetimerange"
							range-separator="至"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							value-format="YYYY-MM-DD HH:mm:ss"
							style="max-width: 360px"
							@change="handleDateChange"
						/>
					</el-form-item>
					<el-form-item>
						<el-button @click="getDataList" icon="search" type="primary">查询</el-button>
						<el-button @click="resetQuery" icon="Refresh">重置</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-row>
				<div class="mb8" style="width: 100%">
					<right-toolbar
						@queryTable="getDataList"
						class="ml10"
						style="float: right; margin-right: 20px"
						v-model:showSearch="showSearch"
					></right-toolbar>
				</div>
			</el-row>

			<el-table
				:data="state.dataList"
				@selection-change="handleSelectionChange"
				@sort-change="sortChangeHandle"
				style="width: 100%"
				v-loading="state.loading"
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
			>
				<el-table-column align="center" type="selection" width="40" />
				<el-table-column label="商户名称" prop="merchantName" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.merchantName || '--' }}
					</template>
				</el-table-column>
				<el-table-column label="提现金额" prop="amount" show-overflow-tooltip>
					<template #default="scope">
						<span style="color: #f56c6c; font-weight: bold">¥{{ scope.row.amount ? scope.row.amount.toFixed(2) : '0.00' }}</span>
					</template>
				</el-table-column>
				<el-table-column label="提现类型" prop="type" show-overflow-tooltip>
					<template #default="scope">
						<el-tag :type="scope.row.type === 1 ? 'primary' : 'success'" size="small">
							{{ scope.row.type === 1 ? '银行卡' : 'U' }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="银行名称" prop="bankName" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.bankName || '--' }}
					</template>
				</el-table-column>
				<el-table-column label="银行账号" prop="bankAccount" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.bankAccount || '--' }}
					</template>
				</el-table-column>
				<el-table-column label="真实姓名" prop="realName" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.realName || '--' }}
					</template>
				</el-table-column>
				<el-table-column label="申请时间" prop="applyTime" show-overflow-tooltip width="180">
					<template #default="scope">
						{{ scope.row.applyTime || '--' }}
					</template>
				</el-table-column>
				<el-table-column label="审核状态" prop="auditStatus" show-overflow-tooltip>
					<template #default="scope">
						<el-tag :type="auditStatusMap[scope.row.auditStatus]?.type || 'info'" size="small">
							{{ auditStatusMap[scope.row.auditStatus]?.label || '--' }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="拒绝原因" prop="failReason" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.failReason || '--' }}
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="createdTime" show-overflow-tooltip width="180">
					<template #default="scope">
						{{ scope.row.createdTime || '--' }}
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" width="150">
					<template #default="scope">
						<el-button
							v-if="scope.row.auditStatus === 0"
							icon="Check"
							@click="handleAudit(scope.row)"
							text
							type="primary"
							size="small"
						>
							审核
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination" />
		</div>

		<!-- 审核弹窗 -->
		<audit-dialog ref="auditDialogRef" @refresh="getDataList" />
	</div>
</template>

<script lang="ts" name="settlementMerchantWithdraw" setup>
import { BasicTableProps, useTable } from '/@/hooks/table';
import { fetchMerchantWithdrawList } from '/@/api/order';

// 引入组件
const AuditDialog = defineAsyncComponent(() => import('./audit.vue'));

// 审核状态映射
const auditStatusMap: Record<number, { label: string; type: any }> = {
	0: { label: '待审核', type: 'warning' },
	1: { label: '通过', type: 'success' },
	2: { label: '拒绝', type: 'danger' },
};


// 定义变量内容
const auditDialogRef = ref();
const queryRef = ref();
const showSearch = ref(true);
const selectObjs = ref([]);
const multiple = ref(true);
const dateRange = ref<any>([]);

// 定义表格查询、变更
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		merchantName: '',
		bankAccount: '',
		realName: '',
		auditStatus: undefined,
		startTime: '',
		endTime: '',
	},
	pageList: fetchMerchantWithdrawList,
	descs: ['created_time'],
});

const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, tableStyle } = useTable(state);

// 处理日期范围变化
const handleDateChange = (val: any) => {
	if (val && val.length === 2) {
		state.queryForm.startTime = val[0];
		state.queryForm.endTime = val[1];
	} else {
		state.queryForm.startTime = '';
		state.queryForm.endTime = '';
	}
};

// 重置查询
const resetQuery = () => {
	queryRef.value?.resetFields();
	dateRange.value = [];
	state.queryForm.startTime = '';
	state.queryForm.endTime = '';
	getDataList();
};

// 多选事件
const handleSelectionChange = (objs: any) => {
	selectObjs.value = objs.map((val: any) => val.id);
	multiple.value = !objs.length;
};

// 审核
const handleAudit = (row: any) => {
	auditDialogRef.value.openDialog(row);
};
</script>

<style scoped></style>
