<script setup>
import { Page, useVbenModal,confirm } from '@vben/common-ui';
import {Button, Card, Tag, Avatar, Switch} from "ant-design-vue";
import { useVbenForm } from '#/adapter/form';
import {$t} from "@vben/locales";
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {getGameList, getGameMinList, updateGameStatus} from "#/api/game_control/game_config.js";
import {ref, toRaw} from "vue";

const filterGameList = ref([]);
getGameMinList().then((data) => {
	data.forEach((game) => {
		filterGameList.value.push({
			'label': `【${game.game_id}】${game.title}`,
			'value': game.game_id,
		})
	})
})


const [QueryForm, formApi] = useVbenForm({
	// 默认展开
	collapsed: false,
	// 所有表单项共用，可单独在表单内覆盖
	commonConfig: {
		// 所有表单项
		componentProps: {
			class: 'w-full',
		},
	},
	// 提交函数
	handleSubmit: onSubmit,
	handleReset: onReset,
	// 垂直布局，label和input在不同行，值为vertical
	// 水平布局，label和input在同一行
	layout: 'horizontal',
	schema: [
		{
			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'),
		},
	],
	// 是否可展开
	// showCollapseButton: true,
	submitButtonOptions: {
		content: '查询',
	},
	wrapperClass: 'grid-cols-1 md:grid-cols-2',
});
function onSubmit(values) {
	gridApi.reload();
}
function onReset() {
	formApi.resetForm();
	gridApi.reload();
}

const gridOptions = {
	border: true,
	stripe: true,
	checkboxConfig: {
		highlight: true,
		// labelField: 'name',
	},
	columns: [
		{ fixed: 'left',  title: '序号', type: 'seq', width: 50 },
		{ align: 'left', field: 'title', title: $t('game_control.game_list.game_title'), width: 250, slots: {default:'title'} },
		{ field: 'title_en', title:  $t('game_control.game_list.game_en_title'), width: 200},
		{ field: 'game_id', title: $t('game_control.game_list.game_id'), width: 140 },
		{ field: 'rtp', title: $t('game_control.game_list.game_rtp'), width: 140, slots: {default:'rtp'}},
		{ field: 'rtp_type_text', title: $t('game_control.game_list.game_rtp_type'), width: 140},
		{ field: 'free_game_status', title: $t('game_control.game_list.buy_free'), width: 150},
		{ field: 'max_multiple_count', title: $t('game_control.game_list.max_gm'), width: 150},
		{ field: 'deposit_list', title: $t('game_control.game_list.bet_amount'), width: 120},
		{ field: 'status_text', title: $t('game_control.game_list.game_status'), width: 120, slots: {default:'status'}},
		{ fixed: 'right', title: $t('game_control.game_list.action'), width: 220, slots: {default:'action'}},
	],
	exportConfig: {},
	// height: 'auto', // 如果设置为 auto，则必须确保存在父节点且不允许存在相邻元素，否则会出现高度闪动问题
	keepSource: true,
	proxyConfig: {
		ajax: {
			query: async ({ page }) => {
				let form = {
					// ...filterData,
					page: page.currentPage,
					limit: page.pageSize,
				};
				const filterData = await formApi.getValues();
				if(filterData.game_id) {
					form.game_id = filterData.game_id;
				}
				const list = await getGameList(form);
				list.list.forEach(item => {
					item.status = item.status != 1;
				})
				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 './game_info.vue';
const [Modal, modalApi] = useVbenModal({
	// 连接抽离的组件
	connectedComponent: ExtraModal,
	class:'w-[75%]',
	onClosed: function () {
		const _data = modalApi.getData();
		if(_data.is_reload){
			gridApi.reload();
		}
	}
});
const gameInfo = (row) => {
	modalApi.setData({
		game_id: row.id,
		is_view: true,
	}).open();
	modalApi.setState({
		showConfirmButton: false
	})
}
const gameEdit = (row) => {
	modalApi.setData({
		game_id: row.id,
		is_view: false,
	}).open();
	modalApi.setState({
		showConfirmButton: true
	})
}
const changeStatus = async (row) => {
	confirm({
		title: $t('game_control.game_list.confirm_title', {title: row.title}),
		content: $t('game_control.game_list.confirm_desc'),
		icon: 'warning',
	}).then(async (value) => {
		const status = row.status ? 0 : 1;
		const res = await updateGameStatus({ids: [row.id], status: status});
		await gridApi.reload();
	}).catch(() => {

	})
}

</script>

<template>
	<Page>
		<Card class="mb-5">
			<QueryForm />
		</Card>
		<Card>
			<div class="vp-raw w-full">
				<Grid>
					<template #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.title}}</span>
						</div>
					</template>
					<template #action="{ row }">
						<Button type="link" @click="gameInfo(row)">查看配置</Button>
						<Button type="link" @click="gameEdit(row)">编辑配置</Button>
					</template>
					<template #rtp="{row}">
						{{row.rtp}}%
					</template>
					<template #status="{row}">
						<Switch :checked="row.status" @click="changeStatus(row)"></Switch>
					</template>
				</Grid>
			</div>
		</Card>
		<Modal />
	</Page>
</template>

<style scoped>

</style>