<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { subjectStore } from '@/stores'
import Card from '@/page/subject/components/Card.vue'
import subjectApi from '@/api/subject/subject'
import { debounce } from '@/hooks'
import MapRegion from '../components/MapRegion.vue'
import RoundSplit from '@/page/subject/freeStudy/views/textbookDetail/RoundSplit.vue'

const { subject, difficulty } = toRefs(subjectStore())

const route = useRoute()
const router = useRouter()

let subjectId = route.params.subjectId

const data = ref<anyObj>({})
const loading = ref(false)
async function init() {
  loading.value = true
  data.value.knowledgeTreeNodeList = []
  try {
    const { data: res } = await subjectApi.getSujectKnowledgeStatistics({ subjectId })
    data.value = res?.data
  } catch {}
  loading.value = false
}

onActivated(() => {
  subjectId = route.params.subjectId
  init()
})

function handleStart() {
  router.push({
    path: '/subject/doWork',
    query: { resourceType: 1, num: 10, subjectId, difficulty: difficulty.value },
  })
}

const debounceStart = debounce(handleStart, 500)
</script>
<template>
  <div class="ai-study">
    <div class="top">
      <BackBar :leftText="`【${subject.name}】AI精准学`" />
    </div>
    <div class="main">
      <board-bg class="main-left">
        <div class="main-left-box">
          <div class="totalTrainNum">全部知识点：{{ data.totalNum || 0 }}</div>
          <div class="total-detail">
            <Card
              type="error"
              width="295"
              height="174"
              title="待点亮"
              :text="data.unlitNum || 0"
            ></Card>
            <Card
              type="warning"
              width="295"
              height="174"
              title="陌生"
              :text="data.unknowNum || 0"
            ></Card>
            <Card
              type="primary"
              width="295"
              height="174"
              title="熟悉"
              :text="data.knowNum || 0"
            ></Card>
            <Card
              type="success"
              width="295"
              height="174"
              title="已掌握"
              :text="data.masteredNum || 0"
            ></Card>
          </div>
          <div class="totalTrainToday">
            <div style="margin-bottom: 16px">
              今日训练：<span class="tip">{{ data.todayTrainNum || 0 }}</span>
              次
            </div>
            <div>
              累计训练：<span class="tip">{{ data.totalTrainNum || 0 }}</span>
              次
            </div>
          </div>
        </div>
      </board-bg>
      <div class="main-right">
        <div class="main-right-title">
          我的知识图谱
          <DifficultyStart v-model="difficulty"></DifficultyStart>
        </div>
        <RoundSplit></RoundSplit>
        <div class="main-right-box">
          <div class="main-right-content">
            <div class="map-region-box">
              <MapRegion :data="data.knowledgeTreeNodeList || []"></MapRegion>
              <div v-if="!data?.knowledgeTreeNodeList?.length" class="empty-box">
                <Empty center :type="loading ? 'loading' : 'knowledge'"></Empty>
              </div>
            </div>
            <div class="btn-box">
              <mj-button type="warn" width="386" height="108" size="48" @click="debounceStart">
                开始训练
              </mj-button>
              <!-- <div class="tip-text">每次训练10道题</div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
$num_border: 0.67vh dashed #94c8f7;
.ai-study {
  @include main_bg;
  position: relative;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 1.5;
  position: relative;
  // @include hidden_scroll;
  .top {
    padding: 2.67vh $space-6 0;

    // margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .main {
    margin: 0 $space-6;
    background-size: 100%;
    height: calc(100% - 9.17vh);
    display: flex;
    &-left {
      width: 736px;
      height: 85.33vh;
      background-size: 100%;
      margin-right: 24px;
      margin-top: 2.67vh;
      padding: 7.33vh 24px 2vh;
      &-box {
        width: 100%;
        padding: 0 16px;
      }
      .totalTrainNum {
        width: calc(100% - 32px);
        height: 13vh;
        text-align: center;
        line-height: 11.67vh;
        color: $font-color;
        font-family: $font-special;
        font-size: 3.33vh;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin: 0 16px 2.67vh;
        border: $num_border;
        border-radius: 1.67vh;
      }
      .total-detail {
        display: flex;
        flex-wrap: wrap;

        .xxl-card {
          flex-shrink: 0;
          margin: 1vh 16px;
        }
      }
      .totalTrainToday {
        border: $num_border;
        border-radius: 1.67vh;
        height: 21.33vh;
        width: calc(100% - 32px);
        margin: 0 16px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        margin-top: 2.67vh;
        color: $font-color;
        font-family: $font-special;
        font-size: 3.33vh;
        line-height: 6vh;
        padding: 3.33vh;
        .tip {
          font-size: 4vh;
          color: #99d609;
        }
      }
    }
    &-right {
      flex: 1;
      margin-top: 1.5vh;
      position: relative;
      &-title {
        height: 8.5vh;
        border-radius: 1.67vh;
        padding: 0 32px;
        background: linear-gradient(269deg, #e3e3ff 2.25%, #ded3fb 51.93%, #c0c7f7 99.65%);
        line-height: 8.5vh;
        color: $font-color;
        font-family: $font-special;
        font-size: 3vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .round-split {
        position: absolute;
        width: calc(100% - 50px);
        left: 50%;
        transform: translate(-50%);
        z-index: 12;
        top: 8vh;
        :deep(.dot) {
          background: linear-gradient(180deg, #8d98a9 0%, #b5c2d8 100%);
        }
      }
      &-box {
        box-sizing: border-box;
        width: 100%;
        height: 77.5vh;
        padding: 1.17vh 8px 0.67vh;
        // padding: 8px;
        // background: #d4d9eb;
        background: linear-gradient(
          180deg,
          rgba(241, 234, 250, 0.35) 65.59%,
          rgba(241, 241, 250, 0.35) 100%
        );
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
        border-radius: 1.33vh;
      }
      &-content {
        box-sizing: border-box;
        border-radius: 1.33vh;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #fafafa 0%, #f4f0fa 100%);
        .map-region-box {
          height: calc(100% - 12.5vh);
          position: relative;
          @include hidden_scroll;
          .empty-box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, #fafafa 0%, #f4f0fa 100%);
          }
        }
        .btn-box {
          text-align: center;
          margin-top: 1.33vh;
          .tip-text {
            color: #666;
            text-align: center;
            font-family: OPPOSans;
            font-size: 2vh;
            margin-top: 1vh;
          }
        }
      }
    }
  }
}
</style>
