import { _decorator, Label, Toggle, tween, UIOpacity } from 'cc';
import { BaseView } from '../../../framework/layer/BaseView';
import { ServerItem } from './ServerItem';
import { AudioID } from '../../../framework/config/AudioConf';
import { Framework } from '../../../framework/Framework';
import { UserData } from '../../data/UserData';
import List from '../../../framework/list/List';
import { StringUtil } from '../../../framework/util/StringUtil';
import { GameEvent } from '../../data/GameEvent';
const { ccclass, property } = _decorator;

@ccclass('SelectServer')
export class SelectServer extends BaseView {
	@property({ type: Label, tooltip: "关闭提示" })
	closeTips: Label = null;

	@property({ type: Label, tooltip: "标题" })
	titlteTx: Label = null;

	@property({ type: Label, tooltip: "分区文字1" })
	arenaTx1: Label = null;

	@property({ type: Label, tooltip: "分区文字2" })
	arenaTx2: Label = null;

	@property({ type: Label, tooltip: "分区文字3" })
	arenaTx3: Label = null;

	@property({ type: List, tooltip: "服务器组容器" })
	serverGroupSv: List = null;

	@property({ type: List, tooltip: "服务器容器" })
	serverItemSv: List = null;

	private groupList = []

	private serverList = []
	private Server_data = null;
	private tabulation = 'recently_login';
	private initialized = false;//首次刷新标记

	protected onLoad() {
		super.onLoad();
		this.closeTips.string = StringUtil.getLanguageData('点击空白关闭');
		this.titlteTx.string = StringUtil.getLanguageData('邮件');
		this.closeTips.node.getComponent(UIOpacity).opacity = 0;

		Framework.event.addEvent(GameEvent.SelectServer, () => {
			Framework.layer.close(this);
		}, this);

	}

	protected onDestroy() {

	}

	//UI开打时会调用,如果有初始化代码应该放到此函数
	onOpen() {
		tween(this.closeTips.node.getComponent(UIOpacity))
			.to(1, { opacity: 255 })
			.to(1.2, { opacity: 10 })
			.union()
			.repeatForever()
			.start()


		let roles = UserData.getRoleServers();
		if (roles.length != 0) {
			let roleList = [];
			for (const v of roles) {
				if (v && v.sid) {
					roleList.push(v);
				}
			}
			this.groupList.push({ name: 'lately', data: [roleList[0]] });
			this.groupList.push({ name: 'user', data: roleList });
		} else {
			let recmds = UserData.getRecmdServers();
			if (recmds.length != 0) {
				let recommendList = [];
				for (const v of recmds) {
					if (v && v.sid) {
						recommendList.push(v);
					}
				}
				this.groupList.push({ name: 'recommend', data: recommendList });
			}
		}

		let allList = UserData.getAllServers();
		let num = 0;
		let idx = 1;
		let serverList = {};
		for (let list in allList) {
			num++;
			if (!serverList[idx]) {
				serverList[idx] = []
			}
			if (num == 10) {
				idx++
				num = 0;
			}
			serverList[idx].push(allList[list])
		}
		for (const key in serverList) {
			const element = serverList[key];
			this.groupList.push({ name: Number(key) * 10, data: element });
		}

		this.serverGroupSv.numItems = this.groupList.length;
	}

	// serverTab(event: Event) {
	// 	if (!this.Server_data) {
	// 		Framework.tips.setTips('完蛋，服务器开小差了')
	// 		return;
	// 	}
	// 	let target: any = event.target;
	// 	let choosePic = this.Node.serverTab.getChildByName(this.tabulation).getComponent(Sprite).spriteFrame;
	// 	this.Node.serverTab.getChildByName(this.tabulation).getComponent(Sprite).spriteFrame = target.getComponent(Sprite).spriteFrame;
	// 	target.getComponent(Sprite).spriteFrame = choosePic;
	// 	this.tabulation = target.name;
	// 	if (target.name == 'recently_login') {
	// 		if (Object.keys(UserData.save_locally('choose_server', null, {})).length > 0) {
	// 			this.List.server.numItems = 1
	// 		} else {
	// 			this.List.server.numItems = 0;
	// 		}
	// 	} else {
	// 		this.List.server.numItems = this.server_list[target.name / 10].length
	// 	}
	// }

	//UI关闭时会调用,该函数在onDestroy前调用
	onClose() {

	}

	//框架管理UI层级时会调用,可根据UI情况修改
	onShow() {
		super.onShow();
	}

	//框架管理UI层级时会调用,可根据UI情况修改
	onHide() {
		super.onHide();
	}

	//UI事件处理
	private onTouchButton(event: Event, str) {
		Framework.audio.playEffect(AudioID.Click);
		let target: any = event.target;
		if (target.name == 'serverItem') {
			let idx = target.getChildByName('Index').getComponent(Label).string
		} else if (target.name == 'mask') {
			Framework.layer.close(this)
		}
	}

	onEventSelectArena(target: Toggle, customEventData: string) {
		if (target.isChecked) {
			console.log('============== 大区id', customEventData)

		}
	}

	onEventSelectGroup(target: Toggle) {
		if (target.isChecked) {
			let idx = Number(target.node.name);
			this.serverList = this.groupList[idx].data;
			this.serverItemSv.numItems = this.groupList[idx].data.length;
		}
	}


	// 列表渲染 
	onServerListEvent(item, idx) {
		item.name = String(idx);
		let nameTx = item.getChildByName('name_tx').getComponent(Label);
		let gData = this.groupList[idx]
		if (gData.name == 'lately') {
			nameTx.string = StringUtil.getLanguageData('最近登录');
			this.initialized = true;
			item.getComponent(Toggle).isChecked = false;
			item.getComponent(Toggle).isChecked = true;
		} else if (gData.name == 'user') {
			nameTx.string = StringUtil.getLanguageData('拥有角色');
		} else if (gData.name == 'recommend') {
			nameTx.string = StringUtil.getLanguageData('推荐服务器');
			if (!this.initialized) {
				this.initialized = true
				item.getComponent(Toggle).isChecked = false;
				item.getComponent(Toggle).isChecked = true;
			}
		} else {
			if (gData.name > 10) {
				nameTx.string = (gData.name + 1) + "_" + (gData.name + 10)
			} else {
				nameTx.string = "1-10";
				if (!this.initialized) {
					this.initialized = true
					item.getComponent(Toggle).isChecked = false;
					item.getComponent(Toggle).isChecked = true;
				}
			}
		}
	}

	// 列表渲染 
	onServerEvent(item, idx) {
		item.getComponent(ServerItem).init(this.serverList[idx]);
	}
}