<template>
  <div class="sider-tabs-wrapper">
    <div class="sider-item" 
    :class="{'sider-item-active': sider.active}" 
    v-for="(sider, index) in siderList" :key="sider.name || index"
    @click="handleClickSiderItem(sider)"
    >
      <div 
      class="sider-item-text text-primary-65-clor text-tip-1" 
      :class="{'sider-item-text-active': sider.active}">{{ sider.name }}</div>
      <div class="sider-item-icon" v-show="sider.active">
        <img src="./active-icon.svg" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>

const props = defineProps({
  siderList: {
    type: Array,
    default: () => [
      {
        name: '分析内容1',
        active: true
      },
       {
        name: '分析内容2',
        active: false
      },
       {
        name: '分析内容3',
        active: false
      },
    ]
  },
})

const emits = defineEmits(['clickSiderItem'])

const handleClickSiderItem = (sider) => {
  emits('clickSiderItem', sider)
}


</script>

<style lang="scss" scoped>
.sider-tabs-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  .sider-item {
    padding: 4px 28px;
    border-radius: 16px;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    .sider-item-icon{
      position: absolute;
      top: 6px;
      right: 16px;
      width: 8px;
      height: 8px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}

.sider-item-active{
  background: var(--color-main-active);
}

.sider-item-text-active {
  color: rgb(255,255,255)
}
</style>