Vue.component('inner-tabs', {
	template: '<ul class="nav nav-tabs service-nav-tabs">\
			  		<li v-for="(tab,index) in tabs" role="presentation" :class="{active: (activeidx == index)}">\
			  			<a @click="load(tab, index)">{{tab.title}}</a>\
			  		</li>\
				</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"],
	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
		}
	}
})