<script setup>
import { Clock, Right, Search } from '@element-plus/icons-vue'

import { useRouter } from 'vue-router'

const router = useRouter()
let total = $ref(10)
let subjectData = $ref([])
let gradeData = $ref([])
let selectGrade = $ref('')
let selectSubject = $ref('')

const userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
const smVal = userInfo.sm_info.sm_id

const page = $ref(1)
const limit = $ref(12)
const keyword = $ref('')
let live_current = $ref([])

// 初始化
let loading = $ref(false)
let listData = $ref([])
function initData() {
  loading = true
  request({
    url: '/kzkt/zbkc/index',
    data: {
      page: 1,
      limit: 12,
      live: 1,
      keyword,
      grade_id: selectGrade,
      subject_id: selectSubject,
    },
  }).then((res) => {
    if (res.code == '1') {
      loading = false
      listData = res.data.page_data
      total = res.data.total_rows * 1
      if (listData.length > 4)
        listData = listData.splice(0, 4)

      live_current = listData
    }
  })
}

initData()
let live_recomend = $ref({
  left: {},
  right: [],
})
let live_best = $ref([])
function tjkcData() {
  loading = true
  request({
    url: '/kzkt/zbkc/home',
    data: {
      page: 1,
      limit: 12,
    },
  }).then((res) => {
    if (res.code == '1') {
      const data = res.data
      // 推荐直播
      let recommendData = data.recommend_zbkt.data
      const lenRecomend = recommendData.length
      if (lenRecomend > 0) {
        recommendData = recommendData.splice(1, 2)
        live_recomend = {
          left: data.recommend_zbkt.data[0],
          right: recommendData,
        }
      }
      let greatData = data.best_zbkt.data
      if (greatData.length > 4)
        greatData = greatData.splice(0, 4)

      live_best = greatData
    }
  })
}

tjkcData()
function getGradeData() {
  request({
    url: 'https://uc.bozedu.net/index.php?mod=school&action=main&do=base_grade',
    data: { limit: 9999, page: 1, sm_id: smVal },
  }).then((res) => {
    if (res.code == '1') {
      const pageData = res.data
      gradeData = [
        {
          grade: '',
          gradename: '全部',
        },
      ]
      let num = 0
      for (const i in pageData) {
        const itemGrade = pageData[i]
        if (num == 0) {
          subjectData = [
            {
              subject_id: '',
              subject_name: '全部',
            },
          ]
          const subjectArr = itemGrade.subjects
          for (const j in subjectArr)
            subjectData.push(subjectArr[j])
        }
        gradeData.push(itemGrade)
        num++
      }
    }
  })
}
getGradeData()

function handleSelectGrade(item) {
  selectGrade = item.grade
  initData()
}

function handleselectSubject(item) {
  selectSubject = item.subject_id
  initData()
}

function toDetail(id) {
  window.open(`/page/courseOutline.html?mod=live_class&id=${id}`, '_self')
}
</script>

