import { css } from "@linaria/core";

import { ArrowRightOutlined } from "@ant-design/icons-vue";
import { defineComponent, nextTick, onMounted, reactive, ref } from "vue";

import { Swiper, SwiperSlide } from "swiper/vue";
import Image from "@/components/Image";
import { useArticle } from "@/modules";
import { RouterLink, useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const storeArt = useArticle();
    const router = useRouter();
    const categoryId = "6464ae7a8dcb7ddb98b57a28";
    const state = reactive({
      list: [],
    });
    const swiperRef = ref();
    const initSwiper = (swiper: any) => {
      swiperRef.value = swiper;
    };
    onMounted(() => {
      getList();
    });

    const getList = async () => {
      const query = {
        page: 1,
        size: 10,
        query: JSON.stringify({ cid: categoryId }),
      };
      const res = await storeArt.getArticleList(query);
      const list = res.list || [];
      state.list = list;
      nextTick(() => {
        if (swiperRef.value) {
          swiperRef.value.update();
        }
      });
    };
    const turnPage = (aid: string) => {
      router.push({
        name: "article",
        params: { id: categoryId },
        query: { aid },
      });
    };
    return () => (
      <div class={[page, "home_lay_item_box"]}>
        <div>
          <div class={"home_lay_title global_w"}>
            教师队伍<span>/</span>
            <span>FACUlTY</span>
          </div>
          <div class={"teachers_box"}>
            <Swiper
              class={"teachers_swiper"}
              spaceBetween={24}
              slidesPerView={5}
              onSwiper={initSwiper}
            >
              {state.list.map((e: ArticleItem) => {
                return (
                  <SwiperSlide>
                    <div class={"teacher_item"} onClick={() => turnPage(e._id)}>
                      <Image src={e.cover} />
                    </div>
                  </SwiperSlide>
                );
              })}
            </Swiper>
          </div>
          <div class={"list_more"}>
            <RouterLink to={`/detail/${categoryId}`}>
              查看更多
              <ArrowRightOutlined class={"arrow"} />
            </RouterLink>
          </div>
        </div>
      </div>
    );
  },
});
const page = css`
  background: linear-gradient(180deg, #f3fbf1 0%, #ffffff 100%);
  .teachers_box {
    .teachers_swiper {
      width: 100%;
      height: 500px;
    }
    .teacher_item {
      width: 100%;
      height: 500px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .list_more {
    margin-top: 35px;
    text-align: center;
    a {
      color: var(--vt-c-primary);
    }
    .arrow {
      margin-left: 8px;
      padding: 2px;
      border: 1px solid var(--vt-c-primary);
      font-size: 12px;
      border-radius: 50%;
    }
  }
`;
