<script setup>
import img_lczs from "~/assets/zbkt/bar.png";
import img_ssys from "~/assets/zbkt/ssys.png";
import img_wlzb from "~/assets/zbkt/wlzb.png";
import img_ztzb from "~/assets/zbkt/ztzb.png";
import img_kcb1 from "~/assets/zbkt/kcb.png";
import { user } from "@/store/user.js";
const router = useRouter();
function routeTo(url) {
  router.push(url);
}

initData();
const carouselData = ref([]);
function initData() {
  request({
    url: "/kzkt/ssyskc_kcb/kcb_list",
    data: {},
  }).then((res) => {
    if (res.code == 1 && res.data.one_info[0]) {
      carouselData.value = res.data.one_info;
    }
  });
}
</script>

<template>
  <common-header />
  <div class="flex flex-col w-full items-center">
    <div class="w-full mb-20">
      <img :src="img_lczs" alt="" class="w-full" />
    </div>

    <div class="flex justify-between w-1200px mb-20">
      <div @click="user.user_role_id < 76 ? routeTo('/zbkt/ssys/1') : ''" class="
          flex
          shadow-md
          w-350px
          h-140px
          cursor-pointer
          transform
          hover:-translate-y-2
          rounded-md
          px-6
          py-12
          flex_center
        ">
        <div class="w-10 mr-6">
          <img :src="img_ssys" alt="" class="w-full" />
        </div>
        <div>
          <div class="text-xl font-bold">全景课堂</div>
          <!-- <div class="text-sm text-hex-9D9AB9">全景课堂全景课堂全景课堂</div> -->
        </div>
      </div>

      <div @click="routeTo('/zbkt/wlzb')" class="
          flex
          shadow-md
          w-350px
          h-140px
          cursor-pointer
          transform
          hover:-translate-y-2
          rounded-md
          px-6
          py-12
          flex_center
        ">
        <div class="w-10 mr-8">
          <img :src="img_wlzb" alt="" class="w-full" />
        </div>
        <div>
          <div class="text-xl font-bold">名师优课</div>
          <!-- <div class="text-sm text-hex-9D9AB9">名师优课名师优课名师优课</div> -->
        </div>
      </div>

      <div @click="routeTo('/zbkt/ztzb')" class="
          flex
          shadow-md
          w-390px
          h-140px
          cursor-pointer
          transform
          hover:-translate-y-2
          rounded-md
          px-6
          py-12
          flex_center
        ">
        <div class="w-10 mr-8">
          <img :src="img_ztzb" alt="" class="w-full" />
        </div>
        <div>
          <div class="text-xl font-bold">艺术现场</div>
          <!-- <div class="text-sm text-hex-9D9AB9">艺术现场艺术现场艺术现场</div> -->
        </div>
      </div>
    </div>

    <div class="w-1440px flex justify-center mb-20">
      <el-carousel class="w-1280px h-720px" height="720px">
        <el-carousel-item v-for="item in carouselData" :key="item">
          <img :src="item" style="width: 100%; height: 100%" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
  <common-footer />
</template>
