From cbd3322a0dd7e67ce1670bb1c1e08de5412b1c8f Mon Sep 17 00:00:00 2001
From: EstrellaXD <estrellaxd05@gmail.com>
Date: Sun, 3 Sep 2023 22:04:38 +0800
Subject: [PATCH] webui: change search bar style.

---
 webui/src/api/search.ts                  |   6 +
 webui/src/components/ab-bangumi-card.vue |  11 +-
 webui/src/components/basic/ab-search.vue | 167 ++++++++++++++++++-----
 webui/src/store/search.ts                |   2 +
 4 files changed, 141 insertions(+), 45 deletions(-)
 create mode 100644 webui/src/store/search.ts

diff --git a/webui/src/api/search.ts b/webui/src/api/search.ts
index c86172cf..b4e12cec 100644
--- a/webui/src/api/search.ts
+++ b/webui/src/api/search.ts
@@ -77,4 +77,10 @@ export const apiSearch = {
 
     return bangumiInfo$;
   },
+
+  async getProvider() {
+    const { data } = await axios.get<string[]>('api/v1/search/provider');
+    return data;
+  }
 };
+
diff --git a/webui/src/components/ab-bangumi-card.vue b/webui/src/components/ab-bangumi-card.vue
index dcf040b9..2be0e304 100644
--- a/webui/src/components/ab-bangumi-card.vue
+++ b/webui/src/components/ab-bangumi-card.vue
@@ -74,7 +74,7 @@ defineEmits(['click']);
         fx-cer justify-between
         space-x-16px>
       <div w-400px space-x-16px fx-cer>
-        <div h-44px w-72px rounded-6px class="image-container">
+        <div h-44px w-72px rounded-6px overflow-hidden>
           <template v-if="poster !== ''">
             <img :src="`https://mikanani.me${poster}`" alt="poster" w-full class="search-image"/>
           </template>
@@ -105,19 +105,10 @@ defineEmits(['click']);
 </template>
 
 <style>
-.vertical-border {
-  border: 4px solid #EEE5F4;
-  border-radius: 12px;
-}
-
 .card-border {
   background: #EEE5F4;
 }
 
-.image-container {
-  border-radius: 6px;
-  overflow: hidden;
-}
 
 .search-image {
   transform: translateY(-25%);
diff --git a/webui/src/components/basic/ab-search.vue b/webui/src/components/basic/ab-search.vue
index 922d812d..02edd06b 100644
--- a/webui/src/components/basic/ab-search.vue
+++ b/webui/src/components/basic/ab-search.vue
@@ -1,23 +1,73 @@
 <script lang="ts" setup>
-import { Search } from '@icon-park/vue-next';
+import {Search} from '@icon-park/vue-next';
+import {ref} from 'vue';
+import {Down, Up} from '@icon-park/vue-next';
+import {isString} from "lodash";
+import type {SelectItem} from "#/components";
+import {apiSearch} from "@/api/search";
+import {
+  Subject,
+  tap,
+  map,
+  switchMap,
+  debounceTime,
+} from "rxjs";
+import type {BangumiRule} from "#/bangumi";
 
 const props = withDefaults(
-  defineProps<{
-    value?: string;
-    placeholder?: string;
-  }>(),
-  {
-    value: '',
-    placeholder: '',
-  }
+    defineProps<{
+      value?: string;
+      provider: string[];
+      placeholder?: string;
+    }>(),
+    {
+      value: '',
+      provider: ['Mikan', 'Dmhy', 'Nyaa'],
+      placeholder: '',
+    }
 );
 
 const emit = defineEmits(['update:value', 'click-search']);
 
-function onInput(e: Event) {
-  const input = e.target as HTMLInputElement;
-  emit('update:value', input.value);
-}
+const selected = ref<SelectItem | string>(
+    (props.provider?.[0] ?? '')
+);
+
+const selectedProvider = computed(() => {
+  if (isString(selected.value)) {
+    return selected.value;
+  } else {
+    return selected.value.label ?? selected.value.value;
+  }
+});
+
+const onSelect = ref(false);
+
+const input$ = new Subject<string>();
+const onInput = (value: string) => {
+  input$.next(value);
+};
+
+const bangumiInfo$ = apiSearch.get('魔女之旅')
+
+input$.pipe(
+    debounceTime(500),
+    tap((input: string) => {
+      console.log(input);
+    }),
+    switchMap((input: string) => {
+      return apiSearch.get(input, site);
+    }),
+    tap((bangumi: BangumiRule) => console.log(bangumi)),
+    tap((bangumi: BangumiRule) => {
+      console.log('bangumi', bangumi)
+      // set bangumi info to Search Result List
+    }),
+).subscribe({
+  complete() {
+
+  }
+});
 
 function onSearch() {
   emit('click-search', props.value);
@@ -26,33 +76,80 @@ function onSearch() {
 
 <template>
   <div
-    bg="#7752B4"
-    text-white
-    fx-cer
-    rounded-12px
-    h-36px
-    px-12px
-    space-x-12px
-    w-276px
-    focus-within:w-396px
-    transition-width
+      bg="#7752B4"
+      text-white
+      fx-cer
+      rounded-12px
+      h-36px
+      pl-12px
+      space-x-12px
+      w-400px
+      overflow-hidden
+      transition-width
+      shadow-inner
   >
     <Search
-      theme="outline"
-      size="24"
-      fill="#fff"
-      is-btn
-      btn-click
-      @click="onSearch"
+        theme="outline"
+        size="24"
+        fill="#fff"
+        is-btn
+        btn-click
+        @click="onSearch"
     />
 
     <input
-      type="text"
-      :value="value"
-      :placeholder="placeholder"
-      input-reset
-      @input="onInput"
-      @keyup.enter="onSearch"
+        type="text"
+        :value="value"
+        :placeholder="placeholder"
+        input-reset
+        @keyup.enter="onSearch"
     />
+    <div
+        h-full
+        f-cer
+        justify-between
+        px-12px
+        w-100px
+        is-btn
+        @click="() => onSelect = !onSelect"
+        class="provider-select"
+    >
+      <div text-h3>
+        {{ selectedProvider }}
+      </div>
+      <div class="provider-select">
+        <Down/>
+      </div>
+    </div>
+  </div>
+  <div v-show="onSelect" abs top-84px left-540px w-100px rounded-12px shadow bg-white z-99 overflow-hidden>
+    <div
+        v-for="i in provider"
+        :key="i"
+        hover:bg-theme-row
+        is-btn
+        @click="() => {
+        selected = i;
+        onSelect = false;
+      }"
+
+    >
+      <div
+          text-h3
+          text-primary
+          hover:text-white
+          p-12px
+      >
+        {{ i }}
+      </div>
+    </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+
+.provider-select {
+  background: #4E2A94;
+}
+
+</style>
diff --git a/webui/src/store/search.ts b/webui/src/store/search.ts
new file mode 100644
index 00000000..0de1ca27
--- /dev/null
+++ b/webui/src/store/search.ts
@@ -0,0 +1,2 @@
+import type {BangumiRule} from "#/bangumi";
+import type {ApiSuccess} from "#/api";