import template from "./TabPane.html";

class TabPane {
    props = { key: Number, tab: String };

    state = {
        activeKey: null,
        key: this.props.key,
    };

    watch = {
        tab: function (newVal, oldVal) {
            if (newVal !== oldVal) {
                let item = this.esTabs.state.labels.find(function (item) {
                    return item.key === this.props.key;
                });
                if (item) {
                    item.name = newVal;
                }
            }
        },
    };

    template = template;

    constructor(esTabs) {
        this.esTabs = esTabs.getContext();
        this.esTabs.state.labels.push({
            name: this.props.tab,
            key: this.props.key,
        });
        this.esTabs.state.childrens.push($scope);
        this.state.activeKey = this.esTabs.state.activeKey;
    }
}