class UI_RateDetail extends UIBaseComponent {
    private title: eui.Label;
    private closeBtn: eui.Button;

    private myGroup: eui.Group;
    private bankerGroup: eui.Group;
    private myCountText: eui.Label;
    private dealerCountText: eui.Label;
    private dealerIdentityText: eui.Label;//庄
    private myIdentityText: eui.Label;//闲
    private myCardArr: eui.Image[] = [];
    private dealerCardArr: eui.Image[] = [];
    private myCard1: eui.Image;
    private myCard2: eui.Image;
    private myCard3: eui.Image;
    private dealerCard1: eui.Image;
    private dealerCard2: eui.Image;
    private dealerCard3: eui.Image;

    private resultTilte: eui.Label;
    private resultContent: eui.Label;

    private fairTitle: eui.Label;
    private fairBtn: eui.Button;

    private tabTypeTitle: eui.Label;
    private tabBlockNumTitle: eui.Label;
    private tabBlockIdTitle: eui.Label;

    private fairList: eui.DataGroup;

    private index: number = null;

    public constructor() {
        super();
    }

    /**
	 * 绑定事件
	 */
    protected bindEvents(): void {
        super.bindEvents();
        mouse.setButtonMode(this.closeBtn, true);
        mouse.setButtonMode(this.fairBtn, true);

        this.closeBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onCloseBtn, this);
        this.fairBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onBtnFair, this);
    }

    /**
	 * 创建完成时调用
	 */
    protected onCreate(): void {
        super.onCreate();
        this.myCardArr.push(this.myCard1, this.myCard2, this.myCard3);
        this.dealerCardArr.push(this.dealerCard1, this.dealerCard2, this.dealerCard3);
        this.render();
        this.onLangChange();
    }

    /**
	 * 渲染UI时调用
	 */
    protected render(): void {
        this.fairList.itemRenderer = UI_RateDetailItem;
        this.fairList.dataProvider = new eui.ArrayCollection();
    }

	/**
	 * 改变语言时调用
	 */
    protected onLangChange(ev?: egret.Event): void {
        if (this.index !== null) {
            this.renderDetail(this.index)
        }
    }

    public renderDetail(index: number): void {
        this.index = index;
        let {di, phase, resultTitle, bankerWin, playerWin, tie,
            bankerPair, playerPair, fairTitle, tabTypeTitle, tabBlockNumTitle, tabBlockIdTitle} = Lang.instance.lang().RateDetail;
        let {player, banker} = Lang.instance.lang().Rate;
        let rateData = Rate.instance.rateHistory.result[index];
        let {banker_pair, block_info, id, player_pair, winner, reveal_block_num} = rateData;

        this.title.text = `${id}`;
        this.resultTilte.text = resultTitle;
        this.fairTitle.text = fairTitle;
        this.tabTypeTitle.text = tabTypeTitle;
        this.tabBlockIdTitle.text = tabBlockIdTitle;
        this.tabBlockNumTitle.text = tabBlockNumTitle;
        this.myIdentityText.text = player.toUpperCase();
        this.dealerIdentityText.text = banker.toUpperCase();


        //show poker
        this.myCardArr.forEach(item => item.visible = false)
        this.dealerCardArr.forEach(item => item.visible = false)

        block_info.player.forEach((block, index) => {
            let value = block.poker;
            let imgUrl = `poker_${Util.toPoker(value)}_${Util.toPokerColour(value)}`;
            this.myCardArr[index].source = imgUrl
            this.myCardArr[index].visible = true;
        })

        block_info.banker.forEach((block, index) => {
            let value = block.poker;
            let imgUrl = `poker_${Util.toPoker(value)}_${Util.toPokerColour(value)}`;
            this.dealerCardArr[index].source = imgUrl
            this.dealerCardArr[index].visible = true;
        })

        let playerPoker = block_info.player.map(item => item.poker);
        let bankerPoker = block_info.banker.map(item => item.poker);
        this.myCountText.text = (playerPoker.reduce((prev, cur) => { return prev + Util.pointPoker(cur) }, 0) % 10).toString();
        this.dealerCountText.text = (bankerPoker.reduce((prev, cur) => { return prev + Util.pointPoker(cur) }, 0) % 10).toString();

        //show result
        let winnerArr = [playerWin, bankerWin, tie];
        this.resultContent.text = `${winnerArr[winner]}${banker_pair ? '        ' + bankerPair : ''}${player_pair ? '        ' + playerPair : ''}`;

        //show table data
        let fairList = []
        for (let i = 0, len = Math.max(playerPoker.length, bankerPoker.length); i < len; i++) {
            if (playerPoker[i] !== undefined) {
                let player = block_info.player[i];
                player.index = i + 1;
                player.state = 0;
                player.blockNum = (reveal_block_num++);
                fairList.push(player);
            }
            if (bankerPoker[i] !== undefined) {
                let banker = block_info.banker[i];
                banker.index = i + 1;
                banker.state = 1;
                banker.blockNum = (reveal_block_num++);
                fairList.push(banker);
            }
        }

        (this.fairList.dataProvider as eui.ArrayCollection).source = fairList;
        (this.fairList.dataProvider as eui.ArrayCollection).refresh();
    }

    private onCloseBtn(ev: egret.TouchEvent): void {
        AudiosMgr.instance.playButtonClick();

        this.visible = false;
        this.index = null;
    }

    //TODO show fair
	private onBtnFair(ev: egret.TouchEvent): void {
		AudiosMgr.instance.playButtonClick();
		EOS_VUE.$showFair();
	}

	/**
	 * 界面关闭时调用
	 */
    public onClose(): void {
    }
}