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

import { ArrowRightOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive, watch, onMounted } from "vue";
import { Empty, TabPane, Tabs } from "ant-design-vue";
import Image from "@/components/Image";
import { useArticle, useCategory } from "@/modules";
import { RouterLink, useRouter } from "vue-router";
import dayjs from "dayjs";
import { renderSummary, renderTitle } from "@/modules/objects";
import CompList from "./CompList";
export default defineComponent({
  setup() {
    const storeCategory = useCategory();
    const storeArt = useArticle();
    const router = useRouter();
    const categoryId = "6464a15b8dcb7ddb98b57a1c";
    const state = reactive({
      activeKey: "",
      tabs: [],
      allList: new Map(),
    });
    watch(
      () => storeCategory.categoryTree.length,
      () => {
        initCategory();
      }
    );
    onMounted(() => {
      initCategory();
    });
    const initCategory = async () => {
      const currCategory = storeCategory.categoryTree.find((e) => {
        return e._id == categoryId;
      });
      if (!currCategory) {
        return;
      }
      const children = currCategory.children;
      const res = children.map((e: any) => {
        if (e.children && e.children.length > 0) {
          return getList(e.children[0]._id);
        }
        return getList(e._id);
      });
      Promise.all(res).then(() => {
        state.tabs = children;
        state.activeKey = children[0]._id;
      });
    };
    const getList = (id: string) => {
      return new Promise(async (resolve) => {
        const query = { page: 1, size: 4, query: JSON.stringify({ cid: id }) };
        const res = await storeArt.getArticleList(query);
        const list = res.list || [];
        state.allList.set(id, list);
        resolve(true);
      });
    };
    const turnPage = (aid: string, cid: string) => {
      router.push({
        name: "article",
        params: { id: cid },
        query: { aid },
      });
    };
    return () => (
      <div class={[page, "home_lay_item_box"]}>
        <div class={"global_w"}>
          <Tabs activeKey={state.activeKey} class={"talent_tab"}>
            {{
              renderTabBar: () => {
                return (
                  <div class={"ant-tabs-nav"}>
                    <div class={"home_lay_title"}>
                      教育教学<span>/</span>
                      <span>Education & teaching</span>
                    </div>
                    <div class={"ant-tabs-nav-wrap"}>
                      <div class={"ant-tabs-nav-list"}>
                        {state.tabs.map((e: any) => {
                          return (
                            <div
                              class={`ant-tabs-tab ${
                                state.activeKey == e._id
                                  ? "ant-tabs-tab-active"
                                  : ""
                              }`}
                              key={e._id}
                            >
                              <div
                                class={"ant-tabs-tab-btn"}
                                onClick={() => {
                                  state.activeKey = e._id;
                                }}
                              >
                                {e.name}
                              </div>
                            </div>
                          );
                        })}
                      </div>
                    </div>
                  </div>
                );
              },
              default: () => {
                return state.tabs.map((item: any) => {
                  let currId = item._id;
                  if (item.children && item.children.length > 0) {
                    currId = item.children[0]._id;
                  }
                  const list = state.allList.get(currId);
                  return (
                    <TabPane tab={item.name} key={item._id}>
                      <CompList
                        key={item._id}
                        list={list}
                        categoryId={item._id}
                      />
                    </TabPane>
                  );
                });
              },
            }}
          </Tabs>
        </div>
      </div>
    );
  },
});
const page = css`
  position: relative;
  &::after {
    position: absolute;
    content: "";
    right: 0;
    top: 40%;
    width: 40%;
    height: 200px;
    background-color: rgba(53, 152, 107, 0.1);
  }
  .talent_tab {
    z-index: 2;
    .ant-tabs-nav {
      margin-bottom: 40px;
      &::before {
        display: none;
      }
      .home_lay_title {
        margin-bottom: 0;
      }
      .ant-tabs-nav-wrap {
        justify-content: flex-end;
      }
    }
    .ant-tabs-tab {
      padding: 14px 0;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.8);
      & + .ant-tabs-tab {
        margin: 0 0 0 60px;
      }
      &.ant-tabs-tab-active {
        .ant-tabs-tab-btn {
          color: #000;
        }
        &::after {
          position: absolute;
          content: "";
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 28px;
          height: 2px;
          background-color: var(--vt-c-primary);
        }
      }
    }
    .list_more {
      a {
        color: var(--vt-c-primary);
      }
      .arrow {
        border-color: var(--vt-c-primary);
      }
    }
  }

  @media screen and (max-width: 1280px) {
    .talent_tab {
      .ant-tabs-nav {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
        .home_lay_title {
          margin-bottom: 20px;
        }
        .ant-tabs-nav-wrap {
          padding-bottom: 10px;
          justify-content: flex-start;
          overflow-x: auto;
        }
        .ant-tabs-tab {
          font-size: 16px;
          & + .ant-tabs-tab {
            margin: 0 0 0 30px;
          }
        }
      }
    }
  }
  @media screen and (max-width: 750px) {
    .talent_tab {
      .ant-tabs-nav {
        .home_lay_title {
          margin-bottom: 10px;
        }
      }
    }
  }
`;
