import { Icon, Search } from "vant";
import { defineComponent, ref, watch } from "vue";
import styles from "./index.module.less";
import IconSearch from "../../assets/icon-search.png";

export default defineComponent({
  name: "TheSearch",
  props: {
    keyword: {
      type: String,
      default: "",
    },
  },
  emits: ["search", 'blur', 'back'],
  setup(props, { emit }) {
    const keyword = ref(props.keyword);
    watch(
      () => props.keyword,
      (value) => {
        keyword.value = value;
      }
    );
    const searchSlots = {
      "left-icon": () => <Icon name={IconSearch} size={20} />,
      action: () => (
        <div style={{ color: "var(--van-primary-color)" }} onClick={() => emit('back')}>返回</div>
      ),
    };
    return () => (
      <div class={styles.theSearch}>
        <Search
          shape="round"
          show-action
          modelValue={keyword.value}
          onUpdate:modelValue={(val) => (keyword.value = val)}
          v-slots={searchSlots}
          placeholder="搜索你想练习的曲谱和专辑"
          onSearch={(val: string) => emit("search", val)}
          onClear={() => emit("search", "")}
          onBlur={() => emit('blur', keyword.value)}
        ></Search>
      </div>
    );
  },
});
