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={"auto"}
              onSwiper={initSwiper}
            >
              {state.list.map((e: ArticleItem) => {
                return (
                  <SwiperSlide class={"teacher_slide"}>
                    <div class={"teacher_item"} onClick={() => turnPage(e._id)}>
                      <Image src={e.cover} />
                      <div class={"item_footer"}>
                        <div class={"name"}>{e.title}</div>
                      </div>
                    </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_slide {
        width: 370px;
      }
    }
    .teacher_item {
      width: 100%;
      height: 500px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.3s ease-in-out;
      }
      &:hover {
        .item_footer {
          transform: translateY(0);
        }
        img {
          transform: scale(1.2);
        }
      }
      .item_footer {
        position: absolute;
        display: inline-flex;
        flex-direction: column;
        justify-content: flex-end;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 140px;
        padding: 0 24px 20px;
        transform: translateY(100%);
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
        transition: all 0.3s ease-in-out;
      }
      .name {
        color: #fff;
        font-size: 18px;
        font-weight: 600;
      }
    }
  }
  .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%;
    }
  }
  @media screen and (max-width: 1280px) {
    .teachers_box {
      .teachers_swiper {
        width: 100%;
        height: 400px;
        .teacher_item {
          height: 400px;
        }
        .teacher_slide {
          width: 290px;
        }
      }
    }
  }
`;
