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

import { ArrowRightOutlined } from "@ant-design/icons-vue";
import { Empty, TabPane, Tabs } from "ant-design-vue";
import { defineComponent, onMounted, reactive, watch } from "vue";
import { useArticle, useCategory } from "@/modules";
import { RouterLink, useRouter } from "vue-router";
import Image from "@/components/Image";
export default defineComponent({
  setup() {
    const storeCategory = useCategory();
    const storeArt = useArticle();
    const router = useRouter();
    const categoryId = "6464a6478dcb7ddb98b57a24";
    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) => {
        return getList(e._id);
      });
      Promise.all(res).then((e) => {
        state.tabs = children;
        state.activeKey = children[0]._id;
      });
    };
    const getList = (id: string) => {
      return new Promise(async (resolve) => {
        const query = { page: 1, size: 7, 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 white"}>
                      师生作品<span>/</span>
                      <span>Works</span>
                    </div>
                    <div class={"ant-tabs-nav-wrap justify-end"}>
                      <div class={"ant-tabs-nav-list"}>
                        {state.tabs.map((e: CategoryItem) => {
                          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: CategoryItem) => {
                  const list = state.allList.get(item._id);

                  return (
                    <TabPane tab={item.name} key={item._id}>
                      {list.length > 0 ? (
                        <div class={"tab_list"}>
                          {list.map((e: ArticleItem, index: number) => {
                            const next = list[index + 1];
                            if (index == 0) {
                              return (
                                <div class={"list_item"}>
                                  <div
                                    class={"item_link"}
                                    onClick={() => {
                                      turnPage(e._id, item._id);
                                    }}
                                  >
                                    <Image src={e.cover} />
                                    <div class={"item_txt"}>
                                      <div class={"name"}>{e.title}</div>
                                    </div>
                                  </div>
                                </div>
                              );
                            }
                            if (index % 2 == 0) {
                              return null;
                            }
                            return (
                              <div class={"list_item"}>
                                <div class={"item_lay"}>
                                  <div
                                    class={"item_link"}
                                    onClick={() => {
                                      turnPage(e._id, item._id);
                                    }}
                                  >
                                    <Image src={e.cover} />
                                    <div class={"item_txt"}>
                                      <div class={"name"}>{e.title}</div>
                                    </div>
                                  </div>
                                </div>
                                <div class={"item_lay"}>
                                  <div
                                    class={"item_link"}
                                    onClick={() => {
                                      turnPage(next._id, item._id);
                                    }}
                                  >
                                    <Image src={next.cover} />
                                    <div class={"item_txt"}>
                                      <div class={"name"}>{next.title}</div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            );
                          })}
                        </div>
                      ) : (
                        <div class={"ant-list-empty-text"}>
                          <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                        </div>
                      )}

                      <div class={"list_more"}>
                        <RouterLink to={`/detail/${item._id}`}>
                          查看更多
                          <ArrowRightOutlined class={"arrow"} />
                        </RouterLink>
                      </div>
                    </TabPane>
                  );
                });
              },
            }}
          </Tabs>
        </div>
      </div>
    );
  },
});
const page = css`
  position: relative;
  background: url("@/assets/bg_works.png") no-repeat center top/100% auto;

  .talent_tab {
    z-index: 2;
    .ant-tabs-nav {
      margin-bottom: 40px;
      &::before {
        display: none;
      }
      .home_lay_title {
        margin-bottom: 0;
      }
    }
    .ant-tabs-tab {
      padding: 14px 0;
      font-size: 18px;
      color: rgba(255, 255, 255, 0.8);
      & + .ant-tabs-tab {
        margin: 0 0 0 60px;
      }
      &.ant-tabs-tab-active {
        .ant-tabs-tab-btn {
          color: #fff;
        }
        &::after {
          position: absolute;
          content: "";
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 28px;
          height: 2px;
          background-color: #fff;
        }
      }
    }
    .tab_list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      .list_item {
        height: 800px;
        .item_lay {
          height: 388px;
          &:first-child {
            margin-bottom: 24px;
          }
        }
        .item_link {
          display: block;
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
          cursor: pointer;
          .item_txt {
            position: absolute;
            left: 0;
            bottom: 0;
            padding: 30px 40px;
            width: 100%;
            color: #fff;
            background: linear-gradient(
              180deg,
              rgba(0, 0, 0, 0) 0%,
              #000000 100%
            );
            opacity: 0;
            overflow: hidden;
            .name {
              font-size: 20px;
              font-weight: 600;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .authors {
              margin-top: 4px;
              font-size: 14px;
              font-weight: 400;
            }
          }
          &:hover {
            img {
              transform: scale(1.2);
            }
            .item_txt {
              animation: fadeInUp 0.3s ease-in-out;
              animation-fill-mode: forwards;
            }
          }
        }
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: all 0.3s ease-in-out;
        }
      }
    }
  }
  .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%;
    }
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translate3d(0, 100%, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }
`;
