<script setup>
import bannerImg from '~/assets/szmsg_tskc/banner.png';
import { timestamp2string } from '~/utils/string';
let props = defineProps({
  id: String
})

let szmsg_school_banner = $ref([])
function queryDetail() {
  return request({
    url: '/szmsg/school/detail',
    data: {
      ss_id: props.id
    }
  }).then(res => {
    if (res.code === '1') {
      szmsg_school_banner = JSON.parse(res.data.one_info.ss_banner_img)
    }
  })
}


let szmsg_school_notice = $ref([])
request({
  url: '/szmsg/school_notice/index',
  data: {
    ss_id: props.id
  }
}).then(res => {
  if (res.code === '1') {
    szmsg_school_notice = res.data.page_data
  }
})


let queryForm = reactive({
  grade_id: undefined,
  subject_id: undefined,
  limit: 6,
  page: 1
})

watch(
  queryForm,
  () => {
    queryData()
  }
)

let nj = $ref([])
let km = $ref([])

function queryParams() {
  return Promise.all([
    request({
      url: '/jcxx/grade/index',
      data: {
        limit: 99
      }
    }).then(res => {
      if (res.code === '1') {
        nj = [{ n: '全部', v: undefined }].concat(res.data.page_data.map(({ grade_name, grade_id }) => ({ v: grade_id, n: grade_name })))
      }
    })
    ,
    request({
      url: '/jcxx/subject/index',
      data: {
        limit: 99
      }
    }).then(res => {
      if (res.code === '1') {
        km = [{ n: '全部', v: undefined }].concat(res.data.page_data.map(({ subject_name, subject_id }) => ({ v: subject_id, n: subject_name })))
      }
    })
  ])
}

let data_zp = $ref([])
let total = $ref(0)
function queryData() {
  return request({
    url: '/szmsg/school_zp/index',
    data: {
      ss_id: props.id,
      ...queryForm
    }
  }).then(res => {
    if (res.code === '1') {
      data_zp = res.data.page_data
      total = res.data.total_rows * 1
      console.log('total :>> ', total);
    }
  })
}

let data_yxzp = $ref([])
function queryYxzp() {
  return request({
    url: '/szmsg/school_zp/index',
    data: {
      ss_id: props.id,
      limit: 7,
      ssz_excellence: 1
    }
  }).then(res => {
    if (res.code === '1') {
      data_yxzp = res.data.page_data
    }
  })
}

let loading = $ref(true)

Promise.all([queryDetail(), queryData(), queryParams(), queryYxzp()]).then(() => {
  loading = false
})

</script>

<template>
  <common-header/>
  <div class="w-full flex_center bg-white shadow">
    <div class="w-1400px flex flex-between py-2">
      <div class="flex-auto">
        <breadcrumb-text title="艺术视野-特色课程展-详情"></breadcrumb-text>
      </div>
      <div class="flex-none w-360px">
        <search-input></search-input>
      </div>
    </div>
  </div>

  <div class="w-full flex_center mt-2 p-6 bg-hex-FCFEFF" v-loading="loading">
    <div class="w-1400px flex flex-col">
      <div class="w-full flex mb-4">
        <div class="flex-auto">
          <el-carousel height="450px">
            <el-carousel-item v-for="item in szmsg_school_banner">
              <img class="w-full h-full object-contain object-center" :src="getFullUrl(item.banner_img)"
                :alt="item.banner_name" />
            </el-carousel-item>
          </el-carousel>
        </div>


        <div class="shadow rounded p-4 flex-col flex w-300px ml-4 flex-none">
          <div class="text-l8px text-hex-222 font-bold mb-4">通知公告</div>
          <div class="flex-auto">
            <el-timeline>
              <el-timeline-item v-for="(n, index) in szmsg_school_notice" :key="index" type="primary" hollow
                :timestamp="timestamp2string(n.create_dateline*1000)">
                {{ n.ssn_content }}
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>

      <div class="w-full flex mb-4">
        <div class="flex-auto">
          <div class="text-l8px text-hex-222 font-bold mb-4">学校课程</div>
          <check-row v-model="queryForm.grade_id" label="年级" :items="nj"></check-row>
          <check-row v-model="queryForm.subject_id" label="科目" :items="km"></check-row>

          <template v-if="data_zp.length">
            <div class="w-full grid grid-cols-3">
              <div class=" flex_center p-2 mb-4" v-for="i in data_zp">
                <div class="w-268px h-204px rounded-xl shadow bg-white flex flex-col overflow-hidden cursor-pointer"
                  :key="i">
                  <div class="w-full flex-none h-157px relative">
                    <img :src="getFullUrl(i.ssz_img)" alt="" class="w-full h-full object-contain object-center" />
                  </div>
                  <div class="p-2 flex justify-between items-center flex-auto">
                    <span>{{ i.ssz_name }}</span>
                    <el-rate disabled :model-value="i.ssz_star_num*1"></el-rate>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <div v-else class="flex justify-center w-full h-440px">
            <el-empty description="暂无数据" />
          </div>

          <div class="flex justify-end mt-8">
            <el-pagination background layout="prev, pager, next" :total="total" v-model:page-size="queryForm.limit"
              v-model:current-page="queryForm.page" />
          </div>
        </div>

        <div class="shadow rounded p-4 flex-col flex w-520px ml-4">
          <div class="text-l8px text-hex-222 font-bold mb-4">优秀作品</div>
          <div class="flex-auto">
            <template v-if="data_yxzp.length">
              <div class="flex mb-4 cursor-pointer" v-for="i in data_yxzp">
                <div class="w-110px h-70px flex-none relative overflow-hidden">
                  <img :src="getFullUrl(i.ssz_img)" alt="" class="w-full h-full rounded-sm overflow-hidden  object-contain object-center" />
                </div>
                <div class="px-1 leading-tight flex flex-col">
                  <span>{{ i.ssz_name }}</span>
                  <el-rate disabled :model-value="i.ssz_star_num*1"></el-rate>
                </div>
              </div>
            </template>

            <div v-else class="flex justify-center w-full">
              <el-empty description="暂无数据" />
            </div>



          </div>
        </div>
      </div>
    </div>
  </div>
  <common-footer/>
</template>
