<script setup lang="ts">
import LoadIcon from '@/page/system/mailbox/components/LoadIcon.vue'
import homeWorkApi from '@/api/system/homeWork'
import { debounce } from '@/hooks'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { $XXL } from '@/utils'

const router = useRouter()

const OSS_URL = import.meta.env.VITE_OSS_URL

// 作业科目列表
const classList = ref<any[]>([])
async function getClassList() {
  const { data: res } = await homeWorkApi.getSubjectList({ statusList: [0] })
  if (res.code === 200) {
    classList.value = res.data.map((i: anyObj) => ({ ...i, warning: true }))
  }
}

// 当前选中的科目
const activeClass = ref('')
async function handleSelectClass(_item: any) {
  jobList.value = []
  await getJobList()
  handleSelectJob(jobList.value[0])
}

// 作业列表
const jobList = ref<any[]>([])
const listLoading = ref(false)
const page = reactive({
  pageSize: 10,
  pageNum: 1,
  total: -1,
})
async function getJobList() {
  try {
    listLoading.value = true
    const res = await homeWorkApi.getJobList({
      statusList: [0],
      ...page,
      subjectId: activeClass.value,
    })
    jobList.value.push(...res.rows)
    page.total = res.total
  } finally {
    listLoading.value = false
  }
}

const bookSidebarRef = ref()
async function handleScroll(event: any) {
  if (jobList.value.length >= page.total) return
  if (listLoading.value) return
  if (
    event.target.scrollTop + event.target.offsetHeight >=
    bookSidebarRef.value?.offsetHeight - 50
  ) {
    page.pageNum++
    try {
      await getJobList()
    } catch {
      page.pageNum--
    }
  }
}

const debounceScroll = debounce(handleScroll, 200, false)

// 当前作业
const jobData = ref<any>({})

function handleSelectJob(item: any) {
  jobData.value = item
}

const pageLoading = ref(false)
const pageError = ref(false)

onActivated(async () => {
  pageLoading.value = true
  listLoading.value = true
  jobList.value = []
  page.pageNum = 1
  $XXL.setScreenOn(1)
  try {
    await getClassList()
    if (classList.value.length) {
      if (classList.value.every(i => i.id !== activeClass.value)) {
        activeClass.value = classList.value[0]?.id
      }
      await getJobList()
      handleSelectJob(jobList.value[0])
    }
  } catch {
    pageError.value = true
  } finally {
    pageLoading.value = false
    listLoading.value = false
  }
})

