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";
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) => {
        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: 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 },
      });
    };
    const renderTitle = (title?: string) => {
      if (title && title.length > 30) {
        return title.substring(0, 30) + "...";
      }
      return title;
    };
    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 justify-end"}>
                      <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) => {
                  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) => {
                            return (
                              <div class={"list_item"}>
                                <div
                                  class={"item"}
                                  onClick={() => {
                                    turnPage(e._id, item._id);
                                  }}
                                >
                                  <div class={"list_img"}>
                                    <Image src={e.cover} />
                                  </div>
                                  <div class={"info_box"}>
                                    <div class={"item_tit"}>
                                      {renderTitle(e.title)}
                                    </div>
                                    <div class={"item_desc"}>
                                      {e.summary + "..."}
                                    </div>
                                    <div class={"item_date"}>
                                      {dayjs(e.createTime).format("YYYY.MM.DD")}
                                    </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;
  &::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-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);
        }
      }
    }
    .tab_list {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      .list_item {
        width: 100%;
        background-color: #fff;
        overflow: hidden;
        position: relative;
        .item {
          position: relative;
          display: block;
          border-bottom: 2px solid rgba(159, 159, 159, 0.5);
          cursor: pointer;
          &::before {
            content: "";
            position: absolute;
            bottom: 0;
            right: 0;
            border-width: 6px;
            border-color: transparent rgba(159, 159, 159, 0.5)
              rgba(159, 159, 159, 0.5) transparent;
          }
          &::after {
            content: "";
            position: absolute;
            bottom: -2px;
            right: 0;
            width: 0;
            height: 2px;
            background-color: var(--vt-c-primary);
            transition: width 0.3s ease-in-out;
          }
          &:hover {
            &::before {
              border-color: transparent var(--vt-c-primary) var(--vt-c-primary)
                transparent;
            }
            &::after {
              width: 100%;
            }
            img {
              transform: scale(1.2);
            }
          }
        }
        .list_img {
          width: 100%;
          height: 390px;
          overflow: hidden;
        }
        img {
          width: 100%;
          height: 390px;
          object-fit: cover;
          transition: all 0.3s ease-in-out;
        }
        .info_box {
          padding: 20px 18px;
        }
        .item_tit {
          font-size: 20px;
          line-height: 28px;
          height: 56px;
          overflow: hidden;
          color: #333333;
        }
        .item_desc {
          margin-top: 20px;
          font-size: 16px;
          line-height: 24px;
          font-weight: 400;
          color: #666666;
          word-break: break-all;
        }
        .item_date {
          font-size: 14px;
          margin-top: 30px;
          font-weight: 300;
          color: #999999;
        }
      }
    }
  }
  .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%;
    }
  }
`;
