<template>
  <div class="ignore_com-top">
    <div class="header-return" @click="goBack">
      <VanIcon name="arrow-left"/>
    </div>
  </div>
  <div class="page-search  content-box ptheader">
    <div class="search-box">
      <div>
        <div class="space-item"
             v-if="searchData &&  searchData.length"
             @click="triggerSearchSpace(item)"
             v-for="item in searchData"
        >
          <img
            :src="parseImgUrl('search-icon','icon_meetingroom.svg')" alt=""
          >
          <p>{{ item.localName }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Search } from 'vant'
import { defineComponent, reactive, toRefs, onBeforeMount } from 'vue'
import { getSpaceLike } from '@/apis/envmonitor'
import { store } from '@/store'
import { parseImgUrl, setLocalSearchSpace } from '@/utils'

export default defineComponent({
  emits: ['closeMetting'],
  props: {
    projectId: {
      type: String,
      default: () => ''
    }
  },
  components: {
    VanSearch: Search
  },
  setup(props, contex) {
    let spaceName: any = ''
    let userInfo: any = store.state.user
    let searchData: any = []
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      spaceName: spaceName,
      userInfo: userInfo,
      searchData: searchData,
      goBack() {
        contex.emit('closeMetting', null)
      },
      triggerSearchSpace(item: any) {
        contex.emit('closeMetting', item)
      },
      getSpaceLike() {
        let params: any = {
          'criteria': {
            'projectId': userInfo.projectId,
            'localName': {
              '$like': `%${proxyData.spaceName}%`
            }
          }
        }
        getSpaceLike(params).then(res => {
          let resData: any = res
          if (resData.result === 'success') {
            proxyData.searchData = res?.content ?? []
          } else {
            proxyData.searchData = []
          }
        })
      },
    })
    onBeforeMount(() => {
      proxyData.getSpaceLike()
    })
    return {
      ...toRefs(proxyData)
    }
  }
})
</script>

<style lang="scss" scoped>
@import "./index.scss";

.search-box {
  padding-top: 0;
}
</style>
<style lang="scss">
.page-search {
  .van-search {
    padding: 0 !important;
  }
}
</style>
