<script setup lang="ts">
import { useMapStore } from '@/stores/map'
import type { CourseType } from '@/types'
import * as api from '../api'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()

const props = defineProps<{ data: any }>()

const CourseViewChapter = defineAsyncComponent(() => import('../components/CourseViewChapter.vue'))
const CourseViewBBS = defineAsyncComponent(() => import('../components/CourseViewBBS.vue'))
const CourseViewWork = defineAsyncComponent(() => import('../components/CourseViewWork.vue'))
const CourseViewExam = defineAsyncComponent(() => import('../components/CourseViewExam.vue'))
const CourseViewAssess = defineAsyncComponent(() => import('../components/CourseViewAssess.vue'))
const CourseViewLive = defineAsyncComponent(() => import('../components/CourseViewLive.vue'))
const CourseViewMaterial = defineAsyncComponent(() => import('../components/CourseViewMaterial.vue'))

const { query } = useRoute()
const courseId = $ref<string | null>(query.course_id as string)
const semesterId = $ref<string | null>(query.semester_id as string)

let loading = $ref<boolean>(false)

const router = useRouter()

const mapStore = useMapStore()
// 选课类型
const electiveTypes = mapStore.getMapValuesByKey('system_elective_type')
// 选课类型文本
const electiveTypeText = computed(() => {
  return electiveTypes.find(item => parseInt(item.value) === props.data?.elective_type)?.label || ''
})
const detail = reactive<CourseType>({
  id: '',
  course_id: '',
  represent: '',
  is_finished: 0,
  is_top: 0,
  name: '',
  course_alias_name: '',
  cover: '',
  elective_type: 0,
  online_type: 0,
  semester: { id: '', name: '' },
  credit: 0,
  previous_preparation: '',
  target: '',
  lecturers: []
})

let infoText = $ref(props.data?.represent || '')
let infoIndex = $ref(0)
// 获取课程信息
function fetchInfo() {
  if (!courseId || !semesterId) {
    return
  }
  loading = true
  api.getCourse({ course_id: courseId, semester_id: semesterId }).then(res => {
    Object.assign(detail, res.data.detail)
    infoText = props.data?.represent
    loading = false
  })
}
onMounted(() => {
  // fetchInfo()
})

const dialogInfo = reactive({
  visible: false,
  title: '',
  content: ''
})
function showInfo(content: string, index: number) {
  infoText = content
  infoIndex = index
}

const courseViewChapterRef = ref()
function handleStudy() {
  courseViewChapterRef.value.study()
}

let detailFlag = $ref(props.data?.length === 1 ? true : false)
const handleDetail = function () {
  router.push({
    path: '/course/view',
    query: { course_id: props.data?.course_id, semester_id: props.data?.semester_id }
  })
  fetchInfo()
  detailFlag = true
}
</script>

<template>
  <div class="course-view" v-loading="loading">
    <div :class="detailFlag ? 'flex active' : 'flex'">
      <div class="course-view-h">
        <div class="view-h-l" v-if="!mobile">
          <img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/pages/campbellsville/20220804/lc23925.png" />
          <div class="btn" @click="handleStudy">立即学习</div>
        </div>
        <div class="course-view-r">
          <div class="course-view-r__info">
            <div class="name">{{ props.data?.course_alias_name || props.data?.name }}</div>
            <div class="tag-box">
              <div class="tag">{{ electiveTypeText }}</div>
              <div class="tag">{{ props.data?.credit }}学分</div>
              <div class="tag" v-if="props.data?.semester">{{ props.data?.semester.name }}</div>
            </div>
          </div>
          <div class="view-content">
            <div class="view-content-hd">
              <div :class="infoIndex === 0 ? 'btn active' : 'btn'" @click="showInfo(props.data?.represent, 0)">
                课程简介
              </div>
              <div
                :class="infoIndex === 1 ? 'btn active' : 'btn'"
                @click="showInfo(props.data?.previous_preparation, 1)"
                v-if="false"
              >
                预备知识
              </div>
              <div :class="infoIndex === 2 ? 'btn active' : 'btn'" @click="showInfo(props.data?.target, 2)">
                授课目标
              </div>
            </div>
            <div class="view-content_c" v-if="infoText === ''">
              <el-empty :image-size="50" style="padding: 0" description="暂无数据"></el-empty>
            </div>
            <div class="view-content_c" v-html="infoText" v-else></div>
          </div>
        </div>
        <div class="view-btn" @click="handleDetail()" v-if="!detailFlag">
          <img src="@/assets/images/icon-btn.png" class="icon" />
          <img src="@/assets/images/icon-btn-a.png" class="icon-a" />
          <div class="text">
            <i>︾</i>
            <span>查看详情</span>
          </div>
        </div>
      </div>
      <div class="course-view-teacher" v-if="!mobile">
        <div class="teacher-hd">课程讲师</div>
        <div class="teacher-content">
          <div class="teacher-content-item" v-for="item in props.data?.lecturers" :key="item.id">
            <img :src="item.avatar" />
            <div class="box">
              <div class="name">{{ item.name }}</div>
              <div class="dec" v-html="item.summarize"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="course-view-content" v-if="detailFlag">
      <div class="course-view-bd">
        <el-tabs :stretch="mobile">
          <el-tab-pane label="学习">
            <CourseViewChapter ref="courseViewChapterRef" />
          </el-tab-pane>
          <el-tab-pane label="论坛" lazy>
            <CourseViewBBS />
          </el-tab-pane>
          <el-tab-pane label="大作业" lazy>
            <CourseViewWork />
          </el-tab-pane>
          <el-tab-pane label="考试" lazy>
            <CourseViewExam />
          </el-tab-pane>
          <el-tab-pane label="课程考核" lazy>
            <CourseViewAssess />
          </el-tab-pane>
          <el-tab-pane label="直播" lazy>
            <CourseViewLive />
          </el-tab-pane>
          <el-tab-pane label="资料" lazy>
            <CourseViewMaterial />
          </el-tab-pane>
        </el-tabs>
      </div>
      <template v-if="props.data?.length !== 1">
        <div class="view-btn c" @click="detailFlag = false" v-if="detailFlag">
          <img src="@/assets/images/icon-btn-b.png" class="icon" />
          <img src="@/assets/images/icon-btn-a.png" class="icon-a" />
          <div class="text">
            <i>︽</i>
            <span>收起</span>
          </div>
        </div>
      </template>
    </div>
  </div>
  <el-dialog v-model="dialogInfo.visible" :title="dialogInfo.title" width="472px" center>
    <div v-html="dialogInfo.content" class="dialog-info"></div>
  </el-dialog>
