import { _decorator, Canvas, Component, Label, Node, Size, Sprite, UITransform } from 'cc';
import { rankData } from '../../data';
import { tools } from '../../tools';
import { imageCacheManager } from '../../manager/imageCacheManager';
import { base_ui } from '../../fw/base_ui';
import { uiManager } from '../../manager/uiManager';
import { config } from '../../config';
import { user_info_view } from '../user_info_view';
const { ccclass, property } = _decorator;

@ccclass('rank_list_top')
export class rank_list_top extends base_ui {
    @property(Node) one_node = null;
    @property(Node) one_lab_name:Node = null;
    @property(Node) one_img_avatar:Node = null;
    @property(Node) one_lab_score:Node = null;
    @property(Node) one_img_car:Node = null;

    @property(Node) two_node = null;
    @property(Node) two_lab_name:Node = null;
    @property(Node) two_img_avatar:Node = null;
    @property(Node) two_lab_score:Node = null;
    @property(Node) two_img_car:Node = null;

    @property(Node) three_node = null;
    @property(Node) three_lab_name:Node = null;
    @property(Node) three_img_avatar:Node = null;
    @property(Node) three_lab_score:Node = null;
    @property(Node) three_img_car:Node = null;

    private m_one_data:rankData = null
    private m_two_data:rankData = null
    private m_three_data:rankData = null

    protected start(): void {
        this.onButtonListen(this.one_node, ()=>{
            this.onClickRankGotoUserInfo(this.m_one_data)
        })
        this.onButtonListen(this.two_node, ()=>{
            this.onClickRankGotoUserInfo(this.m_two_data)
        })
        this.onButtonListen(this.three_node, ()=>{
            this.onClickRankGotoUserInfo(this.m_three_data)
        })
    }

    initView(data_list:rankData[]) {
        this.clearAll()
        if(data_list.length>0) {
            this.m_one_data = data_list[0]
            this.setLabName(this.one_lab_name, this.m_one_data)
            this.setImgAvatar(this.one_img_avatar, this.m_one_data)
            this.setLabScore(this.one_lab_score, this.m_one_data)
            this.setImgCar(this.one_img_car, this.m_one_data)
        } 
        if(data_list.length>1) {
            this.m_two_data = data_list[1]
            this.setLabName(this.two_lab_name, this.m_two_data)
            this.setImgAvatar(this.two_img_avatar, this.m_two_data)
            this.setLabScore(this.two_lab_score, this.m_two_data)
            this.setImgCar(this.two_img_car, this.m_two_data)
        }
        if(data_list.length>2) {
            this.m_three_data = data_list[2]
            this.setLabName(this.three_lab_name, this.m_three_data)
            this.setImgAvatar(this.three_img_avatar, this.m_three_data)
            this.setLabScore(this.three_lab_score, this.m_three_data)
            this.setImgCar(this.three_img_car, this.m_three_data)
        }
    }

    private clearAll() {
        this.one_lab_name.getComponent(Label).string = ''
        this.one_img_avatar.getComponent(Sprite).spriteFrame = null
        this.one_lab_score.getComponent(Label).string = ''
        this.one_img_car.getComponent(Sprite).spriteFrame = null

        this.two_lab_name.getComponent(Label).string = ''
        this.two_img_avatar.getComponent(Sprite).spriteFrame = null
        this.two_lab_score.getComponent(Label).string = ''
        this.two_img_car.getComponent(Sprite).spriteFrame = null

        this.three_lab_name.getComponent(Label).string = ''
        this.three_img_avatar.getComponent(Sprite).spriteFrame = null
        this.three_lab_score.getComponent(Label).string = ''
        this.three_img_car.getComponent(Sprite).spriteFrame = null
    }

    private setLabName(node:Node, data:rankData) {
        let lab_component = node.getComponent(Label)
        if(data.nickName.length>5) {
            lab_component.string = data.nickName.substring(0,5) + '...'
            lab_component.horizontalAlign = Label.HorizontalAlign.LEFT
        } else {
            lab_component.horizontalAlign = Label.HorizontalAlign.CENTER
            lab_component.string = data.nickName
        }
    }

    private setImgAvatar(node:Node, data:rankData) {
        tools.loadRemoteImg(data.avatarUrl, (r)=>{
            node.getComponent(Sprite).spriteFrame = r.sf
        })
    }

    private setLabScore(node:Node, data:rankData) {
        node.getComponent(Label).string = data.score + '分'
    }

    private setImgCar(node:Node, data:rankData) {
        node.getComponent(Sprite).spriteFrame = imageCacheManager.getRankCarImageById(data.car_id)
    }

    private onClickRankGotoUserInfo(data:rankData) {
        if(data == null) {
            return
        }
        uiManager.Instance().showUi(config.UI.ui_user_info_view, null, (node:Node)=>{
            node.getComponent(user_info_view).initView(data)
        })
    }
}