<template>
  <div class="jg-tab">
    <div class="tabs" style="display: flex">
      <div
        v-for="(item, index) in tabs"
        :key="index"
        :class="activeKey === item.name ? 'tab-item-selected' : ''"
        class="jg-tab-item"
        @click="handleTabChange(item)"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="last">
      <slot/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'JgTab',
  emits: ['onTabChange'],
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    activeTab: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      activeKey: '',
    }
  },
  watch: {
    activeTab: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.activeKey = this.activeTab
        }
      },
      immediate: true,
    },
  },
  methods: {
    handleTabChange(record) {
      this.activeKey = record.name
      this.$emit('onTabChange', record)
    },
  },
}
</script>

<style lang="less" scoped>
  .jg-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: bolder;

    .tabs {
      .jg-tab-item {
        cursor: pointer;
        margin: 5px 8px 2px 8px;
        padding: 12px 24px;
        background-color: #ebebeb;
        box-shadow: 0.1rem 0.1rem 0.1rem #AAA7A7, -0.1rem -0.1rem 0.1rem #FFFFFF;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }

      .tab-item-selected {
        color: #FFFFFF;
        background-color: #A20D13;
        box-shadow: inset 0.1rem 0.1rem 0.1rem #6e090c, inset -0.1rem -0.1rem 0.1rem #c71016;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }
    }
  }
</style>
