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

import { useRouter } from 'vue-router'
import jpg from '~/assets/course/jpg.png'
import jpeg from '~/assets/course/jpeg.png'
import file from '~/assets/course/file.png'
import mp3 from '~/assets/course/mp3.png'
import mp4 from '~/assets/course/mp4.png'
import pdf from '~/assets/course/pdf.png'
import png from '~/assets/course/png.png'
import ppt from '~/assets/course/ppt.png'
import pptx from '~/assets/course/pptx.png'
import xls from '~/assets/course/xls.png'
import xlsx from '~/assets/course/xlsx.png'
import doc from '~/assets/course/doc.png'
import docx from '~/assets/course/docx.png'

import catogory_jzxx from '~/assets/course/catogory_jzxx.png'
import catogory_qzgd from '~/assets/course/catogory_qzgd.png'
import catogory_xgyc from '~/assets/course/catogory_xgyc.png'
import catogory_tdwx from '~/assets/course/catogory_tdwx.png'

const obj = { jpg, jpeg, file, mp4, mp3, pdf, png, ppt, pptx, xls, xlsx, doc, docx }
const router = useRouter()
let token = $ref('')
let total = $ref(10)
let page = $ref(1)
const limit = $ref(4)
let keyword = $ref('')
let loading = $ref(false)
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 tabList = $ref([])
function tabData() {
  loading = true
  request({
    url: '/index/main/app_kc_menu',
    data: {
      page: 1,
      t: Date.now(),

    },
  }).then((res) => {
    if (res.code == '1') {
      loading = false
      tabList = res.data
    }
  })
}

tabData()

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()

let selectTitle = $ref(sessionStorage.getItem('xlkc_selectTitle') ?? '1')
function changeTitle(item) {
  page = 1
  keyword = ''
  selectGrade = ''
  selectSubject = ''
  selectTitle = item.id
  sessionStorage.setItem('xlkc_selectTitle', item.id)
  initData(selectTitle)
}

let tjkcList = $ref([])
function tjkcData() {
  loading = true
  request({
    url: '/qy/course/list_tuijian',
    data: {
      page: 1,
      limit: 4,

      t: Date.now(),
    },
  }).then((res) => {
    if (res.code == '1') {
      loading = false
      tjkcList = res.data.page_data
    }
  })
}

// let jtjytjkcList = $ref('')
// function jtjytjkcData() {
//   loading = true
//   request({
//     url: '/kzkt/jtjy/index',
//     data: {
//       page: 1,
//       limit: 3,

//       t: Date.now(),
//     },
//   }).then((res) => {
//     if (res.code == '1') {
//       loading = false
//       jtjytjkcList = res.data.page_data
//     }
//   })
// }
// jtjytjkcData()
const kj_cate = ref(1)
let tableData = $ref([])
function initData(type) {
  if (type == '1') {
    loading = true
    tjkcData()

    request({
      url: '/qy/course/list',
      data: {
        page,
        limit: 4,
        t: Date.now(),

      },
    }).then((res) => {
      if (res.code == '1') {
        loading = false
        tableData = res.data.page_data
        total = res.data.total_rows * 1
      }
    })
  }
  else if (type == '2') {
    loading = true
    request({
      url: '/kzkt/ykpd/index',
      data: {
        page,
        limit: 4,
        t: Date.now(),

        keyword,
        grade_id: selectGrade,
        subject_id: selectSubject,

      },
    }).then((res) => {
      if (res.code == '1') {
        loading = false
        tableData = res.data.page_data
        total = res.data.total_rows * 1
      }
    })
  }
  else if (type == '3') {
    loading = true
    request({
      url: '/qy/mszx/list',
      data: {
        page,
        limit: 4,
        t: Date.now(),
        grade: selectGrade,
        xueke: selectSubject,

      },
    }).then((res) => {
      if (res.code == '1') {
        loading = false
        tableData = res.data.page_data
        total = res.data.total_rows * 1
      }
    })
  }
  else if (type == '4') {
    loading = true
    request({
      url: '/kzkt/jtjy/index',
      data: {
        page,
        limit: 4,
        t: Date.now(),
        kj_cate: kj_cate.value,
      },
    }).then((res) => {
      if (res.code == '1') {
        loading = false
        tableData = res.data.page_data
        total = res.data.total_rows * 1
      }
    })
  }
  else {
    loading = true
    request({
      url: '/kzkt/xkzy/index',
      data: {
        page,
        limit: 4,
        t: Date.now(),

        keyword,
        grade_id: selectGrade,
        subject_id: selectSubject,

      },
    }).then((res) => {
      if (res.code == '1') {
        loading = false
        tableData = res.data.page_data
        total = res.data.total_rows * 1
      }
    })
  }
}
initData(selectTitle)

