Vue.component('inner-tabs', {
	template: '<div>\
				<ul class="nav nav-tabs service-nav-tabs no-select">\
			  		<li v-for="(tab,index) in tabs" role="presentation" :class="{active: (activeidx == index)}">\
			  			<a @click="load(tab, index)">{{tab.title}}</a>\
			  		</li>\
				</ul>\
				<div class="inner-main" style="overflow:hidden;">\
					<iframe id="tab-iframe" :src="url" width="100%" :height="height" frameborder="0" seamless style="display: inline;"></iframe>\
				</div>\
			</div>',
	props: ["tabs","activeidx"],
	data: function() {
		return {
			url: "",
			height:function(){
				var winH = document.documentElement.clientHeight;
				return winH - 115; 
			}(),
		}
	},
	methods: {
		load: function(tab, index) {
			this.url = tab.href
			this.activeidx = index
		}
	},
	mounted: function() {
	},
	watch: {
		activeidx: function(idx) {
			this.url = this.tabs[idx].href
		}
	}
})