<script setup lang="ts">
import homeWorkApi from '@/api/system/homeWork'
import { useRouter } from 'vue-router'

const props = defineProps<{
  params: anyObj
  isDeadline: boolean
}>()

const router = useRouter()

const list = ref<anyObj>([])
async function getData() {
  const { data } = await homeWorkApi.getJobTittle({ ...props.params, reportFlag: 1 })
  list.value = data.tjobStuVoList
}

function toWorkDetail(idx: string) {
  const query: anyObj = {
    reportFlag: 1,
    idx,
    ...props.params,
  }

  router.push({
    path: `/system/homeWork/doWork`,
    query,
  })
}

const pageLoading = ref(false)
onMounted(async () => {
  pageLoading.value = true
  try {
    await getData()
  } catch {}
  pageLoading.value = false
})
</script>
<template>
  <div class="detail">
    <div v-if="list.length" class="detail-main">
      <div class="detail-main-title">答题情况</div>
      <div class="detail-main-list">
        <div
          v-for="(i, idx) in list"
          :key="i.jobId"
          :class="{
            'detail-main-list-item': true,
            pointer: true,
            success: isDeadline && i.titleStatus === 3 && i.markFlag,
            error: isDeadline && i.titleStatus === 3 && !i.markFlag,
          }"
          @click="toWorkDetail(idx)"
        >
          {{ idx + 1 }}
        </div>
      </div>
    </div>
    <Empty v-else class="empty" :type="pageLoading ? 'loading' : 'network'"></Empty>
  </div>
</template>
<style scoped lang="scss">
.detail {
  width: 100%;
  height: 100%;
  line-height: 1.5;

  &-main {
    border-radius: 3.33vh;
    border: 0.67vh solid #fff;
    background: linear-gradient(179deg, #fdfdf9 0.69%, #dfebf7 99.53%);
    box-shadow: 0 0.33vh 0.67vh 0 rgba(0, 0, 0, 0.25);
    height: 100%;
    &-title {
      color: $font-color;
      font-family: $font-special;
      font-size: 4vh;
      margin: 3.33vh 0;
      text-align: center;
    }
    &-list {
      overflow-y: auto;
      display: grid;
      grid-template-columns: repeat(7, 160px);
      grid-template-rows: 160px;
      grid-auto-rows: 160px;
      gap: 40px;
      justify-content: center;
      height: calc(100% - 160px);
      &-item {
        border-radius: 1vh;
        border: 0.33vh solid #9fa5aa;
        background: #e4e9ec;
        text-align: center;
        line-height: 13.33vh;
        color: #666;
        font-family: $font-special;
        font-size: 4vh;
        font-style: normal;
        font-weight: 400;
        &.success {
          color: #8fcc00;
          background-color: #ddff8c;
          border-color: #8fcc00;
        }
        &.error {
          color: #f00a0a;
          background-color: #febebf;
          border-color: #f00a0a;
        }
      }
    }
  }
}
</style>
