<script setup lang="ts">
const route = useRoute()

const props = defineProps<{ data: any }>()

const score = computed(() => {
  return props.data.reduce((a: any, b: any) => {
    a = b.score + a
    return a
  }, 0)
})

const orderSite = ref(0)

// 点击序号滚动左侧
const handleOrder = (n: number) => {
  const dom: any = document.querySelector(`#site-card${n}`)
  if (dom) {
    orderSite.value = n
    const top = dom.getBoundingClientRect().top + document.documentElement.scrollTop
    window.scrollTo(0, top - 80)
  }
}

// 页面滚动改变序号高亮
window.onscroll = function () {
  const dom: any = document.querySelectorAll('.box-card')
  if (dom) {
    for (let i = 0; i < dom.length; i++) {
      const top = dom[i].getBoundingClientRect().top
      if (top < dom[0].offsetHeight / 2 && top > 0) {
        orderSite.value = i
      }
    }
  }
}

const typeName = computed(() => {
  const name: any = {
    '10': '用户/事件数据',
    '6': '标签管理',
    '7': '群组管理',
    '9': '营销资料管理',
    '8': '用户旅程'
  }
  return name[(route.query?.type as string) || '10']
})
</script>

<template>
  <div class="order-box">
    <div class="order-score">
      <div class="order-score_flex">
        <span class="el-tooltip question-total-number">{{ score }}</span>
        <span class="el-tooltip paper-total-score">/100</span>
        <em>分</em>
      </div>
      <div class="tip">注：每模块满分为100，请注意每题分值。</div>
    </div>
    <div class="order-list">
      <div class="title">{{ typeName }}</div>
      <div class="list">
        <div
          @click="handleOrder(index)"
          :class="orderSite === index ? 'li active' : 'li'"
          v-for="(item, index) in props.data"
          :key="item"
        >
          {{ index + 1 }}
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.order-list {
  .list {
    display: flex;
    flex-wrap: wrap;
    .li {
      border-radius: 50px;
      width: 25px;
      font-size: 14px;
      line-height: 25px;
      text-align: center;
      border: 2px solid #ccc;
      color: #666;
      cursor: pointer;
      margin: 10px 5px;
      &.active {
        color: #c01c40;
        border: 2px solid #c01c40;
      }
    }
  }
}
.order-score_flex {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.order-score {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 20px;
  color: #ccc;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  .question-total-number {
    color: #c01c40;
  }
  em {
    font-size: 14px;
  }
  .tip {
    font-size: 14px;
    padding-top: 20px;
  }
}
</style>
