<script setup>
import {
	Card,
	Button,
	Input,
	Select,
	SelectOption,
	InputGroup,
	RangePicker,
	Tag,
} from 'ant-design-vue';
import { Page, useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { reactive, toRaw, ref } from 'vue';
import dayjs from 'dayjs';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {getPlayerList} from "#/api/player/player_list";



// 列表筛选
const filterData = reactive({
	'search_type':"uname",
	'ip_type':'login_ip'
});
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: [
		{
			// 组件需要在 #/adapter.ts内注册，并加上类型
			component: 'Input',
			// 对应组件的参数
			// 字段名
			fieldName: 'search_text',
			// 界面显示的label
		},
		{
			component: 'Input',
			fieldName: 'ip_text',
		},
		{
			component: 'RangePicker',
			defaultValue: [dayjs(), dayjs()],
			fieldName: 'range_time',
			componentProps: {
				disabledDate: disabledDate,
				showTime:{
					hideDisabledOptions: true,
					defaultValue: [dayjs('00:00:00', 'HH:mm'), dayjs('11:59:59', 'HH:mm:ss')],
				}
			}
		},
	],
	// 是否可展开
	submitButtonOptions: {
		content: '查询',
	},
	wrapperClass: 'grid-cols-1 md:grid-cols-3',
});
function onSubmit(values) {
	gridApi.reload();
}
function onReset() {
	formApi.resetForm();
	filterData.search_type = 'uname';
	filterData.ip_type = 'login_ip';
	gridApi.reload();
}

// 列表
const gridOptions = {
	border: true,
	stripe: true,
	checkboxConfig: {
		highlight: true,
	},
	columns: [
		{ fixed: 'left',  title: '序号', type: 'seq', width: 50 },
		{ field: 'user_id', title: $t('player_data.playlist.user_id'), width: 100 },
		{ field: 'uname', title:  $t('player_data.playlist.uname'), width: 120, slots: {default:'uname'}},
		{ field: 'nickname', title: $t('player_data.playlist.nickname'), width: 140 },
		{ field: 'status_text', title: $t('player_data.playlist.status'), width: 100, slots: {default:'status'} },
		{ field: 'today_win_amount', title: $t('player_data.playlist.today_win'), width: 100, slots: { default: 'today-win-amount' },},
		{ field: 'history_win_amount', title: $t('player_data.playlist.history_win'), width: 100, slots: { default: 'history-win-amount' }},
		{ field: 'today_bet_amount', title: $t('player_data.playlist.today_bet'), width: 100},
		{ field: 'balance', title: $t('player_data.playlist.balance'), width: 120},
		{ field: 'adjust_status_text', title: $t('player_data.playlist.regulation_status'), width: 100, slots: {default: 'adjust-status'}},
		{ field: 'today_login_count', title: $t('player_data.playlist.today_login_count'), width: 100},
		{ field: 'history_login_count', title: $t('player_data.playlist.history_login_count'), width: 100},
		{ field: 'login_ip', title: $t('player_data.playlist.login_ip'), width: 140},
		{ field: 'reg_ip', title: $t('player_data.playlist.reg_ip'), width: 140},
		// { field: 'releaseDate', formatter: 'formatDateTime', title: 'DateTime' },
	],
	exportConfig: {},
	// height: 'auto', // 如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素，否则会出现高度闪动问题
	keepSource: true,
	proxyConfig: {
		ajax: {
			query: async ({ page }) => {
				const search = await formApi.getValues();
				let form = {
					page: page.currentPage,
					limit: page.pageSize,
				};
				if(search.ip_text) {
					form[filterData['ip_type']] = search.ip_text;
				}
				if(search.search_text) {
					form[filterData['search_type']] = search.search_text;
				}
				if(search.range_time) {
					form['login_time_start'] = search.range_time[0].format('YYYY-MM-DD');
					form['login_time_end'] = search.range_time[1].format('YYYY-MM-DD');
				}
				const list = await getPlayerList(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,
});

// 查看玩家详情
import ExtraModal from './player_info.vue';
import {useVbenForm} from "#/adapter/form.js";
const [Modal, modalApi] = useVbenModal({
	// 连接抽离的组件
	connectedComponent: ExtraModal,
	class:'w-[65%]',
	footer: false,
});
const playerInfo = (row) => {
	modalApi.setData({
		uname: row.uname
	}).open();
}



</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>
				<template #ip_text="slotProps">
					<Input-Group compact>
						<Select name="search_type" style="width: 30%" v-model:value="filterData.ip_type">
							<Select-Option value="login_ip">{{$t('player_data.search.login_ip')}}</Select-Option>
							<Select-Option value="reg_ip">{{$t('player_data.search.reg_ip')}}</Select-Option>
						</Select>
						<Input name="ip_text" allowClear :placeholder="$t('player_data.placeholder') + '' + $t('player_data.search[\''+filterData.ip_type+'\']')"  v-bind="slotProps" style="width:70%"></Input>
					</Input-Group>
				</template>
			</QueryForm>
		</Card>
		<Card>
			<div class="vp-raw w-full">
				<Grid>
					<template #uname="{ row }">
						<Button type="link" @click="playerInfo(row)">{{row.uname}}</Button>
					</template>
					<template #status="{ row }">
						<Tag color="green">{{row.status_text}}</Tag>
					</template>
					<template #adjust-status="{ row }">
						<Tag>{{row.adjust_status_text}}</Tag>
					</template>


					<template #today-win-amount="{ row }">
						<span v-if="row.today_win_amount >= 0" style="color:green">{{row.today_win_amount }}</span>
						<span v-else style="color:red">{{row.today_win_amount }}</span>
					</template>
					<template #history-win-amount="{ row }">
						<span v-if="row.history_win_amount >= 0" style="color:green">{{row.history_win_amount }}</span>
						<span v-else style="color:red">{{row.history_win_amount }}</span>
					</template>
				</Grid>
			</div>
		</Card>
		<Modal />
	</Page>
</template>

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