function to(url: string) {
  router.push(url)
}
</script>
<template>
  <div
    class="uncomplete"
    :style="{
      'background-image': `url(${OSS_URL}/urm/mail_bg.svg)`,
    }"
  >
    <div
      class="book"
      :style="{
        'background-image': `url(${OSS_URL}/urm/book_bg.svg)`,
      }"
    >
      <template v-if="jobList.length">
        <div class="book-sidebar-box">
          <div class="book-sidebar hidden_scroll" @scroll="debounceScroll">
            <div ref="bookSidebarRef" class="scroll-box">
              <div
                v-for="i in jobList"
                :key="i.id"
                :class="{
                  'book-sidebar-item': true,
                  pointer: true,
                  active: jobData.id === i.id,
                }"
                :style="{
                  'background-image':
                    jobData.id === i.id
                      ? `url(${OSS_URL}/urm/mailbox_sidebar_active_bg.svg)`
                      : i.readStatus
                        ? `url(${OSS_URL}/urm/mailbox_sidebar_ready_bg.svg)`
                        : `url(${OSS_URL}/urm/mailbox_sidebar_bg.svg)`,
                }"
                @click="handleSelectJob(i)"
              >
                <!-- <div class="icon"></div> -->
                <Icon
                  :name="jobData.id === i.id ? 'homeWork_job-item-active' : 'homeWork_job-item'"
                  class="icon"
                  width="84"
                ></Icon>
                <div class="info">
                  <div class="info-title">{{ i.name }}</div>
                  <div class="info-time">
                    {{ dayjs(i.createTime).format('YYYY/MM/DD&nbsp;&nbsp;&nbsp;HH:mm') }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <LoadIcon v-if="listLoading" style="margin-top: 0"></LoadIcon>
        </div>
        <div class="book-main">
          <div class="info flex-end">
            <div class="info-title">{{ jobData.name }}</div>
            <div class="info-time">
              发布日期：
              {{ dayjs(jobData.createTime).format('YYYY/MM/DD&nbsp;&nbsp;&nbsp;HH:mm') }}
            </div>
          </div>
          <div class="info center">
            <div class="info-name">
              <span style="color: #999">来自：</span>{{ jobData.teacherName }}
            </div>
            <div class="info-time">
              截止日期：
              {{ dayjs(jobData.submitEndTime).format('YYYY/MM/DD&nbsp;&nbsp;&nbsp;HH:mm') }}
            </div>
          </div>
          <div class="content">{{ jobData.content }}</div>
          <div class="tab">
            <div
              class="tab-icon"
              :style="{
                'background-image': `url(${OSS_URL}/urm/homeWork/tab.svg)`,
              }"
            >
              <Icon class="icon" name="homeWork_paper" width="32"></Icon>
              组卷
            </div>
          </div>
          <div class="content paper">{{ jobData.paperName }}</div>
          <div class="btn-box">
            <mj-button
              width="386"
              height="108"
              size="48"
              :type="jobData.currentTitleId ? 'success' : 'primary'"
              @click="to(`/system/homeWork/doWork?id=${jobData.id}&reportFlag=${0}`)"
            >
              {{ jobData.currentTitleId ? '继续答题' : '开始答题' }}
            </mj-button>
          </div>
        </div>
      </template>
      <Empty
        v-else
        class="empty"
        :type="listLoading ? 'loading' : 'task'"
        content="还没有作业哦～"
      ></Empty>
    </div>
    <div class="top">
      <BackBar leftText="作业" />
      <div class="top-history">
        <mj-button type="success" tilt @click="to(`/system/homeWork/statistics`)"
          >统计分析</mj-button
        >
        <mj-button
          type="success"
          tilt
          @click="to(`/system/homeWork/wrong?subjectId=${activeClass}`)"
          >错题本</mj-button
        >
        <!-- <Icon
          name="homeWork_temporary"
          width="120"
          class="pointer"
          @click="to(`/system/homeWork/temporary`)"
        ></Icon> -->
        <Icon
          name="homeWork_hisJob"
          width="120"
          class="pointer"
          @click="to(`/system/homeWork/history`)"
        ></Icon>
      </div>
    </div>
    <div v-if="classList.length" class="main">
      <div class="main-sidebar">
        <Sidebar
          v-model="activeClass"
          :config="classList"
          :prop="{ name: 'subject' }"
          @handle-change="handleSelectClass"
        ></Sidebar>
      </div>
    </div>
    <Empty
      v-else
      class="empty"
      :type="pageLoading ? 'loading' : 'task'"
      content="还没有作业哦～"
    ></Empty>
  </div>
