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

import { useArticle } from "@/modules";
import { defineComponent, onMounted, reactive } from "vue";
import CompList from "./CompList";
export default defineComponent({
  setup() {
    const storeArt = useArticle();
    const categoryId = "6464b7398dcb7ddb98b57a60";
    const state = reactive({
      list: [],
    });

    onMounted(() => {
      getList();
    });

    const getList = async () => {
      const query = {
        page: 1,
        size: 4,
        query: JSON.stringify({ cid: categoryId }),
      };
      const res = await storeArt.getArticleList(query);
      const list = res.list || [];
      state.list = list;
    };

    return () => (
      <div class={[page, "home_lay_item_box"]}>
        <div class={"global_w"}>
          <div class={"home_lay_title white "}>
            科研创作<span>/</span>
            <span>Scientific Research</span>
          </div>
          <CompList list={state.list} categoryId={categoryId} />
        </div>
      </div>
    );
  },
});
const page = css`
  position: relative;
  background: url("@/assets/bg_research.png") no-repeat center top/100% auto;

  @media screen and (max-width: 1280px) {
    background-size: cover;
  }
`;
