<template>
    <div style="width: 100%;">
        <!-- Swiper 容器 -->
        <div class="group_666" style="position: relative;height: 200px;">
            <swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
                <swiper-slide>
                    <img :src="`${cdnUrl}/img/joinus.png`" style="width: 100%;height: 100%;object-fit: cover;">
                </swiper-slide>
                <swiper-slide>
                    <img :src="`${cdnUrl}/img/joinus.png`" style="width: 100%;height: 100%;object-fit: cover;">
                </swiper-slide>
            </swiper>
        </div>
        <div class="group_2 flex-col" >
            <div class="box_2 flex-col">
                <div class="group_3 flex-wrap" style="padding:20px 20px 40px 20px;">
                    <div class="group_5 flex-col justify-center align-center rightBox" style="width: 100%;">
                        <div class="section_1s flex-col"></div>
                    </div>
                    <div class="group_4 flex-col leftBox">
                        <div class="flex-col justify-between text-center">
                            <span style="font-size: 24px;font-weight: 600;">洛阳灵睿网络技术有限公司</span>
                        </div>
                        <span  style="color: #768597;font-size: 15px;margin-top: 10px;">
                            从一支年轻的创业团队，慢慢发展成为业务遍及全国的信息化，内容支持型互联网公司，我们仍旧保持着始终创业的心态，每一天努力向前，如果你也愿意加入我们，请联系我们的HR，期待与你的会面。
                        </span>
                        <div  style="margin-top: 30px;">
                            <div class="text_13s">
                                <img :src="`${cdnUrl}/img/telphone.png`" alt="" class="imgs">
                                联系电话：17603796680
                            </div>
                            <div class="text_13s" style="margin-top: 15px;">
                                <img :src="`${cdnUrl}/img/wechat.png`" alt="" class="imgs">
                                微信：17603796680
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="box_17s flex-col" style="overflow: hidden;">
            <span class="text_53" style="margin-top: 40px">热门岗位</span>
            <span class="text_54" style="margin-top: 20px;">Company&nbsp;environment</span>
            <div class="hbform">
                <div class="flex boxgs">
                    <div v-for="(item, index) in typeList" @click="openType(item)"
                        :class="typeId == item.id ? 'title active' : 'title'">{{ item.name
                        }}</div>
                </div>
                <div class="flex justify-center align-center flex-wrap" style="padding: 20px;width: 100%;">
                    <div v-for="item in list" class="flex-col box_18s" style="margin-bottom: 20px;">
                        <div class="titless">
                            <div class="a1s">{{ item.name }}</div>
                            <div class="a2s">任职要求请联系HR</div>
                        </div>
                        <div class="line"></div>
                        <div class="bottomss">
                            <div>灵睿网络</div>
                            <div>{{ item.release_time_text }}</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref } from 'vue'
