<template>
  <div class="search">
    <n-input-group>
      <n-select
        v-model:value="searchType"
        :style="{ width: '30%' }"
        :options="selectOptions"
        size="small"
      />
      <n-input
        v-model:value="searchKey"
        size="small"
        clearable
        @keypress.enter="onSearch"
      />
      <n-button type="primary" ghost size="small" @click="onSearch">
        搜索
      </n-button>
    </n-input-group>
    <div class="community-list">
      <template v-if="list && list.length > 0">
        <div
          v-for="(item, i) in list"
          :key="i"
          class="community-item"
          @click="onSelect(item)"
        >
          <div>
            <p>{{ item.stNameFrst }}</p>
            <span v-if="item.stKindName">
              <b>{{ item.stKindName }}</b>
            </span>
            <template v-if="item.streetName">
              | {{ item.streetName }} |
            </template>
          </div>
          <p>{{ item.addrFrst }}</p>
          <p>{{ item.cspName }}</p>
        </div>
      </template>
      <m-empty v-else />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { NButton, NInputGroup, NInput, NSelect } from 'naive-ui'
import { ajax, api } from '@/ajax'

const emit = defineEmits(['select'])
const selectOptions = [
  {
    label: '名字',
    value: 'name',
  },
  {
    label: '地址',
    value: 'address',
  },
]
const searchType = ref('name')
const searchKey = ref('')
const list = ref<any[]>([])
const onSearch = async () => {
  let query: any = {
    id: '1',
    logic: 'l',
    val: searchKey.value,
  }
  if (searchType.value === 'address') {
    query = {
      id: '2',
      logic: 'l',
      val: searchKey.value,
    }
  }
  list.value =
    (
      await ajax.post({
        url: api.POST_COMMUNITY + '?pageSize=9000',
        params: {
          conditions: [
            {
              conditionsGroup: [query],
            },
          ],
          subject: 'tbl_community',
        },
        showLoading: false,
      })
    )?.data?.content || []
}
const onSelect = (data) => {
  emit('select', data)
}
</script>

<style lang="stylus">
.n-select
  z-index 999
</style>
<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.community-list
  width 100%
  max-height 50vh
  padding-right .05rem
  overflow-y auto
  margin .1rem 0
  .community-item
    $box()
    padding .05rem .08rem
    margin-bottom .08rem
    cursor pointer
    &:hover
      background rgba(255,255,255,.2)
    >p
      &:nth-of-type(1)
        color #ccc
      &:nth-of-type(2)
        color $blue
    >div
      display flex
      align-items center
      border-bottom .01rem dotted rgba(91,213,255,.5)
      margin-bottom .08rem
      padding-bottom .06rem
      color #ccc
      p
        font-size .11rem
        font-weight bold
        color #fff
        max-width 60%
      span
        display inline-block
        font-size .08rem
        padding 0 .06rem
        border-radius .08rem
        margin 0 .1rem
        transform skew(-30deg)
        background $edge
        >b
          display inline-block
          transform skew(30deg)
          font-weight normal
          color #000
          white-space nowrap
</style>
