import { _decorator, Label, Node, Sprite, SpriteFrame, Toggle, v2, v3 } from 'cc';
import { BaseView } from '../../../framework/layer/BaseView';
import { StringUtil } from '../../../framework/util/StringUtil';
import { Framework } from '../../../framework/Framework';
import { RoleManager } from '../../manager/RoleManager';
import { RolegradeConf } from '../../config/RolegradeConf';
import { GoodsManager } from '../../manager/GoodsManager';
import { RoleData } from '../../data/RoleData';
const { ccclass, property } = _decorator;

interface TagBtn {
	key: string;
	btn: Node;
}

@ccclass('HeroAttr')
export class HeroAttr extends BaseView {
	@property({ type: Label, tooltip: "标题" })
	titleTx: Label = null;

	@property({ type: Toggle, tooltip: "属性按钮" })
	attrToggle: Toggle = null;
	@property({ type: Label, tooltip: "属性按钮文字" })
	attrToggleTx: Label = null;
	@property({ type: Node, tooltip: "属性节点" })
	attrNode: Node = null

	@property({ type: Toggle, tooltip: "基因按钮" })
	dnaToggle: Toggle = null;
	@property({ type: Label, tooltip: "基因按钮文字" })
	dnaToggleTx: Label = null;
	@property({ type: Node, tooltip: "基因节点" })
	dnaNode: Node = null

	@property({ type: Toggle, tooltip: "专属按钮" })
	exclusiveToggle: Toggle = null;
	@property({ type: Label, tooltip: "专属按钮文字" })
	exclusiveToggleTx: Label = null;
	@property({ type: Node, tooltip: "专属节点" })
	exclusiveNode: Node = null

	@property({ type: Toggle, tooltip: "皮肤按钮" })
	skinToggle: Toggle = null;
	@property({ type: Label, tooltip: "皮肤按钮文字" })
	skinToggleTx: Label = null;
	@property({ type: Node, tooltip: "皮肤节点" })
	skinNode: Node = null;

	private selectTag = 'attr';

	private data = {};
	// heroIco: Sprite = null;
	protected onLoad() {
		super.onLoad();
		this.titleTx.string = StringUtil.getLanguageData('英雄详情');
		this.attrToggleTx.string = StringUtil.getLanguageData('属性');
		this.dnaToggleTx.string = StringUtil.getLanguageData('基因');
		this.exclusiveToggleTx.string = StringUtil.getLanguageData('专属');
		this.skinToggleTx.string = StringUtil.getLanguageData('皮肤');
	}

	protected onDestroy() {

	}

