<script setup>
import { getUserTags } from '../api'
const props = defineProps({ ssoId: String })

const color = ['#af1c40', '#c17933', '#8f0034', '#d45548', '#ab3259', '#dec34c', '#8b8920', '#a25a6d']
const list = ref([])
async function fetchList() {
  if (!props.ssoId) return
  const res = await getUserTags({ sso_id: props.ssoId, limit: 20 })
  list.value = res.data.items.map((item, index) => {
    return { ...item, weight: parseFloat(item.weight) / 2 + 1 || 0, color: color[index % color.length] }
  })
}

watch(
  () => props.ssoId,
  () => {
    fetchList()
  },
  { immediate: true }
)
</script>

<template>
  <div class="user-label">
    <ul>
      <li v-for="item in list" :key="item.id" :style="{ scale: item.weight }">
        <div class="user-label__inner" :style="{ backgroundColor: item.color }">
          {{ item.name }}
          <!-- <span class="user-label__arrow"></span> -->
        </div>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.user-label {
  position: relative;
  margin: 40px;
  text-align: center;
  background: url(@/assets/images/figure.png) no-repeat center center;
  background-size: contain;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 230px;
    row-gap: 20px;
  }
  .user-label__inner {
    position: relative;
    display: inline-block;
    padding: 10px;
    font-size: 14px;
    text-align: left;
    font-family: Roboto;
    line-height: 24px;
    // color: rgba(16, 16, 16, 1);
    color: #fff;
    background-color: rgba(231, 232, 232, 1);
    // border: 1px solid rgba(187, 187, 187, 1);
    border-radius: 50%;
  }
  .user-label__arrow {
    position: absolute;
    height: 10px;
    width: 10px;
    &::before {
      background: rgba(231, 232, 232, 1);
      border: 1px solid rgba(187, 187, 187, 1);
      box-sizing: border-box;
      content: ' ';
      height: 10px;
      position: absolute;
      transform: rotate(45deg);
      width: 10px;
    }
  }
  li:nth-child(odd) {
    text-align: right;
    .user-label__arrow {
      right: -5px;
      top: 0px;
      transform: translate(0px, 10px);
      &::before {
        border-top-right-radius: 2px;
        border-bottom-color: transparent !important;
        border-left-color: transparent !important;
      }
    }
  }
  li:nth-child(even) {
    text-align: left;
    .user-label__arrow {
      left: -5px;
      top: 0px;
      transform: translate(0px, 10px);
      &::before {
        border-bottom-left-radius: 2px;
        border-right-color: transparent !important;
        border-top-color: transparent !important;
      }
    }
  }
}
</style>
