<script setup lang='ts'>
import type { RouteLocationRaw } from 'vue-router'
import banner from '~/assets/home/banner.webp'
import tag from '~/assets/home/tag.webp'
import icon3 from '~/assets/home/icon-3@2x.webp'
import icon4 from '~/assets/home/icon-4@2x.webp'
import icon5 from '~/assets/home/icon-5@2x.webp'
import icon6 from '~/assets/home/icon-6@2x.webp'
import icon7 from '~/assets/home/icon-7@2x.webp'
import icon8 from '~/assets/home/icon-8@2x.webp'
import icon9 from '~/assets/home/icon-9@2x.webp'
import icon10 from '~/assets/home/icon-10@2x.webp'
import icon11 from '~/assets/home/icon-11@2x.webp'
import icon12 from '~/assets/home/icon-12@2x.webp'
import icon18 from '~/assets/home/icon-18@2x.webp'

const { data } = await request({
  url: '/txwx/mszy_kc/main',
  data: {
    token: undefined,
  },
}).catch((error) => {
  console.error(error)
})

const user_data_list = [{ k: 'user_num', v: '总用户数', icon: icon8 }, { k: 'school_num', v: '总学校数', icon: icon9 }, { k: 'teacher_num', v: '教师用户', icon: icon11 }, { k: 'student_num', v: '学生用户', icon: icon10 }, { k: 'today_login_num', v: '今日登录', icon: icon12 }]

const router = useRouter()
function routerPush(args?: RouteLocationRaw) {
  if (args)
    router.push(args)
}
</script>

