Vue.component('inner-tabs', {
	template: '<div class="full-height">\
				<nav class="inner-tabs" style="height: 38px;">\
					<div class="tab-wrap clearfix">\
						<a @click="load(tab, index)" :class="{active: (activeidx == index)}" href="javascript:void(0)" v-for="(tab,index) in tabs">{{tab.title}}</a>\
					</div>\
				</nav>\
				<div class="inner-main" style="height: calc(100% - 40px);overflow:hidden;">\
					<iframe :src="url" width="100%" height="100%" frameborder="0" seamless style="display: inline"></iframe>\
				</div>\
				</div>',
	props: ["tabs","activeidx","namespce"],
	data: function() {
		return {
			url: ""
		}
	},
	methods: {
		load: function(tab, index) {
//			top.GlobalEventBus.$emit("active-inner-tabs."+this.namespce, tab)
			this.url = tab.href
			this.activeidx = index
		},
		activeTab: function(index) {
//			this.activeidx = index
//			this.url = this.tabs[this.activeidx].href
//			this.load(this.tabs[index], index)
		}
	},
	mounted: function() {
		
	},
	watch: {
		activeidx: function(idx) {
			this.url = this.tabs[idx].href
		}
	}
})