<template>
  <div class="flex flex-col bg-[#f5f5f5]">
    <nut-searchbar v-model="searchText" placeholder="输入要搜索的地区" @focus="onFocus" @change="onInput" @clear="onClear" @blur="onBlur" style="margin: 0">
      <template #leftout>
        <div class="w-[88rpx] h-[88rpx] bg-white rounded-full flex items-center justify-center" @click="goBack">
            <ChevronLeft    />
        </div>
      </template>
      <template #leftin>
        <Search class="text-[#929297]" />
      </template>
    </nut-searchbar>

     <div class="my-[40rpx] px-[30rpx]">
        <p class="text-[32rpx] font-400 text-[#666] mb-[20rpx]">当前所在城市</p>
        <div class="bg-[#e9f8f8] border-[2rpx] border-[#28BEBB] border-solid w-[208rpx] h-[88rpx] flex items-center justify-between rounded-[10rpx] px-[24rpx]">
            <MapPin class="w-[40rpx] h-[40rpx] text-[#28BEBB]"/>
            <span class="text-[36rpx] text-[#0AB3B0] font-[500rpx]">{{ userStore.deviceLocation.province }}</span>
        </div>
     </div>
    <nut-elevator :index-list="data" height="100%" @click-item="clickItem" @click-index="clickIndex" class="flex-auto"/>
  </div>
</template>

<script lang="ts" setup>
  import { getAdministrative } from "@/api/interfaceDocument";
  import { getRequest } from "@/api/customFetch";
  import { mapKey } from "@/utils/useMap";
  import { ChevronLeft,Search,MapPin } from "lucide-vue-next";
  import { useUserStore } from "@/store/user";
  import { useRouter } from "vue-router";

  const userStore = useUserStore();
  const router = useRouter();
  const data = ref([
    {
      title: "A",
      list: [{ name: "安徽", id: 1 }],
    },
    {
      title: "B",
      list: [{ name: "北京", id: 2 }],
    },
    {
      title: "G",
      list: [
        { name: "广西", id: 3 },
        { name: "广东", id: 4 },
      ],
    },
    {
      title: "H",
      list: [
        { name: "湖南", id: 5 },
        { name: "湖北", id: 6 },
      ],
    },
  ]);

  const searchText = ref("");
  let suggestTimer: any = null;
  const suggestList = ref([]);
  function onInput(_val: string) {
    if (suggestTimer) clearTimeout(suggestTimer);
    suggestTimer = setTimeout(() => {
      fetchSuggest();
    }, 300);
  }

  function onFocus() {}

  function onClear() {
    suggestList.value = [];
  }

  function onBlur() {
    // 不自动关闭popup，交互更友好
  }

  const clickItem = (key: string, item: any) => {
    console.log(key, item);
  };

  const clickIndex = (key: string) => {
    console.log(key);
  };

  const fetchSuggest = () => {};
  getRequest(getAdministrative(), { keyword: "156110000", childLevel: 0, extensions: false, tk: mapKey }).then((resp) => {
    console.log(resp);
  });

  const goBack = () => {
    router.back();
  }
</script>

<style lang="scss" scoped>
:deep(.nut-elevator__list__item__name){
    background-color: #fff;
    height: 54px;
    span{
        font-size:16px;
    }
}

:deep(.nut-elevator__list__item__code){
    font-size: 16px;
    color: #666;
}

:deep(.nut-elevator__list__item__name):not(:last-child){
    border-bottom: 1px solid #EEEEEE;
}
</style>

<style lang="scss" scoped>
  :root {
    --nut-searchbar-background: #f5f5f5;
    --nut-searchbar-input-height: 100%;
    --nut-searchbar-input-border-radius:100px;
    --nut-searchbar-input-background:#fff;

  }
</style>
