<!--
* @FileDescription: 配置课件
* @Author: 黄琪勇
* @Date:2024-04-02 09:43:51
-->
<template>
   <div class="setUpCourseware">
      <div class="close" @click="close"></div>
      <img class="headImg" src="@/img/curriculum/ts3.png" />
      <ElScrollbar class="elScrollbar" v-loading="loading">
         <div class="cloudTextbooksBox">
            <div class="bookshelf" v-for="(list, index) in listData" :key="index">
               <div class="book" v-for="item in list" :key="item.id">
                  <div class="imgCon" @click="handleClick(item.id)">
                     <ElImage class="img" :src="item.img" />
                     <img class="imgbg" src="@/img/cloudTextbooks/yy.png" />
                     <img class="imgbg1" src="@/img/cloudTextbooks/hd1.png" />
                     <img class="imgbg2" src="@/img/cloudTextbooks/hd.png" />
                     <div class="courseNum">共{{ item.courseNum }}课</div>
                  </div>
                  <div class="name">{{ item.name }}</div>
               </div>
            </div>
         </div>
      </ElScrollbar>
      <el-empty v-if="!listData.length && !loading" class="empty" :image="require('@/img/layout/empty.png')" description="暂无结果" />
   </div>
</template>

<script setup lang="ts">
import modalFrame from "@/plugin/modalFrame"
import chooseCourseware from "./chooseCourseware.vue"
import { getCourseware_gyt, queryLessonCourseware_gym } from "@/api/curriculum.api"
import { httpAjaxErrMsg } from "@/plugin/httpAjax"
import { ref, shallowRef } from "vue"
import userStore from "@/store/modules/user"

const userStoreHook = userStore()
const props = defineProps<{
   modalData: {
      id: string
   }
}>()
const emits = defineEmits<{
   (e: "onClose"): void
   (e: "onOk"): void
}>()

function close() {
   emits("onClose")
}

const loading = ref(false)
const listData = shallowRef<any[]>([])

getlistData()
function getlistData() {
   userStoreHook.roles === "GYM" ? getlistData_gym() : getlistData_gyt()
}
function getlistData_gym() {
   loading.value = true
   httpAjaxErrMsg(queryLessonCourseware_gym).then(res => {
      loading.value = false
      if (res.code === 200) {
         const data = (res.data?.rows || []).map((item: any) => {
            return {
               name: item.name,
               type: item.subjectId,
               img: item.cover,
               id: item.lessonCoursewareId,
               courseNum: item.courseNum
            }
         })
         listData.value = chunkArray(data, 3)
      }
   })
}
function getlistData_gyt() {
   loading.value = true
   httpAjaxErrMsg(getCourseware_gyt, props.modalData.id).then(res => {
      loading.value = false
      if (res.code === 200) {
         const data = (res.data || []).map((item: any) => {
            return {
               name: item.coursewareName,
               img: item.coverImg,
               id: item.lessonCoursewareId,
               courseNum: item.coursewareNum
            }
         })
         listData.value = chunkArray(data, 3)
      }
   })
}
function handleClick(id: string) {
   modalFrame({
      template: chooseCourseware,
      width: 1152,
      height: 700,
      btnShow: [],
      modalData: {
         id,
         courseId: props.modalData.id
      },
      maskClose: true,
      className: "chooseCourseware",
      onOk(vm) {
         vm.remove()
         emits("onOk")
      }
   })
}

function chunkArray(array: any[], size: number) {
   const result = []
   for (let i = 0; i < array.length; i += size) {
      result.push(array.slice(i, i + size))
   }
   return result
}
</script>

<style lang="scss" scoped>
.setUpCourseware {
   padding-top: 88px;
   padding-bottom: 22px;
   width: 100%;
   height: 100%;
   .close {
      position: absolute;
      top: -14px;
      right: -16px;
      width: 42px;
      height: 44px;
      cursor: pointer;
      background: url("@/img/useDialogConfirm/close.png") no-repeat;
      background-size: cover;
      &:hover {
         background: url("@/img/useDialogConfirm/closeHover.png") no-repeat;
         background-size: cover;
      }
   }
   .headImg {
      width: 163px;
      height: 51px;
      position: absolute;
      left: 50%;
      top: -13px;
      transform: translate(-50%, 0);
   }
   & > :deep(.elScrollbar) {
      .el-scrollbar__view {
         width: 100%;
         padding: 0 38px;
      }
      .el-scrollbar__wrap {
         overflow-x: hidden;
      }
   }
   .cloudTextbooksBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      .bookshelf {
         padding: 0 50px;
         width: 100%;
         margin-bottom: 30px;
         display: flex;
         flex-wrap: wrap;
         background: url("@/img/curriculum/shujia.png") no-repeat;
         background-size: contain;
         background-position-y: 120px;
         &:last-child {
            margin-bottom: 0;
         }
         .book {
            width: 33.3333%;
            text-align: center;
            position: relative;
            padding-top: 4px;
            .imgCon {
               width: 172px;
               height: 212px;
               display: inline-block;
               position: relative;
               cursor: pointer;
               &:hover {
                  transform: translateY(-4px);
               }
               .img {
                  width: 172px;
                  height: 212px;
               }
               .imgbg {
                  position: absolute;
                  top: -20px;
                  right: -50px;
                  width: 76px;
                  height: 247px;
               }
               .imgbg1 {
                  position: absolute;
                  top: 0px;
                  right: -4px;
                  width: 4px;
                  height: 212px;
               }
               .imgbg2 {
                  position: absolute;
                  top: 0px;
                  left: 0px;
                  width: 9px;
                  height: 212px;
               }
               .courseNum {
                  cursor: pointer;
                  position: absolute;
                  left: 50%;
                  bottom: 10px;
                  transform: translateX(-50%);
                  background: #ffffff;
                  padding: 0 10px;
                  border-radius: 13px;
                  opacity: 0.83;
                  line-height: 25px;
                  font-weight: 400;
                  font-size: 16px;
                  color: #6b3c2d;
                  white-space: nowrap;
               }
            }
            .name {
               margin-top: 48px;
               font-weight: 400;
               font-size: 19px;
               color: #393939;
               line-height: 26px;
            }
         }
      }
   }
   &:deep(.empty) {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .el-empty__image {
         width: 278px;
      }
   }
}
</style>
<style lang="scss">
.h-modalFrame.setUpCourseware {
   /* prettier-ignore */
   --modalFrameTitHeight: 0PX;
   .modalFrameBox {
      background: linear-gradient(180deg, #fdfef2 0%, #fdf6de 100%);
      box-shadow: 0px 5px 0px 0px #ca8e2d, 0px 7px 10px 0px #6e6e6e;
      border-radius: 20px;
      border: 8px solid #ffdd98;
      position: relative;
      .modalFrameTitle {
         display: none;
      }
   }
}
</style>
