<!--
  Description: h5-信息查询
  Author: 李亚光
  Date: 2025-01-02
 -->
<script lang="ts" setup name="H5InfoSearchResult">
import { getInfoListPage } from '@/api/mobile/info'
import { keepSearchParams } from '@/utils/keepQuery'
import { throttle } from 'lodash-es'
import dayjs from 'dayjs'
const $router = useRouter()
const $route = useRoute()

const total = ref(0)
const list = ref<any[]>([])
const offset = ref(1)
// 计算滚动区域高度
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 loading = ref(false)
// 查看详情

const detail = (e, row: any) => {
  if (e.target.innerHTML === ('收起') || e.target.innerHTML === ('展开')) {
    return
  }
  $router.push({
    name: 'InfoDetail',
    query: {
      row: JSON.stringify(row)
    }
  })
}
// 获取数据
const fetchData = () => {
  // 查询条件
  const query = JSON.parse($route.query.row as string)
  getInfoListPage({ ...query, keys: `${query.tagNumber}${query.keys}`, tagNumber: undefined, offset: offset.value, limit: 20 }).then(res => {
    total.value = res.data.total
    list.value = [...list.value, ...res.data.rows]
    list.value = list.value.map((item) => ({ ...item, installDate: item.installDate ? dayjs().format('YYYY-MM-DD') : '' }))
    loading.value = false
  })
}
onMounted(() => {
  calcHeight()
  loading.value = true
  fetchData()
})
onActivated(() => {
})
window.addEventListener('resize', () => {
  calcHeight()
})
onBeforeUnmount(() => {
  window.addEventListener('resize', () => { })
})

// 滚动条
const scrollbarRef = ref()
const handleScroll = (a) => {
  // 判断滚动条是否滚动到底部
  const scrollbarContainer = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap')
  const isScrolledToBottom = scrollbarContainer.scrollHeight - scrollbarContainer.scrollTop <= scrollbarContainer.clientHeight + 50
  if (isScrolledToBottom) {
    if (list.value.length === total.value) {
      return
    }
    // console.log(throttle)
    // throttle(() => {
    loading.value = true
    offset.value += 1
    fetchData()
    // }, 100)

  }
}
// 页面缓存
onBeforeRouteLeave((to: any) => {
  keepSearchParams(to.path, 'H5InfoSearchResult')
})
onActivated(() => {
  if (!($router.options.history.state.forward as string || '').includes('detail')) {
    loading.value = true
    fetchData()
  }
})
</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 ref="scrollbarRef" v-loading="loading" :max-height="`${scrollHeight}px`" @scroll="handleScroll"
        style="margin-top: 14px;">
        <lazy-component v-if="list.length">
          <div v-for="(item, index) in list" :key="index" class="result-item" :class="index !== 0 ? 'top-border' : ''"
            @click="(event) => detail(event, item)">
            <div class="devcode"> {{ item.devcode }}</div>
            <div class="cell">
              <div class="title">设备类型</div>
              <div class="value">{{ item.typeName }}</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.tagName" 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.position" expand-text="展开" collapse-text="收起" />
              </div>
            </div>
            <div class="cell">
              <div class="title">安装日期</div>
              <div class="value">{{ item.installDate }}</div>
            </div>
          </div>
        </lazy-component>
        <van-empty v-if="!list.length" description="暂无数据" />
        <div v-if="list.length" class="to-top">
          <van-back-top />
        </div>
      </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;
          white-space: nowrap;

          /* 确保文本在一行内显示 */
          overflow: hidden;

          /* 超出容器部分隐藏 */
          text-overflow: ellipsis;

          /* 文字溢出显示省略号 */
        }

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

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


    }
  }
}
</style>