<template>
  <div class="user-list__container">
    <div class="text">
      <text>{{ nameStr }}</text>
    </div>
    <div id="LearnWordUserList" class="user-list__avatar">
      <div v-if="props.list.length <= 4" class="list">
        <div
          v-for="(item, index) in props.list"
          :key="item.name"
          class="item"
          :style="{ zIndex: -index }"
        >
          <img :src="getImage(`photo_${item.sex}`)" />
        </div>
      </div>
      <div v-else class="list pointer" @click.stop="toShowAllList">
        <div
          v-for="(item, index) in props.list.slice(0, 3)"
          :key="item.name"
          class="item"
          :style="{ zIndex: -index }"
        >
          <img :src="getImage(`photo_${item.sex}`)" />
        </div>
        <div
          v-if="props.list.length > 4"
          class="item ellipsis"
          :style="{ zIndex: -props.list.length }"
        ></div>
      </div>
    </div>
    <div v-if="showAllList" class="all_list">
      <div class="ul">
        <div
          v-for="(item, index) in props.list"
          :key="item.name"
          class="item"
          :style="{ zIndex: -index }"
        >
          <div class="info_box">
            <img class="avatar" :src="getImage(`photo_${item.sex}`)" />
            <span class="name">{{ item.name }}</span>
          </div>
        </div>
      </div>
      <div class="triangle"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Friend } from '../interface'
const props = defineProps<{
  modelValue: boolean
  list: Array<Friend>
}>()
const emit = defineEmits(['update:modelValue'])

const nameStr = ref('')
const OSS_URL = import.meta.env.VITE_OSS_URL
const ellipsis = `${OSS_URL}/xuexiaole_clinet/learnWord/ellipsis.png`

const getImage = (name: string) => {
  return `${OSS_URL}/xuexiaole_clinet/learnWord/${name}.png` // 文件路径
}

/* 根据头像数量计算间隔 */
// function getAvatarMarginRight() {
//     const $container = document.getElementById('LearnWordUserList');
//     const containerWidth = $container?.clientWidth;
//     const $avatarList = $container?.getElementsByClassName('item');
//     if ($avatarList?.length) {
//         const avatarWidth = $avatarList[0]?.getElementsByTagName('uni-image')[0].clientWidth || 72;
//         const averageWidth = containerWidth / $avatarList?.length;

//         for (let i = 0; i < $avatarList.length; i++) {
//             if (i < $avatarList?.length - 1) {
//                 const cssText = $avatarList[i].style.cssText;
//                 $avatarList[i].style.cssText = `${cssText};margin-right: ${
//                     averageWidth - avatarWidth
//                 }px`;
//             }
//         }
//     }
// }

// 展示全部学生列表
const showAllList = ref(false)
function toShowAllList() {
  showAllList.value = !showAllList.value
  emit('update:modelValue', showAllList.value)
}

onMounted(() => {
  /* 拼接用户名字符串 */
  if (props.list.length) {
    const showUser = props.list.slice(0, 2)
    const showUserName = showUser.map(item => item.name?.slice(0, 1) + '**')
    nameStr.value = showUserName.join('、')
    if (props.list.length > 2) {
      nameStr.value += '...'
    }
    nameStr.value += '在这一关'
  }
  nextTick(() => {
    document.querySelector('.level__list')?.addEventListener('click', e => {
      showAllList.value = false
    })
  })

  // getAvatarMarginRight();
})
</script>

<style lang="scss" scoped>
.user-list__container {
  width: 200px;
  height: 10vh;
  position: relative;
  z-index: auto;

  .text {
    width: 100%;
    display: flex;
    justify-content: center;

    text {
      white-space: nowrap;
      color: #000;
      user-select: none;

      text-align: center;
      font-family: $font-text;
      font-size: 2vh;
      font-style: normal;
      font-weight: 400;
      line-height: 3vh;
      /* 150% */
    }
  }

  .user-list__avatar {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-left: -12px;
  }

  .list {
    display: flex;
    justify-content: space-between;

    .item {
      position: relative;
      width: 72px;
      height: 6vh;
      flex-shrink: 0;
      margin-right: -28px;
      border: 0.08vh solid #fff;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.35);
      backdrop-filter: blur(3px);
      overflow: hidden;

      & > image {
        width: 100%;
        height: 100%;
      }

      &.ellipsis::after {
        content: '';
        width: 36px;
        height: 0.83vh;
        background-image: v-bind(ellipsis);
        background-size: contain;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .all_list {
    position: absolute;
    top: 0;
    right: -320px;
    width: 230px;
    height: 23.33vh;
    background-color: #fff;
    border-radius: 1.67vh;
    border: 0.17vh solid #d9d163;
    padding: 0.83vh 20px;
    padding-right: 2px;
    z-index: 100000;

    .ul {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      // padding-right: 18px;

      .item {
        display: flex;
        align-items: center;

        &:last-child {
          .info_box {
            border-bottom: none;
          }
        }

        .info_box {
          display: flex;
          align-items: center;
          width: 100%;
          margin-right: 20px;
          padding: 0.67vh 0;
          border-bottom: 0.08vh dashed #d9d163;
        }
      }

      .name {
        font-size: 1.83vh;
      }
    }

    .avatar {
      width: 60px;
      height: 5vh;
      border-radius: 50%;
      margin-right: 20px;
    }

    .triangle {
      position: absolute;
      top: 4.17vh;
      left: -30px;
      width: 0;
      height: 0;
      border: 1.25vh solid;
      border-color: transparent #d9d163 transparent transparent;

      &::after {
        content: '';
        position: absolute;
        top: -1.25vh;
        left: -12px;
        width: 0;
        height: 0;
        border: 1.25vh solid;
        border-color: transparent #fff transparent transparent;
      }
    }
  }
}
</style>
