import { defineComponent, PropType, ref } from "vue";
import logo from "@/assets/logo.png";
import logoDark from "@/assets/logo-white.png";
import IconSearch from "@/assets/icon-search.png";
import IconSearchWhite from "@/assets/icon-search-white.png";
import styles from "./index.module.less";
import { Button, Icon, Image } from "vant";
import { useRoute, useRouter } from "vue-router";
import TheDown from "../TheDown";

export default defineComponent({
  name: "TheHeader",
  props: {
    theme: {
      type: String as PropType<"light" | "dark">,
      default: "light",
    },
  },
  setup(props) {
    const router = useRouter();
    const downRef = ref()
    return () => (
      <div
        class={[styles.theHeader, props.theme == "light" ? styles.light : styles.dark]}
      >
        <a class={styles.logo} href="/mobile">
          <img src={props.theme == "light" ? logo : logoDark} />
          <span class={styles.undis}>酷乐秀</span>
        </a>
        <Button type="primary" class={styles.btn} round size="small" onClick={() => downRef.value?.downLoadApp()}>
          打开APP
        </Button>
        <Icon
          name={props.theme == "light" ? IconSearch : IconSearchWhite}
          color="#333"
          size={20}
          onClick={() => router.push("/search")}
        />
        <TheDown ref={downRef} />
      </div>
    );
  },
});
