<template>
  <div class="container">
      <ul>
        <li v-for="(btn, index) of btns" :key="index" @click="changeBtn(btn, index)" :class="active === index ? 'activeBorder' : ''">
        <svg-icon :icon-class=" active === index ? btn.iconActive : btn.icon"></svg-icon>
        <!-- 未选中 #509cc2 选中 #2076a1-->
        <span class="title" :style="{'color':active === index ? '#2076a1' : ''}">{{btn.name}}</span>
        </li>
      </ul>
  </div>
</template>

<script>
import SvgIcon from '@/components/SvgIcon'
export default {
   name:'switchBtns',
   components:{
    SvgIcon
   },
   props:{
      changeCompon:{
        type:Function,
        required:true
      }
    },
   data() {
    return{
        btns:[
            {
                name:'设备面板',
                compon:'devicePanel',
                icon:'cockpit-device-pan-no',
                iconActive:'cockpit-device-pan-check'
            },
            {
                name:'经营面板',
                compon:'managementPanel',
                icon:'cockpit-distributor-pan-no',
                iconActive:'cockpit-distributor-pan-check'
            },
            {
                name:'供应商面板',
                compon:'supplierPanel',
                icon:'cockpit-supplier-pan-no',
                iconActive:'cockpit-supplier-pan-check'
            }
        ],
        active:0
    }
   },
   methods:{
    changeBtn(btn, index) {
        this.active = index
        this.changeCompon(btn.compon)
    }
   },
}
</script>
<style lang="scss" scoped>
 .container{
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        font-size: 22px;
        margin-right: 30px;
        height: 100%;
        align-items: center;
        .activeBorder{
            border-bottom:4px solid #2076a1;
        }
        li{
            margin-left: 20px;
            border-bottom:4px solid transparent;
            &:hover{
                cursor: pointer;
            }
            ::v-deep .svg-icon{
                width: 16px;
                height: 16px;
                vertical-align: middle;
            }
            .title{
                font-size: 16px;
                font-weight: 700;
                padding-left: 10px;
                color:#509cc2;
            }
        }
    }
 }
</style>