<!--
* @FileDescription: 管乐迷课表
* @Author: 黄琪勇
* @Date:2024-03-29 17:31:26
-->
<template>
   <div class="curriculum_gym">
      <div class="head">
         <div class="timeBox">
            <img class="timeImg" src="@/img/curriculum/sj.png" />
            <div class="time">{{ classData.classDate && format(classData.classDate) }}</div>
         </div>
         <div class="operateBox">
            <template v-if="classData.status === 'UNDERWAY' && !classData.coursewareDetailId && props.classData.teachMode !== 'ONLINE'">
               <img class="dangerImg" src="@/img/curriculum/jg.png" />
               <div class="operateBtn" @click="handleSetUpCourseware(classData.id)">配置课件</div>
            </template>
            <template v-else-if="classData.status === 'NOT_START'">
               <div class="noStart">未开始</div>
            </template>
            <template v-else-if="classData.status === 'UNDERWAY'">
               <div class="ing">进行中</div>
            </template>
            <template v-else>
               <div class="end">已结束</div>
            </template>
         </div>
      </div>
      <div class="timeTitBox">
         {{ classData.startClassTime && format(classData.startClassTime, "hh:ii") }}-{{
            classData.endClassTime && format(classData.endClassTime, "hh:ii")
         }}
      </div>
      <div class="classNameBox">
         <img class="xxImg" :src="classData.teachMode === 'ONLINE' ? require('@/img/curriculum/xs.png') : require('@/img/curriculum/xx.png')" />
         <img class="typeImg" :src="require(`@/img/curriculum/${classImgType[classData.type as keyof typeof classImgType]}.png`)" />
         <div class="className">
            <ellipsisScroll :title="`${classNameType[classData.type as keyof typeof classNameType]}·${classData.name}`" />
         </div>
      </div>
      <div class="addressCon">
         <div class="adressBox">
            <div>上课地点：</div>
            <div class="adress">
               <ellipsisScroll :title="classData.teachMode === 'ONLINE' ? '网络教室' : classData.schoolName" />
            </div>
         </div>
         <div class="adressBox">
            <div>上课学生：</div>
            <div class="adress">
               <ellipsisScroll :title="classData.studentNames" />
            </div>
         </div>
      </div>
      <div class="stateBox">
         <div>
            <img
               :src="
                  classData.signInStatusEnum === 1
                     ? require('@/img/curriculum/qd1.png')
                     : classData.signInStatusEnum === 0
                     ? require('@/img/curriculum/qd2.png')
                     : require('@/img/curriculum/qd.png')
               "
            />
            <div :class="[classData.signInStatusEnum === 1 ? 'signIn' : classData.signInStatusEnum === 0 && 'abnormalSignIn']">
               {{ classData.signInStatusEnum === 1 ? "正常签到" : classData.signInStatusEnum === 0 ? "异常签到" : "未签到" }}
            </div>
         </div>
         <div>
            <img
               :src="
                  classData.signOutStatusEnum === 1
                     ? require('@/img/curriculum/qt1.png')
                     : classData.signOutStatusEnum === 0
                     ? require('@/img/curriculum/qt2.png')
                     : require('@/img/curriculum/qt.png')
               "
            />
            <div :class="[classData.signOutStatusEnum === 1 ? 'signOut' : classData.signOutStatusEnum === 0 && 'abnormalSignOut']">
               {{ classData.signOutStatusEnum === 1 ? "正常签退" : classData.signOutStatusEnum === 0 ? "异常签退" : "未签退" }}
            </div>
         </div>
      </div>
      <div class="btnCon">
         <div class="btnDetail" @click="handleClickDetail(classData.id, classData.coursewareEnable)">查看详情</div>
         <div class="btnGoClass" v-if="classData.status === 'UNDERWAY'" @click="handleStartClass(classData.id)">开始上课</div>
      </div>
   </div>
</template>

<script setup lang="ts">
import useDialogConfirm from "@/hooks/useDialogConfirm"
import { format } from "@/libs/tools"
import { useCurriculumDetail, useSetUpCourseware } from "@/views/curriculum"
import { handleStartClass_gym, isONLINE_gym } from "@/views/curriculum/hooks/useStartClass"
import { classImgType, classNameType } from "@/views/curriculum/type"

const props = defineProps<{
   classData: Record<string, any>
}>()
const emits = defineEmits<{
   (e: "update"): void
}>()

