<script setup>
import {Card,Button,Form,FormItem,Input,Space,Select,SelectOption,InputGroup, RangePicker, Row, Col, 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";


// 列表筛选
let filterData = {
	page: 1,
	limit: 10,
	// login_time_start: "",//dayjs().format('YYYY-MM-DD'),
	// login_time_end: "",//dayjs().format('YYYY-MM-DD')
}
const disabledDate = (current) => {
	// Can not select days before today and today
	return current && current > dayjs().endOf('day');
};


const gridOptions = {
	border: true,
	stripe: true,
	checkboxConfig: {
		highlight: true,
		// labelField: 'name',
	},
	columns: [
		{ fixed: 'left',  title: '序号', type: 'seq', width: 50 },
		{ field: 'user_id', title: $t('playerdata.playlist.user_id'), width: 100 },
		{ field: 'uname', title:  $t('playerdata.playlist.uname'), width: 120, slots: {default:'uname'}},
		{ field: 'nickname', title: $t('playerdata.playlist.nickname'), width: 140 },
		{ field: 'status_text', title: $t('playerdata.playlist.status'), width: 100, slots: {default:'status'} },
		{ field: 'today_win_amount', title: $t('playerdata.playlist.today_win'), width: 100, slots: { default: 'today-win-amount' },},
		{ field: 'history_win_amount', title: $t('playerdata.playlist.history_win'), width: 100, slots: { default: 'history-win-amount' }},
		{ field: 'today_bet_amount', title: $t('playerdata.playlist.today_bet'), width: 100},
		{ field: 'balance', title: $t('playerdata.playlist.balance'), width: 120},
		{ field: 'adjust_status_text', title: $t('playerdata.playlist.regulation_status'), width: 100, slots: {default: 'adjust-status'}},
		{ field: 'today_login_count', title: $t('playerdata.playlist.today_login_count'), width: 100},
		{ field: 'history_login_count', title: $t('playerdata.playlist.history_login_count'), width: 100},
		{ field: 'login_ip', title: $t('playerdata.playlist.login_ip'), width: 140},
		{ field: 'reg_ip', title: $t('playerdata.playlist.reg_ip'), width: 140},
		// { field: 'releaseDate', formatter: 'formatDateTime', title: 'DateTime' },
	],
	exportConfig: {},
	// height: 'auto', // 如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素，否则会出现高度闪动问题
	keepSource: true,
	proxyConfig: {
		ajax: {
			query: async ({ page }) => {

				let form = toRaw({
					...filterData,
					page: page.currentPage,
					limit: page.pageSize,
				});
				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,
});


const useForm = Form.useForm;

const formData = reactive({
	search_type: 'uname',
	search_text: '',
	ip_type: 'login_ip',
	ip_text: '',
	range_time: [ filterData.login_time_start, filterData.login_time_end ],
});
const { resetFields } = useForm(formData, []);

const onSearchFinish = () => {
	if(!formData['range_time']) {
		formData['range_time'] = [];
	}
	const tempForm = toRaw(formData);
	filterData = {
		page: 1,
		limit: 20,
	}
	if(tempForm['ip_type'] == 'login_ip' || tempForm['ip_type'] == 'reg_ip'){
		filterData[tempForm['ip_type']] = tempForm['ip_text'];
	}

	if(tempForm['search_type'] == 'uname' || tempForm['search_type'] == 'nickname'){
		filterData[tempForm['search_type']] = tempForm['search_text'];
	}else {
		filterData['player_id'] = tempForm['search_text'];
	}
	filterData['login_time_start'] = tempForm.range_time[0] || "";
	filterData['login_time_end'] = tempForm.range_time[1] || "";
	gridApi.reload();
};

const onResetSearch = () => {
	filterData = {
		page: 1,
		limit: 20,
	}
	resetFields();
	gridApi.reload();
}

import ExtraModal from './player_info.vue';
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">
			<Form
				:model="formData"
				name="formRef"
				ref="formRef"
				@finish="onSearchFinish"
			>
				<Row>
					<Col :span="8">
						<Space>
							<Form-Item
							>
								<Input-Group compact>
									<Select name="search_type" v-model:value="formData.search_type"  style="width: 40%">
										<Select-Option value="uname">{{$t('playerdata.search.uname')}}</Select-Option>
										<Select-Option value="nickname">{{$t('playerdata.search.nickname')}}</Select-Option>
										<Select-Option value="user_id">{{$t('playerdata.search.user_id')}}</Select-Option>
									</Select>
									<Input name="search_text" allowClear :placeholder="$t('playerdata.placeholder') + '' + $t('playerdata.search[\''+formData.search_type+'\']')" v-model:value="formData.search_text" style="width:60%"></Input>
								</Input-Group>
							</Form-Item>
						</Space>
					</Col>
					<Col :span="8">

					<Space>
						<Form-Item
						>
							<Input-Group compact>
								<Select name="ip_type" v-model:value="formData.ip_type"  style="width: 40%">
									<Select-Option value="login_ip">{{$t('playerdata.search.login_ip')}}</Select-Option>
									<Select-Option value="reg_ip">{{$t('playerdata.search.reg_ip')}}</Select-Option>
								</Select>
								<Input name="ip_text" allowClear :placeholder="$t('playerdata.placeholder') + '' + $t('playerdata.search[\''+formData.ip_type+'\']')" v-model:value="formData.ip_text" style="width:60%"></Input>
							</Input-Group>
						</Form-Item>
					</Space>
					</Col>
					<Col :span="8">
					<Space>
						<FormItem>
							<Input-Group compact>
								<RangePicker v-model:value="formData.range_time" :disabled-date="disabledDate" value-format="YYYY-MM-DD"></RangePicker>
							</Input-Group>
						</FormItem>
					</Space>
					</Col>
				</Row>
				<Row>
					<Col :span="24" style="text-align: right">
						<Button style="margin: 0 8px" @click="onResetSearch">{{$t('playerdata.search.restart')}}</Button>
						<Button type="primary" html-type="submit">{{$t('playerdata.search.subimt')}}</Button>
					</Col>
				</Row>
			</Form>
		</Card>
		<Card>
			{{playerInfoId}}

			<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>
:where(.css-dev-only-do-not-override-14589v).ant-input-group.ant-input-group-compact>*:not(:last-child) {
	border-inline-end-width: 0;
}
</style>