<template>
  <van-config-provider :theme-vars="themeVars">
    <div style="padding-top: 13vw">
      <TopNav navTitle="通讯录" />
      <!-- <van-index-bar> -->
      <!-- <van-index-anchor index="A" /> -->
      <Search
        v-model="kwd"
        placeholder="请输入搜索关键词"
        @update:modelValue="onSearch"
      ></Search>
      <template v-for="item in 10" :key="item">
        <van-cell title="张三(高新网安大队)" label="13612345678">
          <template #right-icon>
            <van-icon name="phone-circle" color="#3e6ee8" class="search-icon" />
          </template>
        </van-cell>
        <van-cell title="李四(高新网安大队)" label="13612345678">
          <template #right-icon>
            <van-icon name="phone-circle" color="#3e6ee8" class="search-icon" />
          </template>
        </van-cell>
        <van-cell title="王五(高新网安大队)" label="13612345678">
          <template #right-icon>
            <van-icon name="phone-circle" color="#3e6ee8" class="search-icon" />
          </template>
        </van-cell>
      </template>
      <!-- </van-index-bar> -->
    </div>
  </van-config-provider>
</template>

<script setup>
import TopNav from "../../../components/topNav.vue";
import Search from "../../../components/search.vue";
import { ref, reactive } from "vue";
const listIndex = ref(["A"]);
const themeType = ref(getStorage("themeSetting"));
const kwd = ref("");
const themeVars = ref({
  cellBackgroundColor: themeType.value == "light" ? "#fff" : "#041634",
  cellBorderColor: themeType.value == "light" ? "#dbdbdb" : "#001e6b",
  cellTextColor: themeType.value == "light" ? "#333" : "#fff",
});
</script>

<style lang="scss" scoped>
@import "../../../assets/styles/mixin.scss";

.search-icon {
  font-size: 30px;
}
</style>
