<script setup lang="ts">
defineProps<{
  tasks: anyObj[]
}>()

import mode1 from '../assets/task-modes/1.png'
import mode2 from '../assets/task-modes/2.png'
import mode3 from '../assets/task-modes/3.png'
</script>

<template>
  <ul>
    <li v-for="task in tasks" :key="task.id" :class="{ task: true, completed: task.completed }">
      <div class="task-status"></div>
      <div class="subject">{{ task.subject }}</div>
      <div class="rest">
        <div
          class="mode"
          :style="{
            '--bg-mode':
              task.mode === '自由学'
                ? `url(${mode1})`
                : task.mode === '精准学'
                  ? `url(${mode2})`
                  : task.mode === '语感'
                    ? `url(${mode3})`
                    : '',
          }"
        >
          <div class="mode-title">{{ task.mode }}</div>
        </div>
        <div class="title">{{ task.title }}</div>
        <div class="time">{{ task.time }}</div>
        <div class="completion-rate">
          <template v-if="task.num > 0"> {{ task.finishedNum }}/{{ task.num }} </template>
          <template v-else> {{ task.completionRate * 100 }}% </template>
        </div>
      </div>
    </li>
  </ul>
</template>

<style scoped lang="scss">
.task-status {
  width: 56px;
}

.task.completed {
  .task-status {
    background: url(http://oss.xuexiaole.com/d/xxl/icon/checkbox_checked.svg?sign=kP6lVM_TS1D9NeclNtwEKqJP6aHsU_mAceCPHF1eVvk=:0)
      center no-repeat;
    width: 56px;
    height: 4.67vh;
    background-size: cover;
  }
}

.task:not(.completed) {
  .task-status:before {
    display: block;
    content: '';
    background: #e5e5e5;
    width: 38px;
    height: 3.17vh;
    border-radius: 50%;
    border: 0.33vh solid #cccccc;
    margin-left: 6px;
  }
}

.subject {
  color: #2d39bc;
  font-family: $font-special, sans-serif;
  font-size: 2.67vh;
  line-height: 4vh;
  background: url(../assets/report/subject-bg.svg) center no-repeat;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
  border-radius: 1.67vh;
  overflow: hidden;

  width: 208px;
  flex-shrink: 0;
  height: 6.67vh;
  display: flex;
  align-items: center;
  justify-content: center;

  .completed & {
    background: url(../assets/report/subject-bg-completed.svg) center no-repeat;
    color: #a13c00;
  }
}

.time {
  color: $font-color;
  font-size: 2.33vh;
  line-height: 3.5vh;
  padding: 0 24px;
  white-space: nowrap;
}

.title {
  flex-grow: 1;
  color: $font-color;
  font-size: 2.33vh;
  line-height: 3.5vh;
  padding: 1vh 0;
}

.mode {
  width: 156px;
  flex-shrink: 0;
  pointer-events: none;

  &:before {
    background: url(../assets/report/task-heart.svg) center no-repeat;
    background-size: cover;
    border-radius: 1.67vh 0 0;
    width: 158px;
    height: 3.5vh;
    content: '';
    position: absolute;
    top: 0;

    .completed & {
      background-image: url(../assets/report/task-heart-completed.svg);
    }
  }

  &:after {
    content: '';
    background: var(--bg-mode) center no-repeat;
    background-size: 100%;
    width: 87px;
    height: 7.25vh;
    position: absolute;
    left: 30px;
    top: -3.67vh;
  }
}

.mode-title {
  width: 108px;
  height: 3.17vh;
  border-radius: 2.67vh;
  border: 0.17vh solid #52eeff;
  background: $font-color;
  box-shadow: 0 0.17vh 0.17vh 0 rgba(0, 0, 0, 0.25);
  left: 20px;
  top: 2.75vh;

  color: #fff;
  text-align: center;
  font-family: $font-special, sans-serif;
  font-size: 2vh;
  line-height: 2.83vh;
  position: absolute;
  z-index: 1;

  .completed & {
    border-color: #ffd452;
  }
}

.completion-rate {
  border-radius: 0 1.67vh 1.67vh 0;
  background: #90fcf7;

  width: 136px;
  flex-shrink: 0;
  color: $font-color;
  font-family: $font-special, sans-serif;
  font-size: 2.33vh;
  line-height: 3.5vh;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center;

  .completed & {
    background: #fee291;
  }
}

.task {
  position: relative;
  display: flex;
  column-gap: 24px;

  + .task {
    margin-top: 5vh;
  }
}

.rest {
  flex-grow: 1;
  display: flex;
  align-items: center;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
  background: #fff;
  border-radius: 1.67vh;
}
</style>
