<template>
  <!--标签栏 -->
  <el-row type="flex" class="center_border">
    <el-col :xs="1" :sm="2" :md="2" :lg="2" :xl="4"></el-col>
    <el-col :xs="22" :sm="20" :md="20" :lg="20" :xl="16">
      <el-tabs v-if="title===1" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.label" :name="item.name">
          关于我们
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-else v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in tabList" :key="index" :label="item.label" :name="item.name">
          {{ title === 0 ? '' : item.label  }}
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "TabsItem",
  props: {
    title: Number,
    tabList: {
      type: Array,
      default: ()=>{
        return  [
          {
            label: '全部',
            name: 'first'
          },
          {
            label: '瓷抛大理石',
            name: 'second'
          }, {
            label: '通体大理石',
            name: 'third'
          }, {
            label: '中板通体大理石',
            name: 'four'
          }, {
            label: '大板通体大理石',
            name: 'five'
          }, {
            label: '银河系大板',
            name: 'six'
          }, {
            label: '仿古砖600x600',
            name: 'seven'
          }, {
            label: '金刚大理石',
            name: 'eight'
          }, {
            label: '岩板',
            name: 'nine'
          }, {
            label: '微水泥',
            name: 'ten'
          }
        ]
      }
    },
    fatherMethod:{
      type:Function,
      default: null
    }
  },
  data() {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick(tab){
      if(this.fatherMethod){
        this.fatherMethod(tab)
      }
    }
  }
}
</script>

<style scoped>
* {
  font: 14px/1.8 "微软正黑体", "Microsoft JhengHei", "Microsoft Yahei", "微软雅黑", "Hiragino Sans GB", "冬青黑体", "Arial", "Helvetica", "SimHei", "黑体", "STXihei", "华文细黑", sans-serif;
}

.center_border {
  width: 100%;
  height: 55px;
  border-bottom: 1px solid #ebebeb;
  background-color: #fff;
}

/deep/ .el-tabs {
  position: relative;
  line-height: 55px;
}

/deep/ .el-tabs__nav {
  float: right;
  height: 100%;
}

/deep/ .el-tabs__header {
  margin: 0;
}

/deep/ .el-tabs__content {
  position: absolute;
  top: 0;
}

/deep/ .el-tabs__item {
  height: 55px;
  line-height: 55px;
  border-left: 1px solid #f1f1f1;
  padding: 0 20px !important;
}

/deep/ .el-tabs__item.is-active {
  color: #000;
  border-bottom: 1px solid #333;
}

/deep/ .el-tabs__item:hover {
  color: #000;
  text-decoration: underline;
}

/deep/ .el-tabs--top .el-tabs__item.is-top:last-child {
  border-right: 1px solid #f1f1f1;
}

/deep/ .el-tabs__active-bar {
  display: none;
}

/deep/ .el-tabs__nav-wrap::after {
  display: none;
}

/deep/ .el-tab-pane {
  color: #333;
  height: 55px;
  line-height: 55px;
  float: left;
  font-size: 18px;
}
</style>
