const Api = require('../net/Api');

cc.Class({
    extends: cc.Component,

    properties: {
        headDefaultSpriteFrame: cc.SpriteFrame,
        headSprite: cc.Sprite,
        background: cc.Sprite,

        rankSprite: cc.Sprite,
        rankRichText: cc.RichText,

        nameLabel: cc.Label,
        lvRichText: cc.RichText,

        rankSpriteFrame: [cc.SpriteFrame],
        backgroundSpriteFrame: [cc.SpriteFrame],

        isMe: {
            get: function() {
                if (!this._isMe) {
                    this._isMe = false;
                }
                return this._isMe;
            },
            set: function(value) {
                this._isMe = value;
                if (this._isMe) {
                    this.background.spriteFrame = this.backgroundSpriteFrame[1];
                } else {
                    this.background.spriteFrame = this.backgroundSpriteFrame[0];
                }
            }
        },
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    init (model, isMe = false) {
        this.configData(model);
        this.isMe = isMe;
    },

    start () {

    },

    configData(model) {
        this.headSprite.spriteFrame = this.headDefaultSpriteFrame;
        if (model.head) {
            Api.createImageFromUrl(model.head, (spriteFrame) => {
                this.headSprite.spriteFrame = spriteFrame;
            });
        }

        if (model.rank < 4) {
            this.rankSprite.node.active = true;
            this.rankRichText.node.active = false;
            this.rankSprite.spriteFrame = this.rankSpriteFrame[(model.rank - 1)];
        } else {
            this.rankSprite.node.active = false;
            this.rankRichText.node.active = true;
            let rank = (model.rank > 100) ? "100+" : model.rank;
            this.rankRichText.string = `<b><outline color=#692e0e width=2><color=white>${rank}</color></outline></b>`;
        }

        this.nameLabel.string = model.nick;
        this.lvRichText.string = `<b><outline color=white width=2><color=#934C31>LV.${model.buildingLevel}</color></outline></b>`;
    }

    // update (dt) {},
});