import { _decorator, Canvas, Component, Label, Node, Size, Sprite, SpriteFrame, UITransform } from 'cc';
import { rankData } from '../../data';
import { tools } from '../../tools';
import { base_ui } from '../../fw/base_ui';
import { uiManager } from '../../manager/uiManager';
import { config } from '../../config';
import { user_info_view } from '../user_info_view';
import { dataManager } from '../../manager/dataManager';
import { userDataManager } from '../../manager/userDataManager';
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_img_avatar_border:Node = null;
    @property(Node) one_lab_score:Node = null;
    @property(Node) one_img_car:Node = null;
    @property(Node) one_region_bg:Node = null;
    @property(Node) one_lab_region:Node = null;

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

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

    @property(SpriteFrame) sf_default_border:SpriteFrame = 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[], type:number) {
        this.clearAll()
        if(data_list.length>0) {
            this.m_one_data = data_list[0]
            this.setLabName(this.one_lab_name, this.m_one_data,7)
            this.setImgAvatar(this.one_img_avatar, this.m_one_data)
            this.setImgAvatarBorder(this.one_img_avatar_border, this.m_one_data)
            this.setLabScore(this.one_lab_score, this.m_one_data)
            this.setImgCar(this.one_img_car, this.m_one_data)
            this.setRegion(this.one_region_bg, this.one_lab_region, this.m_one_data, type)
        } 
        if(data_list.length>1) {
            this.m_two_data = data_list[1]
            this.setLabName(this.two_lab_name, this.m_two_data,6)
            this.setImgAvatar(this.two_img_avatar, this.m_two_data)
            this.setImgAvatarBorder(this.two_img_avatar_border, this.m_two_data)
            this.setLabScore(this.two_lab_score, this.m_two_data)
            this.setImgCar(this.two_img_car, this.m_two_data)
            this.setRegion(this.two_region_bg, this.two_lab_region, this.m_two_data, type)
        }
        if(data_list.length>2) {
            this.m_three_data = data_list[2]
            this.setLabName(this.three_lab_name, this.m_three_data,5)
            this.setImgAvatar(this.three_img_avatar, this.m_three_data)
            this.setImgAvatarBorder(this.three_img_avatar_border, this.m_three_data)
            this.setLabScore(this.three_lab_score, this.m_three_data)
            this.setImgCar(this.three_img_car, this.m_three_data)
            this.setRegion(this.three_region_bg, this.three_lab_region, this.m_three_data, type)
        }
    }

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

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

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

    private setLabName(node:Node, data:rankData, cut_num:number) {
        tools.labelCutString(node,data.nickName,cut_num)
    }

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

    private setImgAvatarBorder(node:Node, data:rankData) {
        if(userDataManager.user_data.id==data.user_id) {
            tools.loadRemoteImg(userDataManager.user_data.photo_frame_img, (r)=>{
                node.getComponent(Sprite).spriteFrame = r.sf
            })
            return
        }
        if(data.photo_frame_img && data.photo_frame_img.length>0) {
            tools.loadRemoteImg(data.photo_frame_img, (r)=>{
                node.getComponent(Sprite).spriteFrame = r.sf
            })
        } else{
            node.getComponent(Sprite).spriteFrame = this.sf_default_border
        }
    }

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

    private setImgCar(node:Node, data:rankData) {
        node.getComponent(Sprite).spriteFrame = dataManager.getUserRankCarSf(data.car_id, data.user_id)
    }

    private setRegion(bg_node:Node, node:Node, data:rankData, type:number) {
        if(type==3) {  // 市排行隐藏
            bg_node.active = false
        } else {
            bg_node.active = true
        }
        tools.substringRankRegionName(node, data.city_name)
    }

    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)
        })
    }
}