</template>
<style scoped lang="scss">
.uncomplete {
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;

  .book {
    box-sizing: border-box;
    position: fixed;
    width: 133.5vh;
    height: 94vh;
    left: 300px;
    top: 6.67vh;
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% 100%;
    padding: 10vh 11.67vh 6.33vh 9vh;
    display: flex;
    z-index: 2;
    &-sidebar {
      width: 36.67vh;
      height: 100%;
      flex-shrink: 0;
      &-item {
        padding: 0.83vh;
        display: flex;
        height: 9.67vh;
        flex-shrink: 0;
        margin-bottom: 1.33vh;
        background-color: #fff;
        box-shadow: 0 0.33vh 0.17vh 0 rgba(0, 0, 0, 0.15);
        background-repeat: no-repeat;
        background-position: 26.17vh center;
        background-size: 11.17vh, 13vh;
        border: 0.5vh solid transparent;

        &.unready {
          background-color: #dcdff5;
        }
        &.active {
          background-color: #fff;
          border-color: rgb(255, 240, 31);
          // background-position:
          //     center,
          //     314px center;
          // background-size: 100%, 134px, 156px;
        }
        &:last-child {
          margin-bottom: 0;
        }
        .icon {
          width: 7vh;
          height: 7vh;
          flex-shrink: 0;
          background: #1c2a3a;
          margin-right: 1.33vh;
          border-radius: 50%;
        }

        .info {
          width: calc(100% - 8.33vh);
          &-title {
            color: $font-color;
            font-family: $font-text;
            font-size: 2.67vh;
            font-style: normal;
            font-weight: 400;
            line-height: 4vh; /* 150% */
            @include single_ellipsis;
          }

          &-time {
            font-size: 2vh;
          }
        }
      }
    }
    &-main {
      margin-left: 5.83vh;
      padding-top: 1.33vh;
      width: calc(100% - 3.33vh);
      .info {
        padding: 1.33vh 0;
        display: flex;
        justify-content: space-between;

        &.flex-end {
          align-items: end;
          border-bottom: 0.17vh solid rgba(0, 0, 0, 0.45);
        }
        &.center {
          align-items: center;
          border-bottom: 0.08vh solid rgba(0, 0, 0, 0.45);
        }
        &-title {
          color: $font-color;
          font-family: $font-special;
          font-size: 2.67vh;
          font-style: normal;
          font-weight: 400;
          line-height: 1.5;
          width: 41.67vh;
          margin-right: 1vh;
          @include single_ellipsis;
        }
        &-name {
          color: #999;
          font-family: 'PingFang SC';
          font-size: 2.67vh;
          font-style: normal;
          font-weight: 400;
          line-height: 1.2;
          // width: calc(100% - 400px);
          width: 41.67vh;
          margin-right: 1vh;
          @include single_ellipsis;
        }
        &-time {
          font-size: 2vh;

          line-height: 3vh; /* 150% */
          @include single_ellipsis;
        }
      }
      .content {
        color: #333;
        font-family: $font-text;
        font-size: 2.67vh;
        font-style: normal;
        font-weight: 400;
        line-height: 4vh; /* 150% */
        margin: 2.67vh 0;
        text-indent: 2em;
        height: 20vh;
        // @include multiple_ellipsis(5);
        @include hidden_scroll;
        &.paper {
          height: 8vh;
          @include multiple_ellipsis(2);
        }
      }
      .tab {
        // padding-top: 32px;
        &-icon {
          box-sizing: border-box;
          width: 19vh;
          height: 4.33vh;
          background-position: top left;
          background-repeat: no-repeat;
          background-size: 100%;
          padding: 0.17vh 0 0.17vh 4.67vh;
          color: $font-color;
          font-family: 'PingFang SC';
          font-size: 2.67vh;
          font-style: normal;
          font-weight: 500;
          line-height: 4vh; /* 150% */
          display: flex;
          align-items: center;
          .icon {
            // width: 32px;
            // height: 32px;
            margin-right: 1.33vh;
          }
        }
      }
      .btn-box {
        box-sizing: border-box;
        padding-top: 1.33vh;
        display: flex;
        justify-content: flex-end;

        .x-button {
          font-family: $font-text;
        }
      }
      .btn {
        box-sizing: border-box;
        padding-top: 1.5vh;
        width: 32.17vh;
        height: 9vh;
        flex-shrink: 0;
        border-radius: 5vh;
        background-size: 100%;
        box-shadow: 0 0.5vh 0.17vh 0 rgba(0, 0, 0, 0.25);
        text-align: center;
        color: $font-color;
        text-align: center;
        font-family: $font-text;
        font-size: 4vh;
        font-style: normal;
        font-weight: 400;
        line-height: 6vh; /* 150% */
      }
    }
    .empty {
      height: 100%;
    }
  }

  .top {
    padding: 3vh 5.33vh 0;
  }
  .top-history {
    z-index: 2;
    position: absolute;
    top: 1.67vh;
    right: 64px;
    display: flex;
    align-items: center;
    .mj-button {
      margin: 0 16px 0.67vh;
      font-family: $font-text;
    }
    .x-icon {
      margin-left: 16px;
    }
  }

  .main {
    height: calc(100% - 13vh);
    padding-left: 64px;
    padding-right: 20px;
    position: relative;
    &-sidebar {
      position: absolute;
      left: 64px;
      top: 1vh;
      height: calc(100% - 2.5vh);
      width: 22.92vh;
    }
  }
  .empty {
    height: calc(100% - 25vh);
  }
}
.info-time {
  color: #999;
  font-family: 'PingFang SC';
  font-size: 1.67vh;
  font-style: normal;
  font-weight: 400;
  line-height: 2.5vh; /* 150% */
  margin-top: 0.5vh;
  span {
    margin-right: 24px;
  }
}
</style>