<template>
  <el-scrollbar height="100vh">
    <common-header>
      <div class="flex flex-col items-center w-full">
        <div class="w-full flex items-center w-full relative min-h-400px">
          <img :src="banner" alt="" class="w-full">
        </div>
        <div class="w-1200px flex flex-col items-center">
          <!-- <input class="w-full h-80px border rounded-md text-22px text-hex-707070 px-120px -mt-40px outline-none mb-40px" placeholder="请输入你想搜索的内容"> -->

          <div class="w-full mb-6">
            <div class="flex_center relative w-full py-6">
              <div class="flex_center">
                <span class="w-48px h-48px flex_center mr-16px">
                  <img class="max-w-48px max-h-48px" :src="icon3" alt="">
                </span>
                <span class="text-36px text-hex-131313">名师在线</span>
              </div>

              <div
                class="absolute right-0 text-20px text-hex-1259A1 cursor-pointer flex_center"
                @click="routerPush({ name: 'home_mszx_index' })"
              >
                更多<i:ic:sharp-keyboard-double-arrow-right />
              </div>
            </div>
            <div class="grid grid-cols-3 gap-20px">
              <div
                v-for="({ tmk_id, tmk_img }) in data.mszx" :key="tmk_id" class="shadow-md cursor-pointer"
                @click="routerPush({ name: 'home_mszx_chapter', params: { tmk_id } })"
              >
                <img :src="tmk_img" alt="" class="h-217px">
              </div>
            </div>
          </div>
          <div class="w-full mb-6">
            <div class="flex_center relative w-full py-6">
              <div class="flex_center">
                <span class="w-48px h-48px flex_center mr-16px">
                  <img class="max-w-48px max-h-48px" :src="icon4" alt="">
                </span>
                <span class="text-36px text-hex-131313">特色课程</span>
              </div>

              <div
                class="absolute right-0 text-20px text-hex-1259A1 cursor-pointer flex_center"
                @click="routerPush({ name: 'home_tskc_index' })"
              >
                更多<i:ic:sharp-keyboard-double-arrow-right />
              </div>
            </div>
            <div>
              <div class="grid grid-cols-5 grid-rows-2 gap-20px h-466px">
                <div
                  v-for="({ ttk_id, ttk_img }, i) in data.tskc" :key="ttk_id"
                  class=" bg-light-50 text-100px flex_center shadow-md cursor-pointer"
                  :class="i === 1 && `col-span-2 row-span-2`"
                  @click="routerPush({ name: 'home_tskc_chapter', params: { ttk_id } })"
                >
                  <img :src="ttk_img" alt="">
                </div>
              </div>
            </div>
          </div>
          <div class="w-full mb-6">
            <div class="flex_center relative w-full py-6">
              <div class="flex_center">
                <span class="w-48px h-48px flex_center mr-16px">
                  <img class="max-w-48px max-h-48px" :src="icon7" alt="">
                </span>
                <span class="text-36px text-hex-131313">作业辅导</span>
              </div>

              <div
                class="absolute right-0 text-20px text-hex-1259A1 cursor-pointer flex_center"
                @click="routerPush({ name: 'home_zyfd_index' })"
              >
                更多<i:ic:sharp-keyboard-double-arrow-right />
              </div>
            </div>
            <div class="grid grid-cols-3 gap-20px">
              <div
                v-for="({ tz_id, tz_img }) in data.zyfd" :key="tz_id" class=" cursor-pointer"
                @click="routerPush({ name: 'home_zyfd_detail', params: tz_id })"
              >
                <img :src="tz_img" alt="" class="h-217px">
              </div>
            </div>
          </div>
          <div class="w-full mb-12">
            <div class="flex_center relative w-full py-6">
              <div class="flex_center">
                <span class="w-48px h-48px flex_center mr-16px">
                  <img class="max-w-48px max-h-48px" :src="icon5" alt="">
                </span>
                <span class="text-36px text-hex-131313">家庭教育</span>
              </div>

              <div
                class="absolute right-0 text-20px text-hex-1259A1 cursor-pointer flex_center"
                @click="routerPush({ name: 'home_jtjy_index' })"
              >
                更多<i:ic:sharp-keyboard-double-arrow-right />
              </div>
            </div>
            <div class="grid grid-cols-3 gap-20px">
              <div
                v-for="({ tjk_id, tjk_img, tjzx_name }) in data.jtjy" :key="tjk_id"
                class="shadow-md cursor-pointer relative mb-80px"
                @click="routerPush({ name: 'home_jtjy_chapter', params: { tjk_id } })"
              >
                <img :src="tjk_img" alt="" class="h-217px">
                <div class="absolute left-30px right-30px h-96px -bottom-80px bg-light-50 shadow rounded">
                  <div class="mt-16px flex">
                    <span class="w-24px  flex_center mr-16px">
                      <img class="max-w-24px " :src="icon18" alt="">
                    </span>
                    <span class="text-24px text-hex-000">{{ tjzx_name }}</span>
                  </div>
                  <div class="flex justify-end px-4 mt-24px">
                    <span class="text-base text-hex-1259A1 flex_center">了解详情 <i:material-symbols:arrow-right-alt /></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full relative mb-6 text-white">
            <img :src="tag" alt="">
            <div class="absolute inset-0 flex justify-evenly items-center py-20">
              <div v-for="({ k, v, icon }) in user_data_list" :key="k" class="flex flex-col items-center space-y-8">
                <span class="w-60px h-60px flex_center">
                  <img class="max-w-60px max-h-60px" :src="icon" alt="">
                </span>
                <span class="text-20px">{{ v }}</span>
                <span class="text-36px">{{ data.user_data[k] }}</span>
              </div>
            </div>
          </div>
          <div class="w-full mb-6">
            <div class="flex_center relative w-full py-6">
              <div class="flex_center">
                <span class="w-48px h-48px flex_center mr-16px">
                  <img class="max-w-48px max-h-48px" :src="icon6" alt="">
                </span>
                <span class="text-36px text-hex-131313">名师工作室</span>
              </div>

              <div
                class="absolute right-0 text-20px text-hex-1259A1 cursor-pointer flex_center"
                @click="routerPush({ name: 'home_msgzs_index' })"
              >
                更多<i:ic:sharp-keyboard-double-arrow-right />
              </div>
            </div>
            <div class="grid grid-cols-3 gap-20px">
              <div
                v-for="({ tm_id, tm_img }) in data.msgzs" :key="tm_id" class="shadow-md cursor-pointer"
                @click="routerPush({ name: 'home_msgzs_detail', params: { id: tm_id } })"
              >
                <img :src="tm_img" alt="" class="h-217px">
              </div>
            </div>
          </div>
        </div>
      </div>
    </common-header>
  </el-scrollbar>
</template>
