<template>
<md-tabs  md-alignment="fixed">
      <md-tab :key="item.id" :id="item.id"
	  :md-label="item.title"
	  v-for="item in list"
	  @click="selectTab(item)"
	  :md-icon="item.img">
	  </md-tab>
    </md-tabs>
</template>

<script>
  import Vue from 'vue'
  import { MdTabs } from 'vue-material/dist/components'
  Vue.use(MdTabs)
	import { postApi, getApi } from "../../../api/commonApi"
	export default {
		name: "lbTab",
		props: ['list','loading','type','size','notClick'],
		data() {
			return {
			}
		},
		components: {

		},
		mounted() {

		},
		created() {
		},
		methods: {

			selectTab(val){
				if(val.id=='f1'){
					this.list[0].img=require('../../../assets/edit/suonei_hover.svg')
					this.list[1].img=require('../../../assets/edit/suowai.svg')
					this.list[2].img=require('../../../assets/edit/geshi.svg')
					// val.img=require('../../../assets/edit/suonei_hover.svg')
				}else if(val.id==='f2'){
						this.list[0].img=require('../../../assets/edit/suonei.svg')
					this.list[1].img=require('../../../assets/edit/suowai_hover.svg')
					this.list[2].img=require('../../../assets/edit/geshi.svg')
				}else if(val.id==='f3'){
					this.list[0].img=require('../../../assets/edit/suonei.svg')
					this.list[1].img=require('../../../assets/edit/suowai.svg')
					this.list[2].img=require('../../../assets/edit/geshi_hover.svg')
				}
				this.$emit('selectTab',val.id)
			}

		}
	}
</script>

<style scoped>
	@import 'lbTab.css';
</style>
<style>
	.md-tabs-navigation .md-icon-label .md-button-content {
		flex-direction:inherit !important;
		margin-bottom:7px;
	}
	.md-tabs.md-theme-default .md-tabs-navigation .md-button .md-icon{
		margin-right:10px;
		width:20px;
		height:20px;
	}
</style>