</template>

<style lang="scss" scoped>
.flex {
  display: flex;
  &.active {
    .course-view-h {
      background: #ab0a3d;
      box-shadow: 0px 6px 12px 1px rgba(0, 0, 0, 0.05);
    }
    .view-h-l {
      .btn {
        background: #fff;
        color: #555555;
      }
    }
    .course-view-r {
      .name {
        color: #fff;
      }
      .view-content {
        .view-content-hd {
          .btn {
            color: #fff;
            &.active {
              color: #fff;
              font-weight: bold;
            }
          }
        }
        .view-content_c {
          color: #fff;
        }
      }
    }
    .view-btn {
      .text {
        color: #fff;
      }
      .icon-a {
        display: block;
      }
      .icon {
        display: none;
      }
    }
  }
  &:hover {
    .course-view-h {
      background: #ab0a3d;
      box-shadow: 0px 6px 12px 1px rgba(0, 0, 0, 0.05);
    }
    .view-h-l {
      .btn {
        background: #fff;
        color: #555555;
      }
    }
    .course-view-r {
      .name {
        color: #fff;
      }
      .view-content {
        .view-content-hd {
          .btn {
            color: #fff;
            &.active {
              color: #fff;
              font-weight: bold;
            }
          }
        }
        .view-content_c {
          color: #fff;
        }
      }
    }
    .view-btn {
      .text {
        color: #fff;
      }
      .icon-a {
        display: block;
      }
      .icon {
        display: none;
      }
    }
  }
}
.course-view-h {
  flex: 1;
  position: relative;
  // background: #ab0a3d;
  // box-shadow: 0px 1px 12px 1px rgba(0, 0, 0, 0.1098);
  // border-radius: 10px 10px 10px 10px;
  background: linear-gradient(90deg, #dfe4e6 0%, #eaeaea 39%, #b3b3b3 100%);
  border-radius: 10px 0 0 10px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  .view-h-l {
    margin-right: 0.2rem;
    min-width: 260px;
    img {
      height: 150px;
      width: 100%;
      display: block;
      border-radius: 12px;
    }
    .btn {
      background: #ab0a3d;
      border-radius: 12px;
      text-align: center;
      font-size: 14px;
      font-weight: 400;
      color: #fff;
      line-height: 37px;
      margin-top: 10px;
      cursor: pointer;
    }
  }
  .course-view-r {
    position: relative;
    width: 100%;
    .name {
      font-size: 20px;
      font-weight: bold;
      color: #000;
      line-height: 100%;
      margin-bottom: 20px;
    }
    .tag-box {
      display: flex;
      .tag {
        padding: 0 9px;
        line-height: 23px;
        background: #fff;
        border-radius: 4px 4px 4px 4px;
        font-size: 0.12rem;
        color: #555555;
        margin-right: 10px;
      }
    }
    .view-content {
      // background-color: #fff;
      // min-height: 120px;
      border-radius: 9px 9px 9px 9px;
      margin-top: 10px;
      // overflow: hidden;
      .view-content_c {
        // padding: 0 18px;
        font-size: 12px;
        color: #535353;
        height: 85px;
        overflow: auto;
        &::-webkit-scrollbar {
          width: 3px;
        }
        &::-webkit-scrollbar-track {
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 30px !important;
        }
        &::-webkit-scrollbar-thumb {
          background-color: rgba(255, 255, 255, 0.5);
          border-radius: 30px !important;
        }
      }
      .view-content-hd {
        // background: #f7e6ec;
        display: flex;
        .btn {
          line-height: 33px;
          // padding: 0 18px;
          margin-right: 18px;
          font-size: 14px;
          color: #666666;
          cursor: pointer;
          &.active {
            color: #ba143e;
            // background-color: #fff;
          }
        }
      }
    }
  }
}
.course-view {
  margin-bottom: 60px;
  background-color: #fff;
  border-radius: 10px;
}
.course-view-hd {
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #e6e6e6;
}
.course-info {
  flex: 1;
  h1 {
    font-size: 18px;
    font-weight: 500;
    line-height: 30px;
    color: #333333;
  }
  ul {
    margin-top: 20px;
    margin-bottom: 30px;
    display: flex;
  }
  li {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #bcbcbc;
  }
  li + li {
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #bcbcbc;
  }
}

.course-lecturers {
  width: 444px;
  background: #f7f8fa;
  border-radius: 10px;
  :deep(.el-carousel__arrow) {
    background: none;
    color: #333;
    font-size: 20px;
  }
  :deep(.el-carousel__arrow--left) {
    left: 0;
  }

  :deep(.el-carousel__arrow--right) {
    right: 0;
  }
}
.lecturer-item {
  width: 364px;
  display: flex;
  justify-content: center;
  height: 106px;
  margin: 10px 40px;
  overflow: hidden;
}
.lecturer-item__pic {
  width: 1.46rem;
  height: 1.06rem;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 auto;
}
.lecturer-item__info {
  flex: 1;
  margin-left: 10px;
  padding-top: 10px;
  height: 100px;
  overflow: hidden;
  h2 {
    font-size: 16px;
    font-weight: 500;
    line-height: 27px;
    color: #333;
  }
  .lecturer-item__content {
    font-size: 14px !important;
    font-weight: 400;
    line-height: 24px !important;
    color: #666666;
    :deep(p) {
      font-size: 14px !important;
      line-height: 24px !important;
    }
  }
}

.course-view-bd {
  flex: 1;
  padding: 0.1rem 0.2rem;
  background-color: #fff;
  border-radius: 10px 10px 10px 10px;
  overflow: hidden;
}
.dialog-info {
  :deep(img) {
    max-width: 100%;
  }
}
.course-view-content {
  display: flex;
  position: relative;
  // margin-top: 0.2rem;
}
.course-view-teacher {
  width: 410px;
  background-color: #fff;
  border-radius: 0px 10px 10px 0px;
  padding: 30px 30px 0 30px;
  box-sizing: border-box;
  .teacher-hd {
    font-size: 20px;
    font-weight: bold;
  }
  .teacher-content {
    padding-top: 30px;
    box-sizing: border-box;
    // padding: 30px 30px 0;
    height: 150px;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 5px;
      margin-right: 40px !important;
      border-radius: 30px !important;
    }
    &::-webkit-scrollbar-track {
      background-color: #dfe4e6;
      opacity: 0.5;
      border-radius: 30px !important;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #b3b3b3;
      border-radius: 30px !important;
    }
    .teacher-content-item {
      display: flex;
      margin-bottom: 30px;
      img {
        width: 90px;
        height: 90px;
        border-radius: 50%;
      }
    }
    .box {
      margin-left: 30px;
      .name {
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        line-height: 100%;
        margin-bottom: 10px;
      }
      .dec {
        font-size: 12px;
        color: #666666;
        line-height: 18px;
      }
    }
  }
}
:deep(.el-empty__description) {
  margin-top: 5px;
  font-size: 12px;
}
:deep(.el-empty__description p) {
  color: #edeef2;
}

.view-btn {
  position: absolute;
  bottom: -48px;
  right: 20%;
  // transform: translateX(-50%);
  cursor: pointer;
  &.c {
    right: 50%;
    transform: translateX(50%);
    .text {
      i {
        margin-top: -3px;
        margin-left: 25px;
      }
    }
  }
  .icon-a {
    display: none;
  }
  .text {
    font-size: 14px;
    color: #555555;
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    i {
      margin-top: 3px;
      margin-right: 5px;
    }
    span {
      width: 60px;
    }
  }
}

.is-h5 {
  .view-btn{
    right: 50%;
    transform: translateX(50%);
  }
}
</style>
