<script setup>
import {h, reactive, ref, toRaw} from 'vue';
import {useVbenModal} from '@vben/common-ui';
import {getPlayerInfo} from "#/api/player/player_list.js";
import {Form, FormItem, Select, SelectOption, Switch, Input,InputNumber} from "ant-design-vue";
import {getGameInfo, updateGameDetail} from "#/api/game_control/game_config.js";

import { message } from 'ant-design-vue';
const [messageApi, contextHolder] = message.useMessage();


import { createIconifyIcon } from '@vben-core/icons';
const AddIcon = createIconifyIcon('solar:add-circle-outline');
const DeleteIcon = createIconifyIcon('solar:minus-circle-linear');


const game_id = ref("");
const loading = ref(false);
const formDisabled = ref(false);
const betLevel = ref([]);

let form = reactive({});
const [Modal, modalApi] = useVbenModal({
	draggable: true,
	async onOpenChange(isOpen) {
		loading.value = false;
		if (isOpen) {
			loading.value = true;
			const props = modalApi.getData();
			game_id.value = props.game_id;
			formDisabled.value = props.is_view;
			let data = await getGameInfo(game_id.value);
			form = Object.assign(form, data);
			form.terminal_spin = form.terminal_spin == 1;
			loading.value = false;
			for(let i=1;i<=form.bet_max_level;i++) {
				betLevel.value.push(i);
			}
		}
	},
	async onConfirm() {
		let data = {
			id: form.id,
			rtp: form.rtp,
			rtp_type: form.rtp_type,
			terminal_spin: form.terminal_spin ? 1 : 0,
			min_deposit: form.min_deposit,
			max_multiple_count: form.max_multiple_count,
			default_deposit: form.default_deposit,
			default_deposit_level: form.default_deposit_level,
			deposit_list: form.deposit_list
		};
		await modalApi.lock();
		let res = await updateGameDetail(data);
		await modalApi.unlock();
		if(res.state == 1) {
			modalApi.setData({
				'is_reload': true
			});
			messageApi.success(res.message);
			await modalApi.close();
		}else {
			messageApi.error(res.message);
		}
	},
});

const rtpList = ref([70, 75, 80, 85, 90, 92, 93, 94, 95, 96, 96.5, 97, 98, 99, 102]);
const maxGmList = ref([]);
let diff = 50;
for(let gm = 50; gm <= 100000; gm += diff) {
	maxGmList.value.push(gm);
	if(gm >= 1000) {
		diff = 100;
	}
}

// 添加押注金额
const addDepositList = (value, idx) => {
	if(form.deposit_list.length >= 10) {
		return;
	}
	form.deposit_list.splice(idx, 0, value);
	updateDefaultDeposit();
}
const deleteDepositList = (idx) => {
	if(form.deposit_list.length <= 1) {
		return;
	}
	form.deposit_list.splice(idx, 1);
	updateDefaultDeposit();
}
const updateDefaultDeposit = () => {
	form.default_deposit =  form.deposit_list[0];
}
</script>