	//UI开打时会调用,如果有初始化代码应该放到此函数
	onOpen(data) {
		this.data = data.heroDate;
		if (data.tag) {
			this.selectTag = data.tag;
		}
		this[`${this.selectTag}Toggle`].isChecked = false;
		this[`${this.selectTag}Toggle`].isChecked = true;

		this.updateAttr();
	}

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

	}

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

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

	//UI事件处理
	private onTouchButton(event: Event) {
		//Framework.audio.playEffect(AudioID.Click);
		let target: any = event.target;
		if (target.name == 'close_btn') {
			Framework.layer.close(this)
		} else if (target.name == 'update_btn') {
			let gConf = RolegradeConf.data[String(this.data['grade'] + 1)];
			let costData = GoodsManager.getGoodsLocalInfo(5000 + this.data['id'], gConf.SelfNum1);
			let ownData = GoodsManager.getGoodsById(5000 + this.data['id']);
			if (ownData.count < costData.count) {
				Framework.tips.setTips(StringUtil.getLanguageData('升级所需材料不足!'));
				return;
			}
			RoleManager.sendRoleAdvance({ hid: this.data['id'] }, () => {
				Framework.tips.setTips(StringUtil.getLanguageData('升级成功!'));
				let rData = RoleData.getRoleDataByID(this.data['id']);
				this.data = {}
				this.data = rData;
				this.updateAttr();
			});
		}
	}

	onEventSelectTag(target: Toggle, customEventData: string) {
		if (target.isChecked) {
			let nodes = ['attr', 'dna', 'exclusive', 'skin']
			for (const element of nodes) {
				if (element == customEventData) {
					this[`${element}Node`].active = true;
				} else {
					this[`${element}Node`].active = false;
				}
			}
		}
	}

	updateAttr() {
		let attrNode = this.attrNode.getChildByName('msg_bg').getChildByName('attr_node');
		let attackNumTx = attrNode.getChildByName('attr_bg').getChildByName('attack_node').getChildByName('num_tx');
		let speedNumTx = attrNode.getChildByName('attr_bg').getChildByName('speed_node').getChildByName('num_tx')
		let scopeTx = attrNode.getChildByName('attr_bg').getChildByName('scope_node').getChildByName('num_tx')

		let skillNode = this.attrNode.getChildByName('msg_bg').getChildByName('skill_node');

		let updateNode = this.attrNode.getChildByName('msg_bg').getChildByName('update_node');
		let updateBg = updateNode.getChildByName('update_bg');
		let beforeStarNode = updateBg.getChildByName('star_bg').getChildByName('before_star');
		let starUpdatrArrow = updateBg.getChildByName('star_bg').getChildByName('arrow_ico');
		let afterStarNode = updateBg.getChildByName('star_bg').getChildByName('after_star');

		let addAttrName = updateBg.getChildByName('attack_node').getChildByName('name_tx');
		addAttrName.getComponent(Label).string = StringUtil.getLanguageData('攻击');
		let beforeAddAttr = updateBg.getChildByName('attack_node').getChildByName('before_num');
		let addAttrArrow = updateBg.getChildByName('attack_node').getChildByName('arrow_ico');
		let afterAddAttr = updateBg.getChildByName('attack_node').getChildByName('after_num');

		let costBg = updateNode.getChildByName('cost');
		let costIco = costBg.getChildByName('ico').getComponent(Sprite);
		let costNumTx = costBg.getChildByName('num_tx').getComponent(Label);

		let gradeConf = RolegradeConf.data;
		let beforeGConf = gradeConf[String(this.data['grade'])];
		let afterGConf = gradeConf[String(this.data['grade'] + 1)];

		for (let index = 1; index <= 5; index++) {
			const star = beforeStarNode.getChildByName('star_' + index);
			if (beforeGConf.StarUrl) {
				this.load('common', `texture/image/${beforeGConf.StarUrl}/spriteFrame`, SpriteFrame, (res: SpriteFrame) => {
					star.getComponent(Sprite).spriteFrame = res;
				})
				star.active = index <= beforeGConf.StarNum;
			} else {
				star.active = false;
			}
		}

		let atkNum = this.data['conf']['Damage'];
		atkNum = atkNum * beforeGConf[`LvAttrMod${this.data['conf']['Quantity']}`]
		attackNumTx.getComponent(Label).string = atkNum;
		speedNumTx.getComponent(Label).string = this.data['conf']['Speed'];
		scopeTx.getComponent(Label).string = this.data['conf']['Radius'];
		beforeAddAttr.getComponent(Label).string = atkNum;

		if (!afterGConf) {
			beforeStarNode.active = true;
			beforeStarNode.position = v3(0, 0);
			starUpdatrArrow.active = false;
			afterStarNode.active = false;
			costBg.active = false;
			beforeAddAttr.active = true;
			beforeStarNode.position = v3(356, 0);
			addAttrArrow.active = false;
			afterAddAttr.active = false;
		} else {
			beforeStarNode.active = true;
			beforeStarNode.position = v3(-120, 0);
			starUpdatrArrow.active = true;
			afterStarNode.active = true;
			beforeAddAttr.active = true;
			beforeAddAttr.position = v3(205, 0);
			addAttrArrow.active = true;
			afterAddAttr.active = true;

			for (let index = 1; index <= 5; index++) {
				const star = afterStarNode.getChildByName('star_' + index);
				this.load('common', `texture/image/${afterGConf.StarUrl}/spriteFrame`, SpriteFrame, (res: SpriteFrame) => {
					star.getComponent(Sprite).spriteFrame = res;
				})
				star.active = index <= afterGConf.StarNum;
			}

			let afterAddAtkNum = this.data['conf']['Damage'];
			afterAddAtkNum = afterAddAtkNum * afterGConf[`LvAttrMod${this.data['conf']['Quantity']}`]
			afterAddAttr.getComponent(Label).string = afterAddAtkNum;

			costBg.active = true;
			let costData = GoodsManager.getGoodsLocalInfo(5000 + this.data['id'], afterGConf.SelfNum1);
			let ownData = GoodsManager.getGoodsById(5000 + this.data['id']);
			this.load('common', `texture/icon/hero/head_${this.data['id']}/spriteFrame`, SpriteFrame, (res: SpriteFrame) => {
				costIco.spriteFrame = res;
			})
			costNumTx.string = ownData.count + '/' + costData.count;
		}
	}
}