<!--
  Description: h5-信息查询
  Author: 李亚光
  Date: 2025-01-02
 -->
<script lang="ts" setup name="H5InfoSearch">
import { keepSearchParams } from '@/utils/keepQuery'
const $router = useRouter()
// 查询条件
const searchQuery = ref({
  devCode: '',
  tagNumber: '',
  tagName: '',
  keys: '',
})

// 查询
const search = () => {
  $router.push({
    name: 'InfoResult',
    query: {
      row: JSON.stringify(searchQuery.value)
    }
  })
}
// 页面缓存
onBeforeRouteLeave((to: any) => {
  keepSearchParams(to.path, 'H5InfoSearch')
})
onActivated(() => {
  if (!($router.options.history.state.forward as string || '').includes('info/result')) {
    searchQuery.value = {
      devCode: '',
      tagNumber: '',
      tagName: '',
      keys: '',
    }
  }
})
</script>

<template>
  <div class="info-container">
    <!-- 查询条件 -->
    <div class="search-info">
      <van-form>
        <van-cell-group>
          <van-field v-model="searchQuery.devCode" label="设备编号" placeholder="输入设备编号" clearable input-align="right" />
          <van-field v-model="searchQuery.tagNumber" label="安装位号" placeholder="输入安装位号" clearable input-align="right" />
          <van-field v-model="searchQuery.tagName" label="位置名称" placeholder="输入位置名称" clearable input-align="right" />
          <van-field v-model="searchQuery.keys" label="安装地点" placeholder="输入安装地点" clearable input-align="right" />
        </van-cell-group>
      </van-form>
    </div>
    <!-- 查询按钮 -->
    <div class="search-btn">
      <el-button type="primary" style="width: 96%;" @click="search">开始查询</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.info-container {
  width: 100%;
  height: calc(100vh - 40px);
  overflow: hidden;

  .search-info {
    background-color: #fff;
    width: 96%;
    margin: 0 auto;
    margin-top: 1vh;
    border-radius: 6px;
    padding: 4px;


    ::v-deep(.van-cell__title) {
      font-weight: 700;
      font-size: 1rem;
    }

    ::v-deep(.van-cell__value) {
      // font-weight: 700;
      font-size: 1rem;
    }
  }

  .search-btn {
    width: 100%;
    position: fixed;
    bottom: 1vh;
    display: flex;
    justify-content: center;

    ::v-deep(.el-button) {
      font-size: 18px;
    }
  }
}
</style>