<template>
	<view class="overviewCard">
		<view class="field currentCommission">
			<text>{{ $t('partner.currentCommission') }}</text>
			<view class="valueWrapper">
				<text class="value">{{ ibFund.amount ?? '-' }}</text>
				<text>{{ ' USD' }}</text>
			</view>
		</view>
		<view class="field">
			<text>{{ $t('partner.statCommission') }}</text>
			<text>{{ ibFund.totalAmount ?? '-' }} USD</text>
		</view>
		<view class="field">
			<text>{{ $t('partner.withdrawn') }}</text>
			<text>{{ ibFund.fundOut ?? '-' }} USD</text>
		</view>
		<view class="field">
			<text>{{ $t('partner.transferred') }}</text>
			<text>{{ ibFund.fundTransfer ?? '-' }} USD</text>
		</view>
		<view class="overviewCardBtns">
			<view class="btn primaryButton" @click="navigateTo('/pages/capital/ibWithdraw/index')">
				{{ $t('home.goldout') }}
			</view>
			<view class="btn secondaryButton" @click="navigateTo('/pages/capital/ibTransfer/index')">
				{{ $t('home.transfer') }}
			</view>
		</view>
	</view>
	<view class="filter">
		<uni-data-checkbox v-model="daterangePreset" :localdata="daterangePresets" @change="handlePresetChange" selectedColor="#29BBE4" class="datePreset"></uni-data-checkbox>
		<uni-datetime-picker type="daterange" v-model="timeRange" @change="handleDaterangeChange" />
	</view>
	<view class="overviewContent">
		<view v-for="item in overviewList" :key="item.label" class="overviewItem" @click="() => showChart(item)">
			<view class="label">
				{{ item.label }}
			</view>
			<view class="value">
				{{ overviewData[item.dataIndex]?.toFixed(2) }}
			</view>
		</view>
	</view>
</template>

<script>
import { useUserStore } from '@/stores/user';
import { getPhaseSummarizing } from '@/services/partner/overview.ts';
import dayjs from 'dayjs';
export default {
	name: 'Overview',
	props: {
		visible: {
			type: Boolean,
			required: true,
			default: false
		}
	},
	data() {
		return {
			ibFund: {
				totalAmount: 123.123,
				amount: 290.123,
				fundOut: 123.0,
				fundTransfer: 0.0
			},
			overviewList: [
				{ label: this.$t('partner.overview.statPL'), dataIndex: 'my_yk', type: 8, clickable: true },
				{ label: this.$t('partner.overview.statEquity'), dataIndex: 'my_jz', type: false, clickable: false },
				{ label: this.$t('partner.overview.statEquity_fen'), dataIndex: 'mf_jz', type: false, clickable: false },
				{ label: this.$t('partner.overview.IBCommission'), dataIndex: 'yj', type: 2, clickable: true },
				{ label: this.$t('partner.overview.statDeposit'), dataIndex: 'rj', type: 3, clickable: true },
				{ label: this.$t('partner.overview.statWithdraw'), dataIndex: 'mt_cj', type: 4, clickable: true },
				{ label: this.$t('partner.overview.statIBWithdraw'), dataIndex: 'yj_cj', type: 9, clickable: true },
				{ label: this.$t('partner.overview.volume'), dataIndex: 'my_jyl', type: 6, clickable: true },
				{ label: this.$t('partner.overview.volume_cent'), dataIndex: 'mf_jyl', type: 7, clickable: true },
				{ label: this.$t('partner.overview.statPL_cent'), dataIndex: 'mf_yk', type: 1, clickable: true }
			],
			overviewData: {},
			timeRange: undefined,
			daterangePreset: undefined,
			daterangePresets: [
				{ text: this.$t('common.yesterday'), value: 1 },
				{ text: this.$t('common.threeDays'), value: 2 },
				{ text: this.$t('common.7Days'), value: 6 },
				{ text: this.$t('common.30Days'), value: 29 }
			]
		};
	},
	methods: {
		async getOverviewData() {
			let params = {};
			if (this.timeRange) {
				params.time_start = this.timeRange[0];
				params.time_end = this.timeRange[1];
			}
			const res = await getPhaseSummarizing(params);
			if (res && res.code === 0) {
				this.overviewData = res.data;
			}
		},
		handleDaterangeChange() {
			this.daterangePreset = undefined;
			this.getOverviewData();
		},
		handlePresetChange(e) {
			this.daterangePreset = e.detail.value;
			this.timeRange = [dayjs().subtract(Number(e.detail.value), 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')];
			this.getOverviewData();
		},
		showChart(overview) {
			if (!overview.clickable) return;
			this.navigateTo('/pages/partner/overviewChart/index', {
				label: overview.label,
				type: overview.type,
				time_start: this.timeRange[0],
				time_end: this.timeRange[1]
			});
		},
		navigateTo(target, params) {
			if (target) {
				uni.navigateTo({
					url: `${target}${params ? `?params=${JSON.stringify(params)}` : ''}`
				});
			}
		}
	},
	created() {
		const userStore = useUserStore();
		this.ibFund = userStore.ibFund;
		this.handlePresetChange({ detail: { value: 6 } });
		this.getOverviewData();
	}
};
</script>

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