<script setup lang="ts">
import subjectApi from '@/api/subject/subject'
import { useRoute } from 'vue-router'
// import KnowledgeCard from './KnowledgeCard.vue';
import KnowledgeVideo from './KnowledgeVideo.vue'
import TrainRecord from './TrainRecord.vue'

const route = useRoute()
// const router = useRouter();
const knowledgeId = ref(route.params.knowledgeId)
let businessFlag: string[] = (route.query.businessFlag as string)?.split(',') || []
const select = ref(2)
const selectConfig = ref<anyObj[]>([{ value: 2, label: '知识点同步练习' }])

const componentName = computed(() => {
  if (select.value === 1) {
    return KnowledgeVideo
  } else if (select.value === 2) {
    return TrainRecord
  } else {
    // return KnowledgeCard;
    return ''
  }
})

const videoList = ref<anyObj[]>([])

const loading = ref(false)
async function getVideos() {
  loading.value = true
  try {
    const {
      data: { data: res },
    } = await subjectApi.getSubjectKnowledgeVideos({
      size: -1,
      knowledgeId: knowledgeId.value,
    })
    videoList.value = res.rows || []
    if (videoList.value.length > 0) {
      selectConfig.value = [{ value: 1, label: '知识点微课' }]
      if (businessFlag.includes('1')) {
        selectConfig.value.push({ value: 2, label: '知识点同步练习' })
      }
      select.value = 1
    } else {
      selectConfig.value = [{ value: 2, label: '知识点同步练习' }]
      select.value = 2
    }
  } catch (err) {
    console.log(err)
  } finally {
    loading.value = false
  }
}

// (() => {
//     getVideos();
// })();

watch(
  knowledgeId,
  () => {
    getVideos()
  },
  { immediate: true },
)

onActivated(() => {
  knowledgeId.value = route.params.knowledgeId
  businessFlag = (route.query.businessFlag as string)?.split(',') || []
  // select.value = (route.meta?.select as number) || selectConfig.value[0].value;
})

function onPause(idx: number, duration: number) {
  videoList.value[idx] && (videoList.value[idx].playDuration = duration)
}
</script>
<template>
  <div class="free-study">
    <div class="top">
      <BackBar />
    </div>
    <div class="main">
      <div v-if="!loading" class="box">
        <div class="top-select">
          <SelectTab v-model="select" :dataList="selectConfig"></SelectTab>
        </div>
        <div class="box-main">
          <KeepAlive>
            <component
              :is="componentName"
              :select="select"
              :videoList="videoList"
              @onPause="onPause"
            ></component>
          </KeepAlive>
        </div>
      </div>
      <div v-else class="box">
        <Empty type="loading"></Empty>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.free-study {
  position: relative;
  width: 100vw;
  height: 100%;
  // overflow: hidden;
  box-sizing: border-box;
  line-height: 1.5;
  @include main_bg;
  @include hidden_scroll;
  .top {
    // padding: 32px 64px 0;
    position: absolute;
    top: 2.67vh;
    left: 64px;
    z-index: 1;
    // margin-bottom: 24px;
  }
  .main {
    // position: absolute;
    // top: 0;
    // left: 0;
    width: 100%;
    height: 100%;
  }
}
.box {
  width: 100%;
  height: 100%;
  padding-top: 4vh;
  .top-select {
    width: 1172px;
    height: 4.83vh;
    margin: 0 auto 4vh;

    :deep(.select-list) {
      .data-item {
        flex: 1;
      }
      .data-item.active {
        background: linear-gradient(269deg, #86e6ff 2.25%, #9effda 51.93%, #5fdcfd 99.65%);
        backdrop-filter: blur(3px);
      }
    }
  }
  &-main {
    width: 1794px;
    height: 85.33vh;

    margin: 0 auto 0;
  }
}
</style>
