<!--
 * @Author: your name
 * @Date: 2021-09-18 09:55:44
 * @LastEditTime: 2021-09-18 16:11:18
 * @LastEditors: Please set LastEditors
 * @Description: 生物安全 - 顶部的三个按钮组件
 * @FilePath: \hyyfClient\src\components\bioSafety\Btns.vue
-->
<template>
  <div class="bio-safety-btns">
    <el-button 
      v-for="item in btnNames" 
      :key="item.id"
      :type="item.id === selected? 'primary': ''"
      @click="handleClick(item.id)">
      {{ item.name }}
    </el-button>
  </div>
</template>
<script>
export default {
  props: {
    // 传入按钮的数组，格式为 [{ name: '按钮名称', id: '区别三个按钮的标识符' }, {}]
    btnNames: {
      type: Array,
      required: true
    },
    btnSelected: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      selected: undefined
    }
  },
  mounted() {
    this.selected = this.btnSelected
  },
  methods: {
    /**
     * @description: 切换选中按钮的颜色，传出按钮的选中情况
     * @param {*} id: 按钮的唯一标识符
     */    
    handleClick(id) {
      this.selected = id
      this.$emit('btnSelected', id)
    }
  },
}
</script>
<style scoped>
  .bio-safety-btns {
    margin-bottom: 20px;
  }
</style>