<template>
	<Modal :loading="loading" v-if="form && form.game_id" :title="form.title">
		<Form :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" :disabled="formDisabled" :colon="false">
			<FormItem label="RTP档位选择">
				<Select style="width:30%;" v-model:value="form.rtp">
					<SelectOption v-for="value in rtpList" :value="value">{{value}}%</SelectOption>
				</Select>
				(设置玩家在游戏内的回报率)
			</FormItem>
			<FormItem label="返奖体验">
				<Select style="width:30%;" v-model:value="form.rtp_type">
					<SelectOption :value="2">仿正版</SelectOption>
					<SelectOption :value="3">AI数值</SelectOption>
				</Select>
			</FormItem>
			<FormItem label="止损止赢功能">
				<Switch v-model:checked="form.terminal_spin" checked-children="开启" un-checked-children="关闭"></Switch>
				(slot的AUTO附加功能，开启后，玩家在游戏内自动旋转时，可以设定条件，达到输赢条件停止自动旋转)
			</FormItem>
			<FormItem label="最低押注限制">
				<InputNumber v-model:value="form.min_deposit" step="0.01" style="width:30%;" :precision="2" />
			</FormItem>
			<FormItem label="返奖倍数限制">
				<Select style="width:30%;" v-model:value="form.max_multiple_count">
					<SelectOption v-for="value in maxGmList" :value="value">{{value}}</SelectOption>
				</Select>
				<div style="padding-top:.5rem;">
					*(玩家在游戏内每局赢奖倍数限制,此倍数与总押注相乘为每局最高可赢取额度;默认值为 100 倍;可设置范围 100 ~ 100000;设置倍数越小，玩家返奖越低)
				</div>
			</FormItem>
			<FormItem label="押注金额展示">
				<div class="text-content" style="padding-top: 0">
					(游戏的单押投注额度展示；游戏的总押注=单押额 * 押注等级（1 ~ 10）* 游戏线数 )
				</div>
				<div class="text-content" style="color:red;">
					(游戏中真实额度，还需除以(游戏内金额显示缩小倍数))
				</div>
				<div class="slots-wrap">
					<div class="wrap-item" v-for="(value, idx) in form.deposit_list">
						<div>
							<InputNumber v-model:value="form.deposit_list[idx]" :step="0.01" :precision="2">
								<template #addonBefore>
									<Button :disabled="form.deposit_list.length <= 1 || formDisabled" @click="deleteDepositList(idx)"><DeleteIcon :style="'color:' + (form.deposit_list.length <= 1 || formDisabled ? 'gray' : 'red')  +';font-size:18px;'" /></Button>
								</template>
								<template #addonAfter>
									<Button  :disabled="form.deposit_list.length >= 10 || formDisabled" @click="addDepositList(form.deposit_list[idx], idx)"><AddIcon :style="'color:' + (form.deposit_list.length >= 10 || formDisabled ? 'gray' : '#006be6') +';font-size:18px;'" /></Button>
								</template>
							</InputNumber>
						</div>
						<div class="ant-alert-info">
							<div style="flex:1;min-width:0;">
								<div class="ant-space-item" v-for="level in betLevel">{{value}} x 押注等级{{level}} x 线数{{form.bet_line_count}} = 总押注 {{ (value * level * form.bet_line_count).toFixed(2)}}</div>
							</div>
						</div>
					</div>
				</div>
			</FormItem>
			<FormItem label="默认押注金额">
				<div>
					设置玩家进入游戏时的初始默认投注金额；投注金额 = 单押额度 * 押注等级 * 游戏线数
				</div>
				<div style="padding:.8rem 0;">
					<span>单押注额度：</span>
					<Select style="width:100px" v-model:value="form.default_deposit">
						<SelectOption v-for="value in form.deposit_list" :value="value">{{value}}</SelectOption>
					</Select>
					<span style="margin-left: .8rem;">押注等级：</span>
					<Select style="width:100px" v-model:value="form.default_deposit_level">
						<SelectOption v-for="value in betLevel" :value="value">{{value}}</SelectOption>
					</Select>
				</div>
				<div class="default-bet-level">
					{{form.default_deposit}} x 押注等级{{form.default_deposit_level}} x 线数{{form.bet_line_count}} = 总押注 {{ (form.default_deposit * form.default_deposit_level * form.bet_line_count).toFixed(2)}}
				</div>
			</FormItem>
		</Form>
	</Modal>
</template>

<style scoped>
.slots-wrap {
	flex-wrap: nowrap;
	gap: 10px;
	overflow-x: auto;
	display: flex;
}
.slots-wrap .wrap-item {
	flex: 0 0 33%; /* 不伸缩不收缩，固定33.33%宽度 */
	min-width: 0; /* 防止内容溢出 */
	padding:0.85rem;
}
.slots-wrap .wrap-item .ant-alert-info {
	margin-top: .5rem;
	background-color: #e6f6ff;
	border: 1px solid #7ac6ff;
	padding: 0.4rem 1rem;
	border-radius: .8rem;
	box-sizing: border-box;
	color: rgba(50, 54, 57, 0.88);
	word-wrap: break-word;
	line-height:2.256;
}
.ant-form {
	border: 1px solid hsl(var(--border));
	padding-top: 1rem;
	border-radius: .8rem;
}
.ant-form-item {
	border-bottom: 1px solid hsl(var(--border));
	padding-bottom: 1.5rem;
}
.ant-form-item:last-child {
	border-bottom: none;
}
:deep(.ant-form-item .ant-form-item-label) {
	font-weight: bold;
	justify-content: center;
	display: flex;
	align-items: center;
}

.default-bet-level {
	background-color: #e6f6ff;
	border: 1px solid #7ac6ff;
	padding: .5rem;
	border-radius: .8rem;
	width: 50%;
	color:rgba(50, 54, 57, 0.88);

}
.text-content {
	line-height: 1.6;
	padding:.5rem 0;
}
</style>