<script setup>
import { Search } from "@element-plus/icons-vue";
import { user } from "~/store/index";

const router = useRouter()
function back() {
  router.back()
}

let subjectOptions = $ref([])
request({
  baseURL: window.GLOBAL_CONFIG.api,
  url: '/aimooc/zyfl_zy_v2/index',
  data: {
    page: 1,
    limit: 9999
  }
}).then(res => {
  subjectOptions = res.data.page_data
})

let campList = $ref([])
request({
  baseURL: window.GLOBAL_CONFIG.uc,
  url: '/school/main/get_camp',
  data: {
    sm_id: user.value.sm_info.sm_id
  }
}).then(res => {
  campList = res.data.camp
})
const route = useRoute();
let formData = $ref({
  azz_id_v2: route.query.subject_idSelected,
  azz_ssnj_v2: route.query.grade_idSelected,
  camp_id: route.query.camp_idSelected,
  keyword: route.query.keyword
})



function paramChange() {
  getList()
}


let pageData = $ref([])
let page = $ref(1)
let totalPage = $ref(0)

getList()
function getList() {
  request({
    baseURL: window.GLOBAL_CONFIG.api,
    url: '/aimooc/spjj/index',
    data: {
      ...formData,
      page: page,
      limit: 20,
      as_zy_shzt_v2: 1
    }

  }).then(res => {
    pageData = res.data.page_data
    totalPage = res.data.total_page
  })
}

function pageChange(currentPage) {
  page = currentPage
  getList()
}
const gradeOptions = [{ value: '1', name: '一年级' }, { value: '2', name: '二年级' }, { value: '3', name: '三年级' }, { value: '4', name: '四年级' }, { value: '5', name: '五年级' }, { value: '6', name: '六年级' }]

function goDetail(item) {
  router.push({
    path: '/frontpage/videoDetail', query: {
      as_id: item.as_id
    }
  })
}
</script>
<template>
  <div style="background-color: #f7f6fb;">
    <div class="breadcrumbBg">
      <div style="width: 1200px;margin:auto;height: 60px;display: flex;justify-content: space-between;">
        <div style="line-height: 60px;">
          <span style="color: white;font-size: 14px;">精品课程</span>
        </div>
        <div style="height: 60px;display: flex;align-items: center;">
          <el-button style="width: 80px;height: 35px;border-radius: 3px;color: #9f93cd;" @click="back()">返回</el-button>
        </div>
      </div>
    </div>
    <div
      style="width: 1200px;margin: auto;display: flex;justify-content: space-between;align-items: center;height: 100px;">
      <div>
        <el-select clearable v-model="formData.camp_id" filterable placeholder="学院" @change="paramChange"
          style="width: 160px;margin-right: 10px;padding-bottom: 5px;">
          <el-option v-for="item in campList" :key="item.camp_id" :label="item.camp_name" :value="item.camp_id" />
        </el-select>
        <el-select clearable v-model="formData.azz_id_v2" filterable placeholder="专业" @change="paramChange"
          style="width: 160px;margin-right: 10px;padding-bottom: 5px;">
          <el-option v-for="item in subjectOptions" :key="item.azz_id_v2" :label="item.azz_name_v2"
            :value="item.azz_id_v2" />
        </el-select>
        <el-select clearable v-model="formData.azz_ssnj_v2" filterable placeholder="年级" @change="paramChange"
          style="width: 160px;margin-right: 10px;padding-bottom: 5px;">
          <el-option v-for="item in gradeOptions" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
      </div>
      <div>
        <el-input clearable v-model="formData.keyword" placeholder="搜索" style="width: 250px;height: 32px;"
          @change="paramChange">
          <template #prepend>
            <el-button :icon="Search" />
          </template>
        </el-input>
      </div>
    </div>
    <div style="width: 1200px;margin: auto;display: flex;flex-wrap: wrap;">
      <div style="width: 300px;padding: 0px 5px 10px 5px;" v-for="item of pageData" @click="goDetail(item)">
        <el-image :src="item.as_img" style="border-radius: 12px;min-height: 100px;width: 290px;height: 188px;" />
        <div style="background-color: white;padding: 5px 10px;">
          <div style="font-size: 16px;">
            {{ item.as_title }}
          </div>
          <div style="display: flex;justify-content: space-between;">
            <div style="color:#6F767E;font-size: 14px;">
              {{ item.as_zy_syxm_v2 }}
            </div>
            <div style="display: flex;">
              <div style="display: flex;margin-right: 20px;">
                <img src="../../../assets/like.png" style="width: 20px;height: 20px;margin-right: 5px;" />
                {{ item.as_zy_dzs_v2 }}
              </div>
              <div style="display: flex;">
                <img src="../../../assets/eye.png" style="width: 25px;height: 20px;margin-right: 5px;">
                {{ item.as_zy_gks_v2 }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex;justify-content: center;padding: 30px 0;">
      <el-pagination layout="prev, pager, next" :page-count="totalPage" prev-text="← 上一页" next-text="下一页 →"
        @current-change="pageChange" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.breadcrumbBg {
  background-image: url(../../../assets/breadcrumbBg.png);
  height: 60px;
  width: 100%;
}

.el-pagination {
  --el-pagination-bg-color: #f7f6fb
}

:deep(.el-pagination button:disabled) {
  background-color: #f7f6fb !important
}

:deep(.el-pagination button.is-disabled) {
  background-color: #f7f6fb !important
}
</style>