// 开始上课
function handleStartClass(id: string) {
   if (isONLINE_gym(props.classData.teachMode)) {
      return
   }
   handleStartClass_gym(id)
}

//查看详情
function handleClickDetail(id: string, coursewareEnable: boolean) {
   if (isONLINE_gym(props.classData.teachMode)) {
      return
   }
   if (!coursewareEnable) {
      useDialogConfirm({
         headImg: require("@/img/curriculum/ts4.png"),
         text: `该资源已失效`,
         btnShow: [true]
      })
      return
   }
   useCurriculumDetail(id)
}
// 配置课表
function handleSetUpCourseware(id: string) {
   if (isONLINE_gym(props.classData.teachMode)) {
      return
   }
   useSetUpCourseware(id, () => {
      emits("update")
   })
}
</script>

<style lang="scss" scoped>
.curriculum_gym {
   padding: 0 30px;
   .head {
      padding-top: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .timeBox {
         display: flex;
         align-items: center;
         .timeImg {
            width: 28px;
            height: 28px;
         }
         .time {
            margin-left: 8px;
            font-weight: 500;
            font-size: 24px;
            color: #777777;
         }
      }
      .operateBox {
         display: flex;
         align-items: center;
         .dangerImg {
            width: 24px;
            height: 24px;
         }
         .operateBtn {
            margin-left: 10px;
            font-weight: 500;
            font-size: 24px;
            color: #f44541;
            cursor: pointer;
            &:hover {
               opacity: $opacity-hover;
            }
         }
         .noStart {
            font-weight: 500;
            font-size: 24px;
            color: #777777;
         }
         .ing {
            font-weight: 500;
            font-size: 24px;
            color: #f67146;
         }
         .end {
            font-weight: 500;
            font-size: 24px;
            color: #aaaaaa;
         }
      }
   }
   .timeTitBox {
      text-align: center;
      margin-top: 68px;
      font-family: DINAlternate, DINAlternate;
      font-weight: bold;
      font-size: 52px;
      color: #f67146;
   }
   .classNameBox {
      margin-top: 46px;
      width: 100%;
      display: flex;
      align-items: center;
      .xxImg {
         flex-shrink: 0;
         width: 46px;
         height: 24px;
      }
      .typeImg {
         flex-shrink: 0;
         margin-left: 6px;
         width: 55px;
         height: 24px;
      }
      .className {
         flex-grow: 1;
         overflow: hidden;
         margin-left: 6px;
         font-weight: 600;
         font-size: 24px;
         color: #333333;
      }
   }
   .addressCon {
      margin-top: 16px;
      width: 100%;
      & > div {
         font-weight: 500;
         font-size: 18px;
         color: #777777;
      }
      & > div:nth-child(2) {
         margin-top: 14px;
      }
      .adressBox {
         display: flex;
         align-items: center;
         & > div:nth-child(1) {
            flex-shrink: 0;
         }
         .adress {
            overflow: hidden;
         }
      }
   }
   .stateBox {
      margin-top: 48px;
      display: flex;
      justify-content: space-between;
      & > div {
         width: 216px;
         height: 65px;
         background: #f2f2f2;
         border-radius: 18px;
         display: flex;
         justify-content: center;
         align-items: center;
         & > img {
            width: 27px;
            height: 27px;
         }
         & > div {
            margin-left: 6px;
            font-weight: 500;
            font-size: 22px;
            color: #aaaaaa;
            &.signIn,
            &.signOut {
               color: #01c199;
            }
            &.abnormalSignIn,
            &.abnormalSignOut {
               color: #ff0000;
            }
         }
      }
   }
   .btnCon {
      margin-top: 58px;
      display: flex;
      .btnGoClass,
      .btnDetail {
         flex-grow: 1;
         height: 74px;
         background: linear-gradient(180deg, #ffffff 0%, #ffdbc1 100%);
         box-shadow: 4px 5px 0px 0px rgba(236, 102, 52, 0.45), inset 0px -7px 3px 0px rgba(254, 163, 138, 0.46);
         border-radius: 37px;
         font-weight: 500;
         font-size: 24px;
         color: #f67146;
         line-height: 74px;
         text-align: center;
         cursor: pointer;
         &:hover {
            opacity: $opacity-hover;
         }
      }
      .btnGoClass {
         margin-left: 20px;
      }
   }
}
</style>
