<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="queryForm" @keyup.enter="handleSearch" ref="queryRef">
					<el-form-item :label="$t('payment.channel.channelName')" prop="channelName">
						<el-input
							:placeholder="$t('payment.channel.channelNamePlaceholder')"
							style="max-width: 180px"
							v-model="queryForm.channelName"
							clearable
						/>
					</el-form-item>
					<el-form-item :label="$t('payment.channel.paymentName')" prop="paymentName">
						<el-input
							:placeholder="$t('payment.channel.paymentNamePlaceholder')"
							style="max-width: 180px"
							v-model="queryForm.paymentName"
							clearable
						/>
					</el-form-item>
					<el-form-item :label="$t('payment.channel.paymentType')" prop="paymentType">
						<el-select v-model="queryForm.paymentType" :placeholder="$t('payment.channel.paymentTypePlaceholder')" style="max-width: 180px" clearable>
							<el-option :label="$t('payment.channel.paymentTypePay')" value="PAY" />
							<el-option :label="$t('payment.channel.paymentTypeHarvest')" value="HARVEST" />
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button @click="handleSearch" icon="search" type="primary">{{ $t('common.queryBtn') }}</el-button>
						<el-button @click="resetQuery" icon="Refresh">{{ $t('common.resetBtn') }}</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-row>
				<div class="mb8" style="width: 100%">
					<el-button @click="loadData" class="ml10" icon="Refresh" type="primary">{{ $t('payment.channel.refresh') }}</el-button>
					<right-toolbar
						@queryTable="handleSearch"
						class="ml10"
						style="float: right; margin-right: 20px"
						v-model:showSearch="showSearch"
					></right-toolbar>
				</div>
			</el-row>

			<el-table
				:data="filteredData"
				style="width: 100%"
				v-loading="loading"
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
			>
				<el-table-column :label="$t('payment.channel.channelName')" prop="channelName" show-overflow-tooltip align="center">
					<template #default="scope">
						{{ scope.row.channelName || '--' }}
					</template>
				</el-table-column>
				<el-table-column :label="$t('payment.channel.paymentName')" prop="paymentName" show-overflow-tooltip align="center">
					<template #default="scope">
						{{ scope.row.paymentName || '--' }}
					</template>
				</el-table-column>
				<el-table-column :label="$t('payment.channel.paymentType')" prop="paymentType" show-overflow-tooltip align="center">
					<template #default="scope">
						<el-tag :type="scope.row.paymentType === 'PAY' ? 'warning' : 'info'">
							{{ paymentTypeMap[scope.row.paymentType] || scope.row.paymentType }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column :label="$t('payment.channel.agentFeeType')" prop="afeeType" show-overflow-tooltip align="center">
					<template #default="scope">
						{{ feeTypeMap[scope.row.afeeType] || scope.row.afeeType }}
					</template>
				</el-table-column>
				<el-table-column :label="$t('payment.channel.agentFeeRate')" prop="afeeRate" show-overflow-tooltip align="center">
					<template #default="scope">
						{{ scope.row.afeeRate ? `${scope.row.afeeRate}%` : '0%' }}
					</template>
				</el-table-column>
				<el-table-column :label="$t('payment.channel.agentFeeFixed')" prop="afeeEvery" show-overflow-tooltip align="center">
					<template #default="scope">
						<span class="amount-value">¥{{ scope.row.afeeEvery ? scope.row.afeeEvery.toFixed(2) : '0.00' }}</span>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script lang="ts" name="paymentChannel" setup>
import { getMerchantRate } from '/@/api/payment/channel';
import { useMessage } from '/@/hooks/message';

import { useI18n } from 'vue-i18n';

const { t } = useI18n();

// 支付类别映射
const paymentTypeMap = computed(() => ({
	PAY: t('payment.channel.paymentTypePay'),
	HARVEST: t('payment.channel.paymentTypeHarvest'),
}));

// 手续费类型映射
const feeTypeMap = computed(() => ({
	PERCENTAGE: t('payment.channel.feeTypePercentage'),
	FIXED: t('payment.channel.feeTypeFixed'),
	MIXED: t('payment.channel.feeTypeMixed'),
}));

// 定义变量
const queryRef = ref();
const showSearch = ref(true);
const loading = ref(false);
const tableData = ref<any[]>([]);
const queryForm = ref({
	channelName: '',
	paymentName: '',
	paymentType: '',
});

// 表格样式
const tableStyle = {
	cellStyle: {
		textAlign: 'center',
	},
	headerCellStyle: {
		textAlign: 'center',
		background: '#fafafa',
	},
};

// 前端筛选数据
const filteredData = computed(() => {
	let data = tableData.value;

	// 通道名称筛选
	if (queryForm.value.channelName) {
		data = data.filter((item) => item.channelName?.toLowerCase().includes(queryForm.value.channelName.toLowerCase()));
	}

	// 支付方式筛选
	if (queryForm.value.paymentName) {
		data = data.filter((item) => item.paymentName?.toLowerCase().includes(queryForm.value.paymentName.toLowerCase()));
	}

	// 支付类别筛选
	if (queryForm.value.paymentType) {
		data = data.filter((item) => item.paymentType === queryForm.value.paymentType);
	}

	return data;
});

// 查询
const handleSearch = () => {
	// 前端筛选，无需额外操作
};

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

// 加载数据
const loadData = async () => {
	loading.value = true;
	try {
		const res = await getMerchantRate();
		tableData.value = res.data || [];
	} catch (err: any) {
		useMessage().error(err.msg || t('payment.channel.fetchFailed'));
	} finally {
		loading.value = false;
	}
};

// 初始化加载
onMounted(() => {
	loadData();
});
</script>

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