<!--
  Description: h5-信息查询
  Author: 李亚光
  Date: 2025-01-02
 -->
<script lang="ts" setup name="H5InfoSearch">
const $router = useRouter()
// 查询条件
const searchQuery = ref({
  devcode: '',
  tagNumber: '',
  position: '',
  address: '',
})

// 查询
const search = () => {
  $router.push({
    name: 'InfoResult'
  })
}
</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.position" label="位置名称" placeholder="输入位置名称" clearable input-align="right" />
          <van-field v-model="searchQuery.address" 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>