import 'home/family-coinMall.page.css';
import $ from 'yoho-jquery';
import Page from 'yoho-page';

class IconMall extends Page {
    constructor() {
        super();

        this.selector = {
            $tabItem: $('.tab .tab-item'),
            $defaultTabItem: $('.tab .tab-item:first'),
            $coinMallC: $('.coin-mall-c')
        };

        this.init();
    }

    init() {
        this.bindEvents();
        this.defaultChosen();
    }

    bindEvents() {
        this.selector.$tabItem.on('click', this.tabItem.bind(this));
    }

    defaultChosen() {
        let defaultId = this.selector.$defaultTabItem.attr('id');

        this.selector.$defaultTabItem.addClass('active');
        this.selector.$coinMallC.attr('id', defaultId);
    }

    tabItem(e) {
        let $this = $(e.currentTarget);
        let $thisId = $this.attr('id');

        $(`#${$thisId}-tab`).show().siblings('.tab-item-c').hide();
        this.selector.$coinMallC.removeAttr('id');
        this.selector.$coinMallC.attr('id', $thisId);
        $this.addClass('active').siblings('div').removeClass('active');
    }
}

$(() => {
    new IconMall();
});