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

import { defineComponent, onMounted, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import PageTabs from "./PageTabs";

import DetailPage from "./DetailPage";
import PageTabsLow from "./PageTabsLow";
import ListPage from "./ListPage";
import DownloadPage from "./DownloadPage";

export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const categoryStore = useCategory();
    const state = reactive({
      currFloor: {} as any,
      currMid: {} as any,
      currTree: {} as any,
      currBg: "",
    });
    watch(
      () => categoryStore.listController.state.list,
      () => {
        initCategory();
      }
    );
    watch(
      () => route.params.id,
      () => {
        initCategory();
      }
    );
    watch(
      () => route.query.cid,
      () => {
        initCategory();
      }
    );
    onMounted(() => {
      initCategory();
    });
    const initCategory = () => {
      const id = route.params.id;
      const currCategory = categoryStore.listController.state.list.find(
        (e: CategoryItem) => {
          return e._id == id;
        }
      );

      if (!currCategory) {
        if (categoryStore.listController.state.list.length > 0) {
          router.replace("/404");
        }
        return;
      }

      if (currCategory.pid == "top") {
        state.currTree = categoryStore.categoryTree.find((e) => {
          return e._id == id;
        });
        state.currMid = state.currTree.children[0];
        if (state.currMid.children && state.currMid.children.length) {
          const cid = route.query.cid;
          if (cid) {
            state.currFloor = state.currMid.children.find((e: any) => {
              return e._id == cid;
            });
          } else {
            state.currFloor = state.currMid.children[0];
          }
        } else {
          state.currFloor = state.currMid;
        }
        return;
      }
      state.currMid = currCategory;
      if (currCategory.children && currCategory.children.length) {
        const cid = route.query.cid;
        if (cid) {
          state.currFloor = currCategory.children.find((e: any) => {
            return e._id == cid;
          });
        } else {
          state.currFloor = currCategory.children[0];
        }
      } else {
        state.currFloor = state.currMid;
      }
      state.currTree = categoryStore.categoryTree.find((e) => {
        return e._id == currCategory.pid;
      });
    };

    return () => {
      return (
        <div class={page}>
          <div
            class={"page_title_box"}
            style={{
              backgroundImage: `url(${
                state.currMid.cover ? state.currMid.cover : state.currTree.cover
              })`,
            }}
          >
            <div class={"title detail_page_w"}>
              <h1>{state.currTree.name}</h1>
              <h2>{state.currTree.subName}</h2>
            </div>
          </div>
          <div class={"page_tabs_box"}>
            <div class="detail_page_w">
              <PageTabs
                data={state.currTree.children}
                activeKey={state.currMid._id}
              />
            </div>
          </div>
          <div class={"page_content"}>
            <div class={"detail_page_w"}>
              {state.currMid.children && state.currMid.children.length > 0 && (
                <PageTabsLow
                  data={state.currMid.children}
                  activeKey={state.currFloor._id}
                />
              )}
              {state.currFloor.type == "detail" && (
                <DetailPage key={state.currFloor._id} data={state.currFloor} />
              )}
              {state.currFloor.type == "list" && (
                <ListPage
                  key={state.currFloor._id}
                  data={state.currFloor}
                  category={state.currMid}
                />
              )}
              {state.currFloor.type == "download" && (
                <DownloadPage
                  key={state.currFloor._id}
                  data={state.currFloor}
                />
              )}
            </div>
          </div>
        </div>
      );
    };
  },
});
const page = css`
  .page_title_box {
    position: relative;
    height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.2s ease-in-out;
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 220px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
      opacity: 0.7;
      z-index: 1;
    }
    .title {
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: 28px;
      z-index: 2;
      h1 {
        font-size: 36px;
        font-weight: 400;
        margin-bottom: 16px;
        color: #fff;
      }
      h2 {
        margin-bottom: 0;
        height: 1em;
        font-size: 14px;
        font-weight: 300;
        color: #fff;
      }
    }
  }
  .page_tabs_box {
    background-color: #fff;
    border-bottom: 1px solid #e5e5e5;
  }
  .page_content {
    padding: 50px 0;
  }
`;
