<template>
  <div class="container">
      <ul>
        <li v-for="(btn, index) of btns" :key="index" @click="changeBtn(btn, index)">
        <svg-icon :icon-class="btn.icon"></svg-icon>
        <span class="title" :style="{'color':active === index ? '#409EFF' : ''}">{{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:'device-panel'
            },
            {
                name:'经营面板',
                compon:'managementPanel',
                icon:'management-panel'
            },
            {
                name:'供应商面板',
                compon:'supplierPanel',
                icon:'supplier-panel'
            }
        ],
        active:0
    }
   },
   methods:{
    changeBtn(btn, index) {
        this.active = index
        this.changeCompon(btn.compon)
    }
   },
}
</script>
<style lang="scss" scoped>
 .container{
    ul{
        list-style: none;
        display: flex;
        font-size: 25px;
        li{
            margin-left: 20px;
            &:hover{
                cursor: pointer;
            }
            ::v-deep .svg-icon{
                width: 32px;
                height: 32px;
                vertical-align: middle;
            }
            .title{
                padding-left: 10px;
            }
        }
    }
 }
</style>