function hangleChange(val) {
  page = val
  initData(selectTitle)
}

function downloadFile(item) {
  window.open(item.file)
}

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

function handleselectSubject(item) {
  selectSubject = item.subject_id
  initData(selectTitle)
}
function toDetail(id) {
  if (selectTitle == '1') {
    window.open(
      `/page/coursedetail.html?&curMark=tskc&id=${id}`,
      '_self',
    )
  }
  if (selectTitle == '2') {
    window.open(
      `/page/coursedetail_vt.html?&curMark=ykpd&id=${id}`,
      '_self',
    )
  }
  if (selectTitle == '3') {
    window.open(
      `/page/coursedetail.html?&curMark=mszx&id=${id}`,
      '_self',
    )
  }
  if (selectTitle == '4') {
    window.open(
      `/page/coursedetail_vt.html?&curMark=jtjy&id=${id}`,
      '_self',
    )
  }
}

function switchKjCate(idx) {
  kj_cate.value = idx
  initData(selectTitle)
}
</script>

<template>
  <div class="">
    <!-- tab栏 -->
    <div class="mb-30px">
      <span v-for="(item, key) in tabList" :key="key" @click="changeTitle(item)">
        <span :class="item.id == selectTitle ? 'title_active' : 'title'">
          {{ item.name }}
        </span>
      </span>
    </div>
    <!-- 推荐 -->
    <div v-if="selectTitle == '1'">
      <div class="mt-20px flex justify-center">
        <div class="bg-blue-400 px-40px text-2xl leading-10 text-white shadow-blue-300 shadow-lg">
          推荐课程
        </div>
      </div>
      <div v-if="tjkcList.length > 0" v-loading="loading" class="mb-30px">
        <ul class="course-list mt-10px">
          <li v-for="(item, i) in tjkcList" :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 class="flex items-center">
                    <el-icon :size="16">
                      <Clock />
                    </el-icon>
                    <span class="ml-5px"><span class="mr-10px">浏览</span>
                      {{ item.lll ? item.lll : 0 }}
                    </span>
                  </span>
                </h4>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div v-else class="py-10px text-center">
        <el-empty description="暂无数据" />
      </div>
    </div>
    <div v-if="selectTitle == '4'">
      <!-- <div v-if="jtjytjkcList.length > 0" v-loading="loading" class="mb-30px">
        <ul class="mt-10px flex justify-start space-x-30px">
          <li
            v-for="(item, i) in jtjytjkcList" :key="i" class="w-380px" style="box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11)"
            @click="toDetail(item.id)"
          >
            <div class="relative h-181px 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">
                  <span class="flex items-center">
                    <el-icon :size="16">
                      <Clock />
                    </el-icon>
                    <span class="ml-5px"><span class="mr-10px">浏览</span>
                      {{ item.lll ? item.lll : 0 }}
                    </span>
                  </span>
                </h4>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div v-else class="py-10px text-center">
        <el-empty description="暂无数据" />
      </div> -->
      <div class="mb-20px flex justify-between">
        <div class="relative cursor-pointer"
          :class="kj_cate === 1 ? 'border-2 border-blue rounded-3 border-solid' : 'border-2 border-transparent'"
          @click="switchKjCate(1)">
          <img :src="catogory_jzxx" alt="">
          <p class="absolute left-6 top-3 font-bold">
            家长学校
          </p>
        </div>
        <div class="relative cursor-pointer"
          :class="kj_cate === 2 ? 'border-2 border-blue rounded-3 border-solid' : 'border-2 border-transparent'"
          @click="switchKjCate(2)">
          <img :src="catogory_qzgd" alt="">
          <p class="absolute left-6 top-3 font-bold">
            亲子共读
          </p>
        </div>
        <div class="relative cursor-pointer"
          :class="kj_cate === 3 ? 'border-2 border-blue rounded-3 border-solid' : 'border-2 border-transparent'"
          @click="switchKjCate(3)">
          <img :src="catogory_xgyc" alt="">
          <p class="absolute left-6 top-3 font-bold">
            习惯养成
          </p>
        </div>
        <div class="relative cursor-pointer"
          :class="kj_cate === 4 ? 'border-2 border-blue rounded-3 border-solid' : 'border-2 border-transparent'"
          @click="switchKjCate(4)">
          <img :src="catogory_tdwx" alt="">
          <p class="absolute left-6 top-3 font-bold">
            团队微学
          </p>
        </div>
      </div>
    </div>
    <!-- 搜索 -->
    <div>
      <div v-if="selectTitle == '2' || selectTitle == '5'" class="mb-30px" style="position: relative">
        <el-icon :size="22" color="#bfbfbf" style="position: absolute; right: 50px; top: 12px; z-index: 100"
          @click="initData(selectTitle)">
          <Search />
        </el-icon>
        <el-input v-model="keyword" placeholder="搜索课程" clearable />
      </div>
      <div v-if="selectTitle == '2' || selectTitle == '3' || selectTitle == '5'">
        年级：
        <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 v-if="selectTitle == '2' || selectTitle == '3' || selectTitle == '5'">
        学科：
        <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="tableData.length > 0" v-loading="loading" class="mb-30px">
      <ul class="mt-10px flex flex-wrap justify-between">
        <li v-for="(item, i) in tableData" :key="i" class="mb-20px h-120px w-590px flex rounded-14px"
          style="box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11)" @click="toDetail(item.id)">
          <div v-if="item.img" class="h-120px w-200px overflow-hidden">
            <img :src="item.img" class="h-full w-full rounded-14px" alt="">
          </div>
          <div v-else class="h-120px w-200px overflow-hidden">
            <img class="mx-15px my-15px h-60px w-60px" :src="obj[item.file_ext]" alt="">
          </div>
          <div class="border-bottom-1 w-390px pl-15px pr-40px py-15px">
            <div class="h-20px overflow-hidden text-18px leading-20px text-dark-400">
              {{ item.name }}
            </div>
            <div class="mt-15px">
              <h4 class="flex items-center justify-between text-14px text-hex-abaaaa">
                <span v-if="item.lll" class="flex items-center">
                  <el-icon :size="16">
                    <Clock />
                  </el-icon>
                  <span class="ml-5px"><span class="mr-10px">浏览</span>
                    {{ item.lll ? item.lll : 0 }}
                  </span>
                </span>

                <div v-if="selectTitle === '4'">
                  {{ item.create_dateline_format }}
                </div>

                <div v-if="item.kss" class="btn">
                  {{ item.kss }}
                </div>
                <div v-else-if="item.master_teacher" class="flex justify-between">
                  <div v-if="item.master_teacher" class="btn">
                    主讲
                  </div>
                  <div class="ml-8px">
                    {{ item.master_teacher }}
                  </div>
                </div>
                <div v-else class="flex justify-between">
                  <div v-if="item.master_teacher" class="btn">
                    主讲
                  </div>
                  <div class="ml-8px">
                    {{ item.teacher_name }}
                  </div>
                </div>
                <div v-if="selectTitle == '5'" class="mt-15px" @click="downloadFile(item)">
                  <el-icon :size="28">
                    <Download />
                  </el-icon>
                </div>
              </h4>
            </div>
            <div class="bordertop"></div>
            <div class="truncate text-13px text-hex-abaaaa">
              {{ item.kcjj }}
            </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>
</template>

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

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

.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 {
  height: 20px;
  padding: 2px 10px;
  font-size: 12px;
  text-align: center;
  border-radius: 10px;
  background: #8599fe;
}

.title {
  display: inline-block;
  width: 200px;
  font-size: 28px;
  color: #949494;
  position: relative;
  font-weight: 600;
}

.title_active {
  display: inline-block;
  width: 220px;
  font-size: 24px;
  font-size: 34px;
  position: relative;
  font-weight: 600;
}

.title_active::before {
  position: absolute;
  content: "";
  width: 130px;
  height: 12px;
  bottom: 2px;
  border-radius: 8px;
  background-color: #95b8ff;
  opacity: 0.5;
}

.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>