<template>
  <div class="">
    <div>
      <div class="mb-30px" style="position: relative">
        <el-icon
          :size="22"
          color="#bfbfbf"
          style="position: absolute; right: 50px; top: 12px; z-index: 100"
          @click="initData"
        >
          <Search />
        </el-icon>
        <el-input v-model="keyword" placeholder="搜索课程" clearable />
      </div>
      <div>
        年级：
        <span
          v-for="(item, key) in gradeData"
          :key="key"
          @click="handleSelectGrade(item)"
        >
          <span
            :class="
              item.grade == selectGrade
                ? 'online_grade_item_active'
                : 'online_grade_item'
            "
          >
            {{ item.gradename }}
          </span>
        </span>
      </div>
      <div style="width: 100%">
        学科：
        <span
          v-for="(item, key) in subjectData"
          :key="key"
          @click="handleselectSubject(item)"
        >
          <span
            :class="
              item.subject_id == selectSubject
                ? 'online_grade_item_active'
                : 'online_grade_item'
            "
          >
            {{ item.subject_name }}
          </span>
        </span>
      </div>
    </div>
    <div class="mt-25px flex justify-between">
      <div class="title">
        正在直播
      </div>
      <!-- <span class="text-hex-3f71fe">更多>></span> -->
    </div>
    <div v-if="live_current.length > 0" v-loading="loading">
      <ul class="course-list mt-10px">
        <li v-for="(item, i) in live_current" :key="i" @click="toDetail(item.id)">
          <div class="course-img relative">
            <img :src="item.img" alt="">
          </div>
          <div class="border-bottom-1 px-15px pb-15px pt-10px">
            <div
              class="h-20px overflow-hidden text-16px leading-20px text-dark-400"
            >
              {{ item.name }}
            </div>
            <div class="mt-10px">
              <h4
                class="flex items-center justify-between text-14px text-hex-abaaaa"
              >
                <span>
                  <el-icon :size="16"><Clock /></el-icon>
                  <span class="ml-5px"><span class="mr-10px">浏览</span>
                    {{ item.lll ? item.lll : 0 }}
                  </span>
                </span>
                <div class="btn">
                  {{ item.kss }}
                </div>
              </h4>
            </div>
          </div>
          <div class="bordertop p-15px text-13px">
            <div class="h-30px truncate text-hex-abaaaa">
              {{ item.kcjj }}
            </div>
            <div
              class="ml-10px flex items-center justify-end text-right text-hex-716acc"
            >
              正在直播
              <el-icon color="#716acc" class="ml-5px">
                <Right />
              </el-icon>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div v-else class="py-10px text-center">
      <el-empty description="暂无数据" />
    </div>

    <div class="mt-25px flex justify-between">
      <div class="title">
        推荐直播
      </div>
      <!-- <span class="text-hex-3f71fe">更多>></span> -->
    </div>
    <div v-loading="loading">
      <div v-if="live_recomend.left.id" class="mt-15px h-400px w-full flex">
        <div class="w-900px" @click="toDetail(live_recomend.left.id)">
          <img
            class="h-350px w-full rounded-16px"
            :src="live_recomend.left.img"
            alt=""
          >
          <div class="mt-10px">
            <h4 class="flex items-center justify-between text-18px">
              <div>{{ live_recomend.left.name }}</div>
              <div class="btn">
                {{ live_recomend.left.kss }}节课时
              </div>
            </h4>
          </div>
        </div>

        <ul class="ml-16px w-284px">
          <li
            v-for="(item, i) in live_recomend.right"
            :key="i"
            class="mb-10px h-195px"
            style="box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11)"
            @click="toDetail(item.id)"
          >
            <div class="course-img relative h-120px w-full">
              <img class="h-full w-full" :src="item.img" alt="">
            </div>
            <div class="border-bottom-1 px-15px pb-15px pt-10px">
              <div
                class="h-20px overflow-hidden text-16px leading-20px text-dark-400"
              >
                {{ item.name }}
              </div>
              <div class="mt-10px">
                <h4
                  class="flex items-center justify-between text-14px text-hex-abaaaa"
                >
                  <div class="btn">
                    {{ item.kss }}节课时
                  </div>
                  <div
                    class="ml-10px flex items-center justify-end text-right text-hex-716acc"
                  >
                    正在直播
                    <el-icon color="#716acc" class="ml-5px">
                      <Right />
                    </el-icon>
                  </div>
                </h4>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div v-else class="py-10px text-center">
        <el-empty description="暂无数据" />
      </div>
    </div>

    <div class="mt-25px flex justify-between">
      <div class="title1">
        精品直播课程排行榜
      </div>
      <!-- <span class="text-hex-3f71fe">更多>></span> -->
    </div>
    <div v-if="live_best.length > 0" v-loading="loading">
      <ul class="course-list mt-10px">
        <li v-for="(item, i) in live_best" :key="i" @click="toDetail(item.id)">
          <div class="course-img relative">
            <img :src="item.img" alt="">
          </div>
          <div class="border-bottom-1 px-15px pb-15px pt-10px">
            <div
              class="h-20px overflow-hidden text-16px leading-20px text-dark-400"
            >
              {{ item.name }}
            </div>
            <div class="mt-10px">
              <h4
                class="flex items-center justify-between text-14px text-hex-abaaaa"
              >
                <div class="btn">
                  {{ item.kss }}
                </div>
                <div
                  class="ml-10px flex items-center justify-end text-right text-hex-716acc"
                >
                  正在直播
                  <el-icon color="#716acc" class="ml-5px">
                    <Right />
                  </el-icon>
                </div>
              </h4>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div v-else class="py-10px text-center">
      <el-empty description="暂无数据" />
    </div>

    <div style="width: 100%; margin-top: 20px; position: relative">
      <img
        src="../assets/bottom.png"
        alt=""
        style="width: 100%; height: 138px; border-radius: 12px"
      >
      <div
        class="flex items-center"
        style="position: absolute; bottom: 40px; left: 80px; z-index: 30"
      >
        <div style="font-size: 28px; color: rgba(0, 0, 0, 0.8)">
          最新直播
        </div>
        <div
          style="font-size: 18px; color: rgba(0, 0, 0, 0.8); margin-left: 15px"
        >
          全方面人才培养
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bg-white-grey {
  background: #fcfeff;
}

.bordertop {
  height: 80px;
  border-top: 1px dashed #ededed;
}

.course-list {
  display: flex;
  flex-wrap: wrap;

  li {
    min-width: 0;
    width: 284px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11);
    margin-right: 19px;
    margin-bottom: 15px;
    cursor: pointer;

    &:nth-child(4n) {
      margin-right: 0;
    }

    .course-img {
      width: 100%;
      height: 151px;
      border-radius: 10px 10px 0 0;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }

      .info-bottom {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 30;
        width: 185px;
        height: 27px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 0 10px 0 0;
        display: flex;
      }
    }
  }
}
.btn {
  width: 76px;
  height: 20px;
  padding: 2px 0;
  font-size: 12px;
  text-align: center;
  border-radius: 10px;
  background: #8599fe;
}

.online_grade_item_active {
  display: inline-block;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #588afa;
  padding: 5px 8px 5px 8px;
  cursor: pointer;
}

.online_grade_item {
  display: inline-block;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #bfbfbf;
  padding: 5px 8px 5px 8px;
}
.online-search-input input.el-input__inner {
  border-radius: 27px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
  text-align: center;
  padding-right: 45px;
}
::v-deep .el-input__inner {
  height: 45px;
  font-size: 16px;
  color: #bfbfbf;
  margin: 0 auto;
}
::v-deep input::-webkit-input-placeholder {
  text-align: center;
}

.title {
  width: 100px;
  font-size: 24px;
  font-weight: 600;
  position: relative;
}
.title::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 12px;
  bottom: 2px;
  border-radius: 8px;
  background-color: #95b8ff;
  opacity: 0.5;
}
.title1 {
  width: 220px;
  font-size: 24px;
  font-weight: 600;
  position: relative;
}
.title1::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 12px;
  bottom: 2px;
  border-radius: 8px;
  background-color: #95b8ff;
  opacity: 0.5;
}
</style>
