<template>
  <div class="jg-button-group">
    <el-tabs :value="collectEntityId" @tab-click="handleClick">
      <el-tab-pane :label="item.entityName" :name="item.id" v-for="item in collectEntityList" :key="item.id">
        {{ item.entityName }}
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

export default {
  name: 'JgButtonGroup',
  props: {
    collectEntityList: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      collectEntityId: '',
    }
  },
  watch: {
    collectEntityList: {
      handler(newVal) {
        if (newVal) {
          this.collectEntityId = newVal[0] && newVal[0].id || ''
        }
      },
      immediate: true
    },
    collectEntityId: {
      handler(newVal) {
        this.$emit('onTabChange', newVal)
      },
    },
  },
  methods: {
    handleClick(e) {
      this.collectEntityId = e.name
    },
  },
}
</script>

<style lang="less" scoped>
  .jg-button-group {

    /deep/ .el-tabs__item {
      padding: 0 20px !important;
      border-radius: 5px;
      box-shadow: 0.2rem 0.2rem 0.2rem #aaa7a7, -0.1rem -0.1rem 0.2rem #FFFFFF;
      margin: 3px 20px;
    }

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

    /deep/ .el-tabs__item.is-active {
      border: none;
      background-color: #A20D13;
      box-shadow: inset 0.1rem 0.1rem 0.2rem #6e090c, inset -0.1rem -0.1rem 0.2rem #c7494d;
      color: #FFF;
    }

    /deep/ .el-tabs__item:hover {
      cursor: pointer;
      color: #FFF;
      border-color: transparent;
      background-color: #A20D13;
    }
    /deep/ .el-tabs__nav-wrap::after {
      display: none;
    }

    /deep/ .el-tabs__content {
      display: none;
    }
  }
</style>
