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

import { useRouter } from 'vue-router'

const router = useRouter()
let token = $ref('')
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
if (localStorage.getItem('userInfo')) {
  const userinfo = JSON.parse(localStorage.getItem('userInfo'))
  token = userinfo.token
  // 这里的赋值会报错
  // gobalData.params.token = userinfo.token;
}

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

// 初始化
let loading = $ref(false)
let listData = $ref([])
function initData() {
  loading = true
  console.log(selectGrade, selectSubject, '123')
  request({
    url: '/kzkt/zbkc/index',
    data: {
      page,
      limit: 12,

      live: 4,
      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
    }
  })
}

initData()
function hangleChange(val) {
  page = val
  initData()
}
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=excellent_playback&id=${id}`, '_self')
}
</script>

<template>
  <div>
    <div class="rounded-10px">
      <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 v-if="listData.length > 0" v-loading="loading">
        <ul class="course-list mt-25px">
          <li v-for="(item, i) in listData" :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 class="my-10 flex justify-center">
          <el-pagination
            v-model:current-page="page"
            v-model:page-size="limit"
            layout=" prev, pager, next"
            :total="total"
            :background="true"
            :hide-on-single-page="false"
            @current-change="hangleChange"
          />
        </div>
      </div>
      <div v-else class="py-10px text-center">
        <el-empty description="暂无数据" />
      </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;
}
</style>
