<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">
    <form action="/">
      <van-search v-model="spaceName"
                  @update:model-value="onSearch"
                  @focus="clearHistorySearch"
                  @blur="getHistorySearch"
                  @clear="onCancel"
                  placeholder="输入地点"
      />
    </form>
    <div class="search-box">
      <div class="top">
        <div>最近查找</div>
        <div>
          <span @click="goMetting">查看所有会议室</span>
        </div>
      </div>
      <div class="space-item"
           v-if="searchData &&  searchData.length"
           @click="triggerSearchSpace(item)"
           v-for="item in searchData"
      >
        <img
          :src="parseImgUrl('search-icon','icon_location.svg')" alt=""
        >
        <p>{{ item.localName }}</p>
      </div>
      <div class="space-item"
           v-else
           @click="triggerSearchSpace(item)"
           v-for="item in historySearchData"
      >
        <img
          :src="parseImgUrl('search-icon','icon_location.svg')" alt=""
        >
        <p>{{ item.localName }}</p>
      </div>
    </div>
  </div>
  <!--搜索-->
  <van-popup v-model:show="showMetting"
             teleport="body"
             class="buiding-box"
             style="width: 100%;height: 100%"
             position="right"
  >
    <div style="width: 100%;height: 100%">
      <space-metting @closeMetting="closeMetting"></space-metting>
    </div>
  </van-popup>
</template>

<script lang="ts">
import { Search } from 'vant'
import { defineComponent, reactive, toRefs, ref, onBeforeMount, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { store } from '@/store'
import { getSpaceLike } from '@/apis/envmonitor'
import { getLocalSearchSpace, parseImgUrl, setLocalSearchSpace } from '@/utils'
import SpaceMetting from '@/views/envmonitor/Search/SpaceMetting.vue'

export default defineComponent({
  emits: ['closeSearch'],
  props: {
    projectId: {
      type: String,
      default: () => ''
    }
  },
  components: {
    VanSearch: Search,
    SpaceMetting
  },
  setup(prop, contex) {
    const router = useRouter()
    let userInfo: any = store.state.user
    let spaceName: any = ''
    let searchData: any = []
    let historySearchData: any = []
    const proxyData = reactive({
      parseImgUrl: parseImgUrl,
      showMetting: false,
      spaceName: spaceName,
      userInfo: userInfo,
      searchData: searchData,
      historySearchData: historySearchData,
      /**
       * 返回上一个页面
       */
      goBack() {
        contex.emit('closeSearch', null)
      },
      /**
       * 关闭所有会议室页面
       */
      closeMetting(item: any) {
        proxyData.showMetting = false
        contex.emit('closeSearch', item)
      },
      /**
       * 搜索空间
       */
      onSearch() {
        if (proxyData.spaceName) {
          proxyData.getSpaceLike()
        }
      },
      /**
       * 取消搜索
       */
      onCancel() {
        proxyData.searchData = []
        proxyData.getHistorySearch()
      },
      /**
       * 清楚最近查找的数据
       */
      clearHistorySearch() {
        proxyData.historySearchData = []
      },
      /**
       * 获取最近查询的历史数据，最近查找为本地缓存
       */
      getHistorySearch() {
        proxyData.historySearchData = getLocalSearchSpace()
      },
      /**
       * 确定选择的空间
       * @param item
       */
      triggerSearchSpace(item: any) {
        setLocalSearchSpace(item)
        // 关闭搜索显示地图
        contex.emit('closeSearch', 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 = []
          }
        })
      },
      /**
       * 会议室页面
       */
      goMetting() {
        proxyData.showMetting = true
      }
    })
    onMounted(() => {
      proxyData.historySearchData = getLocalSearchSpace()
    })
    return {
      ...toRefs(proxyData)
    }
  }
})
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
<style lang="scss">
.page-search {
  .van-search {
    padding: 0 !important;
  }
}
</style>
