<script setup>
import {$t} from "@vben/locales";
import {Avatar, Card, Input, InputGroup, Select, SelectOption, Tag} from "ant-design-vue";
import {Page} from "@vben/common-ui";
import {reactive, ref} from "vue";
import dayjs from "dayjs";
import {useVbenForm} from "#/adapter/form.js";
import {getTransferLogList} from "#/api/player/transfer_log.js";
import {useVbenVxeGrid} from "#/adapter/vxe-table.js";


// 列表筛选
const filterData = reactive({
	'search_type':"uname",
});
const disabledDate = (current) => {
	return current && current > dayjs().endOf('day');
};
const [QueryForm, formApi] = useVbenForm({
	// 默认展开
	collapsed: false,
	// 所有表单项共用，可单独在表单内覆盖
	commonConfig: {
		// 所有表单项
		componentProps: {
			class: 'w-full',
		},
	},
	// 提交函数
	handleSubmit: onSubmit,
	handleReset: onReset,
	// 垂直布局，label和input在不同行，值为vertical
	// 水平布局，label和input在同一行
	layout: 'horizontal',
	schema: [
		{
			// 组件需要在 #/adapter.ts内注册，并加上类型
			component: 'Input',
			// 对应组件的参数
			// 字段名
			fieldName: 'search_text',
			// 界面显示的label
		},
		{
			component: 'Select',
			defaultValue:"",
			componentProps: {
				// allowClear: true,
				filterOption: true,
				name:'status',
				options: [
					{label: $t('common.all'), value: ""},
					{label: $t('common.success'), value: "1"},
					{label: $t('common.error'), value: "0"},
					{label: $t('common.warning'), value: "2"},
				],
				placeholder: $t('common.placeholder_select'),
				// showSearch: true,
			},
			fieldName: 'status',
			label: $t('player_data.search.status'),
		},
		{
			component: 'Input',
			fieldName: 'tx_id',
			label: $t('player_data.search.tx_id'),
			componentProps: {
				allowClear: true,
			}
		},
		{
			label:$t("common.range_time"),
			component: 'RangePicker',
			defaultValue: [dayjs(), dayjs()],
			fieldName: 'range_time',
			componentProps: {
				disabledDate: disabledDate,
				showTime:{
					hideDisabledOptions: true,
					defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')],
				}
			}
		},
	],
	// 是否可展开
	submitButtonOptions: {
		content: '查询',
	},
	wrapperClass: 'grid-cols-1 md:grid-cols-3',
});
function onSubmit(values) {
	gridApi.reload();
	// message.success({
	// 	content: `form values: ${JSON.stringify(values)}`,
	// });
}
function onReset() {
	formApi.resetForm();
	filterData.search_type = 'uname';
	gridApi.reload();
}


// 列表
const gridOptions = {
	border: true,
	stripe: true,
	scrollbarConfig: {
		x: {
			visible: 'visible'
		},
		y: {
			visible: 'auto'
		}
	},
	columns: [
		{ field: 'create_time', title: $t('player_data.gameRecords.create_time'), width: 200, titlePrefix: {'content':$t('player_data.gameRecords.tips.create_time')} },
		{ field: 'user_id', title: $t('player_data.gameRecords.user_id'), width: 120, titlePrefix: {'content':$t('player_data.gameRecords.tips.user_id')}},
		{ field: 'uname', title: $t('player_data.gameRecords.uname'), width: 150, titlePrefix: {'content':$t('player_data.gameRecords.tips.uname')}},
		{ field: 'nickname', title: $t('player_data.gameRecords.nickname'), width: 180, titlePrefix: {'content':$t('player_data.gameRecords.tips.nickname')}},
		{ field: 'tx_id', title: $t('player_data.transferLog.tx_id'), width:200},
		{ field: 'amount', title: $t('player_data.transferLog.amount'), width:200},
		{ field: 'prev_amount', title: $t('player_data.transferLog.prev_amount'), width: 160},
		{ field: 'next_amount', title: $t('player_data.transferLog.next_amount'), width: 160},
		{ field: 'status', title: $t('player_data.fundsChange.order_status'), width: 140, slots: {'default':'status'}},
		{ field: 'ip', title: "IP", width: 140},
	],
	keepSource: true,
	proxyConfig: {
		ajax: {
			query: async ({ page }) => {
				let form = {
					page: page.currentPage,
					limit: page.pageSize,
					compress: 0
				};
				const search = await formApi.getValues();
				const keysList = ['game_id','search_text', 'status', 'tx_id'];
				keysList.forEach(key => {
					if(search[key]){
						form[key] = search[key];
					}
				})
				if(search.range_time) {
					form['start_time'] = search.range_time[0].format('YYYY-MM-DD');
					form['end_time'] = search.range_time[1].format('YYYY-MM-DD');
				}
				const list = await getTransferLogList(form);
				return {
					total: list.total,
					items: list.list
				}
			},
		},
	},
	rowConfig: {
		isHover: true,
	},
	toolbarConfig: {
		custom: true,
		export: true,
		// import: true,
		refresh: true,
		zoom: true,
	},
};
const [Grid, gridApi] = useVbenVxeGrid({
	gridOptions,
});

</script>

<template>
	<Page>
		<Card class="mb-5">
			<QueryForm>
				<template #search_text="slotProps">
					<Input-Group compact>
						<Select name="search_type" style="width: 30%" v-model:value="filterData.search_type">
							<Select-Option value="uname">{{$t('player_data.search.uname')}}</Select-Option>
							<Select-Option value="nickname">{{$t('player_data.search.nickname')}}</Select-Option>
							<Select-Option value="user_id">{{$t('player_data.search.user_id')}}</Select-Option>
						</Select>
						<Input name="search_text" allowClear :placeholder="$t('player_data.placeholder') + '' + $t('player_data.search[\''+filterData.search_type+'\']')" v-bind="slotProps" style="width:70%"></Input>
					</Input-Group>
				</template>
			</QueryForm>
		</Card>
		<Card>
			<div class="vp-raw w-full">
				<Grid>
					<template #status="{ row }">
						<Tag v-if="row.status == 1" color="green">{{$t('common.success')}}</Tag>
						<Tag v-if="row.status == 0" color="red">{{$t('common.error')}}</Tag>
						<Tag v-if="row.status == 2" color="blue">{{$t('common.warning')}}</Tag>
					</template>
				</Grid>
			</div>
		</Card>
	</Page>
</template>

<style scoped>

</style>