<script setup>
import {Input, InputGroup, message, Select, SelectOption} from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { Page, useVbenModal } from '@vben/common-ui';
import {Button, Card, Tag, Avatar, Switch} from "ant-design-vue";
import {$t} from "@vben/locales";
import {reactive, ref} from "vue";
import dayjs from "dayjs";
import {getGameMinList} from "#/api/game_control/game_config.js";
import {useVbenVxeGrid} from "#/adapter/vxe-table.js";
import {getGameRecordList} from "#/api/player/game_records.js";

// 列表筛选
const filterData = reactive({
	'search_type':"uname",
});
const filterGameList = ref([]);
getGameMinList().then((data) => {
	data.forEach((game) => {
		filterGameList.value.push({
			'label': `【${game.game_id}】${game.title}`,
			'value': game.game_id,
		})
	})
})
const disabledDate = (current) => {
	// Can not select days before today and today
	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: [

		{
			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')],
				}
			}
		},
		{
			component: 'Select',
			componentProps: {
				allowClear: true,
				filterOption: true,
				name:'game_id',
				options: filterGameList,
				placeholder: $t('common.placeholder_select'),
				showSearch: true,
			},
			fieldName: 'game_id',
			label: $t('game_control.game'),
		},
		{
			// 组件需要在 #/adapter.ts内注册，并加上类型
			component: 'Input',
			// 对应组件的参数
			// 字段名
			fieldName: 'search_text',
			// 界面显示的label
		},
		{
			component: 'Select',
			defaultValue:"",
			componentProps: {
				// allowClear: true,
				filterOption: true,
				name:'bet_game_play_type',
				options: [
					{label: $t('common.all'), value: ""},
					{label: $t('player_data.gameRecords.eliminate'), value: "1"},
					{label: $t('player_data.gameRecords.free_rotate'), value: "2"},
					{label: $t('player_data.gameRecords.re_turn'), value: "3"},
					{label: $t('player_data.gameRecords.high_gm'), value: "4"},
				],
				placeholder: $t('common.placeholder_select'),
				// showSearch: true,
			},
			fieldName: 'bet_game_play_type',
			label: $t('common.game_method'),
		},
		{
			// 组件需要在 #/adapter.ts内注册，并加上类型
			component: 'Input',
			// 对应组件的参数
			// 字段名
			fieldName: 'third_round_id',
			label: $t('player_data.gameRecords.third_round_id'),
			componentProps: {
				allowClear: true,
			}
			// 界面显示的label
		},
	],
	// 是否可展开
	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'
		}
	},
	// checkboxConfig: {
	// 	highlight: true,
	// },
	columns: [
		{ fixed: 'left',  title: '序号', type: 'seq', width: 50},
		{ fixed: 'left', field: 'third_gid', title: $t('player_data.gameRecords.third_gid'), width: 230, titlePrefix: {'content':$t('player_data.gameRecords.tips.third_gid')}, treeNode: true  },
		{ field: 'uuid', title:  $t('player_data.gameRecords.uuid'), width: 230},
		{ field: 'create_time', title: $t('player_data.gameRecords.create_time'), width: 200, titlePrefix: {'content':$t('player_data.gameRecords.tips.create_time')} },
		{ field: 'third_round_id', title: $t('player_data.gameRecords.third_round_id'), width: 230, titlePrefix: {'content':$t('player_data.gameRecords.tips.third_round_id')} },
		{ field: 'nickname', title: $t('player_data.gameRecords.nickname'), width: 150, titlePrefix: {'content':$t('player_data.gameRecords.tips.nickname')}},
		{ field: 'user_id', title: $t('player_data.gameRecords.user_id'), width: 100, 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')}},
		{ align: 'left', field: 'game_title', title: $t('player_data.gameRecords.game_title'), width: 200, slots: {'default':'game_title'}},
		{ field: 'bet_game_play_type', title: $t('player_data.gameRecords.game_play'), width: 140, titlePrefix: {'content':$t('player_data.gameRecords.tips.game_play')}},
		{ field: 'control_state', title: $t('player_data.gameRecords.control_state'), width: 140, titlePrefix: {'content':$t('player_data.gameRecords.tips.control_state')}},
		{ field: 'trigger_mode', title: $t('player_data.gameRecords.trigger_mode'), width: 140, titlePrefix: {'content':$t('player_data.gameRecords.tips.trigger_mode')}},
		{ field: 'rtp', title: $t('player_data.gameRecords.rtp'), width: 140, titlePrefix: {'content':$t('player_data.gameRecords.tips.rtp')}},
		{ field: 'bet', title: $t('player_data.gameRecords.bet_amount'), width: 140, titlePrefix: {'content':$t('player_data.gameRecords.tips.bet_amount')}, slots: {'default':'bet_amount'}},
		{ field: 'should_bet_result', title: $t('player_data.gameRecords.should_bet_result'), width: 140},
		{ field: 'win_amount', title: $t('player_data.gameRecords.win_amount'), width: 140, titlePrefix: {'content':$t('player_data.gameRecords.tips.win_amount')}, slots: {'default':'win_amount'}},
		{ field: 'prev_amount', title: $t('player_data.gameRecords.prev_amount'), width: 140, titlePrefix: {'content':$t('player_data.gameRecords.tips.prev_amount')}},
		{ field: 'next_amount', title: $t('player_data.gameRecords.next_amount'), width: 140, titlePrefix: {'content':$t('player_data.gameRecords.tips.next_amount')}},
		{ field: 'total_win_amount', title: $t('player_data.gameRecords.total_win_amount'), width: 140, titlePrefix: {'content':$t('player_data.gameRecords.tips.total_win_amount')}, slots: {'default':'total_win_amount'}},
		{ field: 'balance_amount', title: $t('player_data.gameRecords.balance_amount'), width: 140, titlePrefix: {'content':$t('player_data.gameRecords.tips.balance_amount')}},
		{ fixed: 'right', align:"left", title: $t('game_control.game_list.action'), width: 220, slots: {default:'action'}},
		// { field: 'next_amount', title: $t('player_data.playlist.reg_ip'), width: 140},
		// { field: 'releaseDate', formatter: 'formatDateTime', title: 'DateTime' },
	],
	exportConfig: {},
	// height: 'auto', // 如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素，否则会出现高度闪动问题
	keepSource: true,
	treeConfig: {
		transform: true, // 指定表格为树形表格
		parentField: 'third_gid', // 父节点字段名
		rowField: 'third_round_id', // 行数据字段名
	},
	proxyConfig: {
		ajax: {
			query: async ({ page }) => {
				let form = {
					page: page.currentPage,
					limit: page.pageSize,
					compress: 0
				};
				const search = await formApi.getValues();
				if(search.game_id) {
					form.game_id = search.game_id;
				}
				if(search.bet_game_play_type) {
					form.bet_game_play_type = search.bet_game_play_type;
				}
				if(search.third_round_id) {
					form.third_round_id = search.third_round_id;
				}
				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');
				}
				if(search.search_text) {
					form[filterData['search_type']] = search.search_text;
				}
				const list = await getGameRecordList(form);
				// const third_gid_id = {};
				// list.list.forEach((item) => {
				// 	if(item.action_type == 1) {
				// 		third_gid_id[item.third_gid] = item.id;
				// 	}
				// })
				// list.list.forEach((item) => {
				// 	if(item.action_type != 1) {
				// 		item['parent_id'] = third_gid_id[item.third_gid];
				// 	}
				// })
				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 #action="{ row }">
						<Button type="link" :href="row.view_layout_url" target="_blank">查看布局</Button>
					</template>
					<template #bet_amount="{ row }">
						<span style="color:red">{{row.bet}}</span>
					</template>
					<template #win_amount="{ row }">
						<span style="color: green" v-if="row.win_amount >= 0">{{row.win_amount}}</span>
						<span style="color: red" v-else>{{row.win_amount}}</span>
					</template>
					<template #total_win_amount="{ row }">
						<span style="color: green" v-if="row.total_win_amount >= 0">{{row.total_win_amount}}</span>
						<span style="color: red" v-else>{{row.total_win_amount}}</span>
					</template>
					<template #game_title="{ row }">
						<div>
							<Tag  color="blue" size="large">{{row.game_type_text}}</Tag>
							<Avatar shape="square" :src="row.game_image_url"></Avatar>
							<span style="margin-left: .5rem;display: inline-block;">{{row.game_title}}</span>
						</div>
					</template>
				</Grid>
			</div>
		</Card>
	</Page>
</template>

<style scoped>
.ant-input-group.ant-input-group-compact>*:not(:last-child) {
	border-inline-end-width: 0;
}
</style>