<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="realName">
						<el-input placeholder="请输入真实姓名" style="max-width: 180px" v-model="state.queryForm.realName" 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="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>
						<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 class="amount-value">¥{{ scope.row.amount ? scope.row.amount.toFixed(2) : '0.00' }}</span>
					</template>
				</el-table-column>
				<el-table-column label="提现类型" prop="type" show-overflow-tooltip align="center">
					<template #default="scope">
						{{ typeMap[scope.row.type] || '--' }}
					</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="auditStatus" show-overflow-tooltip align="center">
					<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="applyTime" show-overflow-tooltip width="180">
					<template #default="scope">
						{{ scope.row.applyTime || '--' }}
					</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>
			<pagination @current-change="currentChangeHandle" @size-change="sizeChangeHandle" v-bind="state.pagination" />
		</div>
	</div>
</template>

<script lang="ts" name="settlementRecord" setup>
import { BasicTableProps, useTable } from '/@/hooks/table';
import { fetchWithdrawList } from '/@/api/settlement';

// 提现类型映射
const typeMap: Record<number, string> = {
	1: '银行卡',
	2: 'USDT',
};

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

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

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

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

// 重置查询
const resetQuery = () => {
	queryRef.value?.resetFields();
	getDataList();
};

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

<style scoped lang="scss">
.amount-value {
	font-size: 14px;
	font-weight: bold;
	color: #f56c6c;
}
</style>
