<template>
 <div class="tabs">
   <div
        class="tab-item role_button"  v-for="(item,index) in dataArr"
        :class="[{'active':tabId === item.id},styleType,item.class || '']"
        :key="index" @click="typeChange(item)" :role_button_code="item.role_button_code">
     {{item.name}}
   </div>
 </div>

</template>

<script>
export default {
  name: "TabControl",
  props:{
    dataArr: {
      default() {
        return []
      }
    },
    tabId:{

    },
    styleType:{
      default:'k-1'
    }
  },
  methods:{
    typeChange(tabI) {
      this.$emit('update:tabId',tabI.id,tabI)
    }
  }
}
</script>

<style scoped lang="scss">
 .tabs{

   display: flex;

   .tab-item{
     &.colorful{
       box-sizing: border-box;
       line-height: 30px;
       height: 30px;
       background: rgba(0, 128, 255, 0.3);
       margin-right: 20px;
       padding-left: 5px;
       padding-right: 5px;
       color: #fff;

     }
     &.k-1{
       &:focus,
       &:hover {
         background:url("../../../assets/imgs/下载1.png") no-repeat;
         background-size: 100%;
       }

       &{
         width: 177px;
         height: 44px;
         color: #FFF;
         font-size: 24px;
         font-weight: bold;
         font-family: 微软雅黑;
         background:url("../../../assets/imgs/下载2.png") no-repeat;
         background-size: 100%;
         border-color: transparent;
         text-align: center;
         line-height: 44px;
         cursor: pointer;
       }
       &.active{
         width: 177px;
         height: 44px;
         color: #fdbf00;
         font-size: 24px;
         font-weight: bold;
         font-family: 微软雅黑;
         background:url("../../../assets/imgs/下载1.png") no-repeat;
         background-size: 100%;
         border-color: transparent;
         text-align: center;
         line-height: 44px;
         cursor: pointer;
       }
     }
   }
 }
</style>
