import { css } from "@linaria/core";
import { MenuOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive } from "vue";
import Menu from "./Menu";
import { useCategory } from "@/modules";
import { Drawer } from "ant-design-vue";
import MobileMenu from "./MobileMenu";

export default defineComponent(() => {
  const storeCategory = useCategory();
  const state = reactive({
    visible: false,
  });
  return () => {
    const topCate = storeCategory.categoryTree.filter((e: CategoryItem) => {
      return e.isHome == false;
    });
    const mainCate = storeCategory.categoryTree.filter((e: CategoryItem) => {
      return e.isHome == true;
    });
    return (
      <div class={HeaderLayout}>
        <div class={"lay_top flex align-center justify-between"}>
          <div class={"tips"}>立足四川、面向全国，贴近行业，服务社会。</div>
          <div class={"top_links"}>
            {topCate.map((e) => {
              return (
                <router-link to={`/detail/${e._id}`}>{e.name}</router-link>
              );
            })}
          </div>
        </div>
        <div class={"lay_menu flex"}>
          <div class={"menu_logo"}>
            <router-link to="/">
              <img src={getImageUrl("logo_header.png")} />
            </router-link>
          </div>
          <div class={"menu flex-1"}>
            <Menu data={mainCate} />
          </div>
          <div class={"mobileMenu"}>
            <MenuOutlined
              onClick={() => {
                state.visible = true;
              }}
            />
          </div>
          <Drawer
            width={200}
            closable={false}
            visible={state.visible}
            onClose={() => {
              state.visible = false;
            }}
          >
            <MobileMenu
              onChange={() => {
                state.visible = false;
              }}
            />
          </Drawer>
        </div>
      </div>
    );
  };
});
const HeaderLayout = css`
  .lay_top {
    padding: 10px 30px;
    background: #242424;
    color: var(--vt-c-white);
    .tips {
      width: 300px;
    }
    a {
      color: var(--vt-c-white);
      &:hover {
        text-decoration: underline;
      }
    }
    .top_links {
      flex: 1;
      padding-left: 50px;
      text-align: right;
      a {
        display: inline-block;
        width: 10%;
        max-width: 130px;
        text-align: center;
      }
    }
  }
  .lay_menu {
    align-items: center;
    padding: 16px 30px;
    background: var(--vt-c-primary);
    .menu_logo {
      img {
        max-width: 300px;
        height: 54px;
        object-fit: contain;
      }
    }
    .mobileMenu {
      display: none;
    }
    .menu {
      padding-left: 50px;
    }
  }
  @media screen and (max-width: 1280px) {
    .lay_top {
      display: none;
    }
    .lay_menu {
      padding: 16px 20px;
      justify-content: space-between;
      .menu_logo {
        img {
          height: 30px;
        }
      }
      .menu {
        display: none;
      }
      .mobileMenu {
        display: block;
        color: #fff;
        cursor: pointer;
        font-size: 28px;
      }
    }
  }
`;
