<template>
  <div class="source-tab-list-wrapper" :style="{ width: width }">
    <div class="tab-item" :class="{ tabItemActive: activeSouceTabId === item.id }" v-for="item, index in sourceTabList"
      :key="index" @click="handleClcikTab(item)">
      {{ item.name }}
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
  width: {
    type: String,
    default: '1000px'
  },
  sourceTabList: {
    type: Array,
    default: [
    ]
  },
  activeSouceTabId: {
    type: [String, Number],
    default: ''
  }

})

const emit = defineEmits('clickTab')

const handleClcikTab = (tab) => {
  emit('clickTab', tab)
}

</script>

<style lang="scss" scoped>
.source-tab-list-wrapper {
  height: 42px;
  display: flex;
  justify-content: flex-start;
  gap: 12px;

  .tab-item {
    height: 42px;
    line-height: 42px;
    padding: 0 16px;
    font-size: 20px;
    font-weight: 400;
    color: rgba(59, 65, 75, 1);
    font-family: Source Han Sans CN;
    text-align: center;
    cursor: pointer;

    &:hover {
      color: var(--color-main-active);
    }
  }

  .tabItemActive {
    background: var(--color-main-active);
    color: #fff;
    font-weight: 700;
    border-radius: 21px;

    &:hover {
      color: #fff;
    }
  }
}
</style>