<template>
	<NavBar />
	<view>
		<ReportTable :title="reportList[currentReport].title" :url="reportList[currentReport].url" :columns="reportList[currentReport].columns">
			<template v-slot="{ showSearchDialog }">
				<view class="filterWrapper">
					<uni-data-select
						:localdata="reportOptions"
						@change="handleReportSelectorChange"
						v-model="currentReport"
						placeholder="请选择"
						class="filterSelector"
					></uni-data-select>
					<view class="filterButton" @click="showSearchDialog">
						<image src="/static/filter.png" alt="" style="width: 12px; height: 13px" />
						<text class="filterText">筛选</text>
						<uni-icons type="right" size="20" color="#fff"></uni-icons>
					</view>
				</view>
			</template>
		</ReportTable>
	</view>
</template>

<script lang="ts">
import ReportTable from '@/pages/components/reportTable/index.vue';
export default {
	data() {
		return {
			currentReport: 'deposit',
			reportList: {
				// 入金报表
				deposit: {
					title: this.$t('report.goldIn'),
					url: '/app/report/getReport16'
				},
				// 出金报表
				withdrawal: {
					title: this.$t('report.goldOut'),
					url: '/app/report/getReport17'
				}
			}
		};
	},
	computed: {
		reportOptions() {
			return Object.keys(this.reportList).map((key) => ({
				text: this.reportList[key].title,
				value: key
			}));
		}
	},
	methods: {
		handleReportSelectorChange(e) {
			this.currentReport = e;
		}
	},
	components: {
		ReportTable
	}
};
</script>

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