<template>
	<view>
		<NavBar />
<!-- 		<view v-show="loading" style="height: 90vh;width: 750upx;position: absolute;display: flex;align-items: center;justify-content: center;z-index: 99;">
			<Spin style="margin: auto;" />
		</view> -->
		<view class="container">
			<view class="title">
				<PageTitle :title="$t('home.tradeRecord')" />
			</view>
			<ReportTable :title="reportsMap[currentReport].title" :url="reportsMap[currentReport].url" defaultDateRangeKey="date_1">
				<template #customSearch>
					<view class="filterWrapper">
						<uni-data-select
							:localdata="reportOptions"
							@change="handleReportSelectorChange"
							:clear="false"
							v-model="currentReport"
							:placeholder="$t('form.pleaseSelect')"
							:emptyTips="$t('common.empty')"
							class="filterSelector"
						></uni-data-select>
					</view>
				</template>
				<template #operationRender="{ row }">
					<view
						style="color: #4dc0e5"
						v-if="row.status === 0"
						@click="
							() => {
								handleCancel(row);
							}
						"
					>
						{{ $t('common.cancelText') }}
					</view>
				</template>
				<template v-slot="{ showSearchDialog }">
					<view class="filterWrapper">
						<view class="filterButton" @click="showSearchDialog">
							<image src="/static/filter.png" alt="" style="width: 12px; height: 13px" />
							<text class="filterText">{{ $t('common.filter') }}</text>
							<uni-icons type="right" size="20" color="#fff"></uni-icons>
						</view>
					</view>
				</template>
			</ReportTable>
		</view>
	</view>
</template>

<script>
import { useUserStore } from '@/stores/user';
import ReportTable from '@/pages/components/reportTable/index.vue';
import { cancelFundApply } from '@/services/home/home.ts';
import { UserLanguage } from '../../../utils/const';
export default {
	name: '',
	data() {
		return {
			currentReport: 'deposit',
			reportsMap: {
				// mt入金记录
				deposit: {
					title: this.$t('home.goldin'),
					url: '/app/capital/queryMyGoldInList',
					cancelUrl: '/app/capital/goldIn/cancel',
					ib: false
				},
				// mt出金记录
				withdrawal: {
					title: this.$t('home.goldout'),
					url: '/app/capital/queryMyGoldOutList',
					cancelUrl: '/app/capital/goldOut/cancel',
					ib: false
				},
				// mt转账记录
				transfer: {
					title: this.$t('home.transfer'),
					url: '/app/capital/queryMyTransferList',
					cancelUrl: '/app/capital/transfer/cancel',
					ib: false
				},
				// 佣金出金记录
				ibWithdrawal: {
					title: this.$t('ib.dailyFunds.crmGoldOut'),
					url: '/app/capital/queryMyFundOutList',
					cancelUrl: '/app/ibHome/fundOut/cancel',
					ib: true
				},
				// 佣金转账记录
				ibTransfer: {
					title: this.$t('ib.dailyFunds.crmTransfer'),
					url: '/app/capital/queryMyFundTransferList',
					cancelUrl: '/app/ibHome/fundTransfer/cancel',
					ib: true
				}
			},
			loading: false
		};
	},
	methods: {
		handleReportSelectorChange(e) {
			this.currentReport = e;
		},
		async handleCancel(row) {
			uni.showModal({
				content: this.$t('modal.cancel'),
				confirmColor: '#4DC0E5',
				success: async (res) => {
					if (res.confirm) {
						this.loading = true
						const res = await cancelFundApply(this.reportsMap[this.currentReport].cancelUrl, { id: row.id, qcc_language: UserLanguage });
						this.loading = false
						if (res && res.code === 0) {
							this.$cusModal.showModal({
								type: 'message',
								status: 'success',
								contentText: this.$t('common.success.action')
							});
						} else {
							this.$cusModal.showModal({
								type: 'message',
								status: 'warning',
								contentText: res.msg ?? this.$t('common.error.sysError')
							});
						}
					}
				}
			});
		}
	},
	computed: {
		reportOptions() {
			const userStore = useUserStore();
			if (userStore.userInfo.user_type !== 1) {
				return Object.keys(this.reportsMap)
					.filter((key) => !this.reportsMap[key].ib)
					.map((key) => ({
						text: this.reportsMap[key].title,
						value: key
					}));
			}
			return Object.keys(this.reportsMap).map((key) => ({
				text: this.reportsMap[key].title,
				value: key
			}));
		}
	},
	onLoad(params) {
		if (params.type) {
			this.currentReport = Object.keys(this.reportsMap).includes(params.type) ? params.type : 'deposit';
		}
	},
	components: {
		ReportTable
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
