<!--
  Description: h5-信息查询
  Author: 李亚光
  Date: 2025-01-02
 -->
<script lang="ts" setup name="H5InfoSearchResult">
const total = ref(0)
const list = ref([
  {
    devcode: '24102708',
    devTypeName: '燃气智能监测终端',
    tagNumber: 'N57C114',
    position: '示范区联络线中压A闸9',
    address: '百环花园调压站南侧',
    installDate: '2024-11-30'
  },
  {
    devcode: '322024010010',
    devTypeName: '燃气智能监测终端（一体化）',
    tagNumber: 'cprl001',
    position: '92301部队中压A闸1',
    address: '西环里35号院2号楼南',
    installDate: '2024-01-30'
  },
  {
    devcode: '341524019XX1',
    devTypeName: '管网哨兵',
    tagNumber: 'GX_33101',
    position: '北新中压A闸6',
    address: '北京市海淀区街道1',
    installDate: '2024-11-18'
  },
  {
    devcode: '211424152117',
    devTypeName: '智能警示桩',
    tagNumber: 'NCX_0001',
    position: '东辰小区中压A闸1',
    address: '北京市西城区复外大街与三里河路交叉口(地铁1号线地铁站木樨地站北侧)三里河3区',
    installDate: '2024-11-26'
  },
  {
    devcode: 'YT20240913',
    devTypeName: '场站监测云台',
    tagNumber: 'N53A888',
    position: '定辛庄小学中压A闸1T',
    address: '眼镜城',
    installDate: '2024-09-13'
  },
])
// 计算滚动区域高度
const scrollHeight = ref(0)
const calcHeight = () => {
  // 公共头部高度40
  // 边距安全 30
  // total区域
  const totalAreaHeight = document.getElementById('search-info')?.offsetHeight || 0
  // 查询结果头部
  const searchHeaderHeight = document.getElementById('title')?.offsetHeight || 0
  scrollHeight.value = window.innerHeight - 40 - 30 - totalAreaHeight - searchHeaderHeight - 14
}
// 查看详情
const $router = useRouter()
const detail = (row: any) => {
  $router.push({
    name: 'InfoDetail'
  })
}
onMounted(() => {
  calcHeight()
})
onActivated(() => {
})
window.addEventListener('resize', () => {
  calcHeight()
})
</script>
<template>
  <div class="info-container">
    <div id="search-info" class="search-info">
      <span>共找到 </span>
      <span style="font-weight: 700;">
        {{ total }}条
      </span>
      <span>匹配的设备</span>
    </div>
    <!-- 查询结果 -->
    <div class="search-result">
      <div id="title" class="title">
        <div class="symbol"></div>
        查询结果
      </div>
      <!-- 结果 -->
      <el-scrollbar :max-height="`${scrollHeight}px`" style="margin-top: 14px;">
        <lazy-component>
          <div v-for="(item, index) in list" :key="index" class="result-item" :class="index !== 0 ? 'top-border' : ''" @click="detail(item)">
            <div class="devcode"> {{ item.devcode }}</div>
            <div class="cell">
              <div class="title">设备类型</div>
              <div class="value">{{ item.devTypeName }}</div>
            </div>
            <div class="cell">
              <div class="title">安装位置</div>
              <div class="value">{{ item.tagNumber }}</div>
            </div>
            <div class="cell">
              <div class="title">位置名称</div>
              <!-- <div class="value">{{ item.position }}</div> -->
              <div class="value"><van-text-ellipsis :rows="1" :content="item.position" expand-text="展开" collapse-text="收起" /></div>
            </div>
            <div class="cell">
              <div class="title">详细位置</div>
              <!-- <div class="value">{{ item.address }}</div> -->
               <div class="value">
                <van-text-ellipsis :rows="1" :content="item.address" expand-text="展开" collapse-text="收起" />
               </div>
            </div>
            <div class="cell">
              <div class="title">安装日期</div>
              <div class="value">{{ item.installDate }}</div>
            </div>
          </div>
        </lazy-component>
      </el-scrollbar>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.info-container {
  width: 100%;
  height: calc(100vh - 40px);
  overflow: hidden;
  color: #444;

  .search-info {
    background-color: #fff;
    width: 96%;
    margin: 0 auto;
    margin-top: 1vh;
    border-radius: 6px;
    padding: 4px;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    padding-left: 0.8rem;
    font-size: 1.1rem;


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

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

    .title {
      display: flex;
      font-size: 1.1rem;
      // border-left: 4px solid #0d76d4;
      // border-radius: 2px;
      .symbol {
        width: 4px;
        height: 22px;
        background-color: #0d76d4;
        border-radius: 4px;
        margin-right: 8px;
      }
    }

    .top-border {
      border-top: 1px solid #e4e7ed;
      // margin-top: 8px;
    }

    .result-item {
      padding: 4px;
      // box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
      .devcode {
        font-weight: 700;
        font-size: 1.2rem;
      }

      .cell {
        display: flex;
        justify-content: space-between;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-right: 14px;
        font-size: 1rem;

        .value {
          color: #888;
          width: 80%;
          text-align: right;
        }

        .title {
          width: 20%;
          white-space: nowrap;
          font-weight: 500;
        }

        .title,
        .value {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }


    }
  }
}
</style>