import 'swiper/css'
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade } from "swiper/modules";
import ScrollReveal from 'scrollreveal';
import { NNumberAnimation } from 'naive-ui'
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import 'swiper/css/effect-coverflow';
import 'swiper/css/mousewheel'
import 'swiper/css/grid'
import 'swiper/css/effect-fade'
import 'swiper/css/autoplay'
import * as swiperAni from '@/assets/animate/animate.js'
import $api from '@/service/webRequest'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const { locale } = useI18n()
const cdnUrl = useCdn()
let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
    newsSwiper = swiper
}
const swiperOptionsNews = {
    autoplay: {
        delay: 5000,
        disableOnInteraction: false,
    },
    direction: 'horizontal',
    slidesPerView: 1,
    speed: 500,
    effect: 'fade',
    loop: true,
    modules: [EffectFade, Autoplay, Navigation],
    navigation: {
        nextEl: '#swipen_prev',
        prevEl: '#swipen_next',
    },
}
// 新闻数据
onMounted(() => {
    animate()
    getType();
})
const openType = (item: any) => {
    typeId.value = item.id;
    getList();
}
const typeId = ref(0)
const typeList = ref([])
const getType = () => {
    $api.post("/api/home.recruitment_information/cate", { page: 1, size: 100 })
        .then((res: any) => {
            console.log(res);
            typeId.value = res.data.data.list[0].id;
            typeList.value = res.data.data.list;
            getList();
        })
        .catch((err) => {
            console.dir(err)
        })
}
const list = ref([])
const getList = () => {
    $api.get("/api/home.recruitment_information/index?cate_id=" + typeId.value)
        .then((res: any) => {
            console.log(res)
            list.value = res.data.data.list
        })
        .catch((err) => {
            console.dir(err)
        })
}
const numberAnimationInstRef = ref()
const numberAnimationInstRefKH = ref()
const numberAnimationInstRefJS = ref()
const numberAnimationInstRefHY = ref()
const animate = () => {

    const sr = ScrollReveal();
    sr.reveal('.leftBox', {
        origin: "left",
        distance: "1000px",
        duration: 1300,
        delay: 100,
        opacity: 0,
        scale: 0.9,
        reset: true,
        mobile: true,
    })
    sr.reveal('.rightBox', {
        origin: "right",
        distance: "1000px",
        duration: 1300,
        delay: 100,
        opacity: 0,
        scale: 0.9,
        reset: true,
        mobile: true,
    })
    sr.reveal('.topBox', {
        origin: "top",
        distance: "1000px",
        duration: 1300,
        delay: 100,
        opacity: 0,
        scale: 0.9,
        reset: true,
        mobile: true,
    })
    sr.reveal('.bottomBox', {
        origin: "bottom",
        distance: "1000px",
        duration: 1300,
        delay: 100,
        opacity: 0,
        scale: 0.9,
        reset: true,
        mobile: true,
    })
    sr.reveal('.numberTopBox', {
        origin: "top",
        distance: "1000px",
        duration: 1300,
        delay: 100,
        opacity: 0,
        scale: 0.9,
        reset: true,
        mobile: true,
        beforeReveal: function (el: any) {
            numberAnimationInstRef.value.play()
            numberAnimationInstRefKH.value.play()
            numberAnimationInstRefJS.value.play()
            numberAnimationInstRefHY.value.play()
        },
    })
    sr.reveal('.topSj', {
        origin: "bottom",
        distance: "1000px",
        duration: 1300,
        delay: 5,
        opacity: 0,
        scale: 0.9,
        reset: true,
        mobile: true,
        useDelay: 'always',
        interval: 50,
    })
}
</script>

<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.scss";

:deep(.dswper .swiper-slide-next) {
    transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
}

:deep(.dswper .swiper-slide-prev) {
    transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
}

.group_666 .swiper-slide img {
    width: 100%;
    height: 500px;
    height: auto;
    transition: 1s linear 2s;
    transform: scale(1.1, 1.1);
}

.group_666 .swiper-slide-active img,
.swiper-slide-duplicate-active img {
    transition: 6s linear;
    transform: scale(1, 1);
}

.section_1s {
    height: 260px;
    background: var(--allpeople) no-repeat;
    background-size: 100%;
    width: 100%;
    z-index: 10;
}

.text_13s {
    width: 100%;
    height: 48px;
    line-height: 44px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #768597;
    color: #768597;
    font-size: 16px;
    font-family: Microsoft YaHei UI-Regular;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    margin-right: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    .imgs {
        width: 24px;
        height: 24px;
        margin-right: 10px;
    }
}

.box_17s {
    width: 100%;
    background: #F8F8F8;
    justify-content: flex-center;
    padding-bottom: 40px;
}

.hbform {
    width: 100%;
}

.boxgs {
    width: 100%;
    margin-top: 30px;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 0px 20px;
    .title {
        width: 100%;
        padding:10px;
        background: #FFFFFF;
        border-radius: 78px 78px 78px 78px;
        text-align: center;
        font-weight: 400;
        font-size: 14px;
        color: #222222;
        cursor: pointer;

        &.active {
            background: linear-gradient(360deg, #FC7428 0%, #FF9357 100%);
            color: #FFFFFF;
        }
    }
}

.box_18s {
    width: 100%;
    height: 149px;
    background: var(--lianxiyp) 100% no-repeat;
    z-index: 10;
    justify-content: center;
    .line {
        width: 347px;
        height: 1px;
        background: #D8D8D8;
        margin: 0 auto;
    }

    .titless {
        width: 100%;
        padding-top: 20px;
        padding-left: 20px;

        .a1s {
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 700;
            font-size: 18px;
            color: #3D3D3D;
        }

        .a2s {
            margin: 15px 0;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #768597;

        }
    }

    .bottomss {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        color: #768597;
    }
}

@media (max-width: 768px) {
    .group_3 {
        background: #ffffff;
        gap: 0px;
        height: 100%;
    }
}
</style>
