<script setup lang="ts">
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
defineProps<{
  list?: any
}>()
const changeFlagConfig: anyObj = {
  '-1': 'arrow_down',
  '0': 'arrow_flat',
  '1': 'arrow_up',
}
const masteryDegreeConfig: anyObj = {
  0: {
    label: '待点亮',
    color: '#BC2D37',
  },
  1: {
    label: '陌生',
    color: '#A13C00',
  },
  2: {
    label: '熟悉',
    color: '#2D39BC',
  },
  3: {
    label: '已掌握',
    color: '#2F8A5B',
  },
}
</script>
<template>
  <div v-if="list?.length" class="knowledge-list">
    <div v-for="(i, idx) in list" :key="i.id" class="knowledge-list-item">
      <div class="knowledge-list-item-icon">
        <Icon :name="changeFlagConfig[String(i.changeFlag)]" width="32"></Icon>
      </div>
      <div class="knowledge-list-item-name">{{ i.userKnowledge.knowledgeName }}</div>
      <div
        class="knowledge-list-item-degree"
        :style="{ color: masteryDegreeConfig[i.userKnowledge.masteryDegree]?.color }"
      >
        {{ masteryDegreeConfig[i.userKnowledge.masteryDegree]?.label }}
      </div>
      <svg v-if="idx < list.length - 1" class="x-svg px-svg">
        <path class="px-path" d="M0 1L1000000 1" stroke="#DEEDFC" />
      </svg>
    </div>
    <svg class="y-svg left px-svg">
      <path d="M0 10000L1.00003 6.67572e-06" />
    </svg>
    <svg class="y-svg right px-svg">
      <path d="M0 10000L1.00003 6.67572e-06" />
    </svg>
  </div>
</template>
<style scoped lang="scss">
.knowledge-list {
  margin-top: 2vh;
  box-sizing: border-box;
  background-color: #fff;
  position: relative;
  svg {
    stroke: #deedfc;
    &.px-svg {
      path {
        stroke-width: 2px;
        stroke-dasharray: 8px 8px;
      }
    }
    &.y-svg {
      position: absolute;
      top: 0;
      height: 100%;
      &.px-svg {
        width: 2px;
      }
      &.left {
        left: 96px;
      }
      &.right {
        right: 160px;
      }
    }
  }
  &-item {
    display: flex;
    align-items: center;
    color: $font-color;
    font-family: OPPOSans;
    font-size: 2.33vh;
    line-height: 0.12vh;
    height: 7.5vh;
    position: relative;
    width: 100%;
    &-icon {
      width: 96px;
      text-align: center;
    }
    &-degree {
      width: 160px;
      text-align: center;
      line-height: 7.5vh;
    }
    &-name {
      width: calc(100% - 256px);
      line-height: 7.5vh;
      padding-left: 24px;
      @include single_ellipsis;
    }
    svg {
      position: absolute;
      &.x-svg {
        bottom: 0;
        left: 0;
        width: 100%;
        &.px-svg {
          height: 0.17vh;
        }
      }
    }
  }
}
</style>
