<script setup>
import PositionPicker from 'components/PositionPicker.vue'
import { useFetch } from 'hooks/use-fetch'
import { throttle } from 'uview-plus'
import { getElevatorListApi } from '@/api/elevator'
import { Qs } from '@/utils/common'

const upListRef = ref(null)
const options = ref({})

// 分页
const scrolltolower = () => {
  loadmore()
}
const params = ref({
  pageNum: 1,
  pageSize: 10,
  elevatorName: '',
  deptId: ''
})
const list = ref([])
const { result: listData, fetchApi: fetchList } = useFetch({
  apiFn: getElevatorListApi,
  isList: true,
  defaultResult: {
    rows: [],
    total: 0
  }
})
const loadmore = async () => {
  await fetchList(params.value)
  list.value.push(...listData.value.rows)
  if (listData.value.rows.length < params.value.pageSize) {
    params.value.pageNum++
  }
}
const resetParams = () => {
  params.value = {
    pageNum: 1,
    pageSize: 10,
    elevatorName: '',
    deptId: ''
  }
  list.value = []
}
const clearHandler = () => {
  resetParams()
  loadmore()
}
const enterHandler = () => {
  list.value = []
  params.value.pageNum = 1
  loadmore()
}
onLoad((e) => {
  options.value = e
  list.value = []
  loadmore()
})

// 滚动
const scrollTop = ref(0)
const scrollChange = (value) => {
  throttle(() => {
    scrollTop.value = value
  }, 250)
}
const handleBackTop = () => {
  scrollTop.value = 0
}

const toDetail = (item) => {
  const { redirect: url } = options.value
  const { id } = item
  const { deptId } = params.value
  const urlParams = Qs.stringify({
    id,
    deptId
  })
  const finalUrl = `${url}?${urlParams}`
  uni.navigateTo({
    url: finalUrl
  })
}

const showPicker = ref(false)
const place = ref({
  id: '',
  label: '请选择'
})
const confirmHandler = ([value]) => {
  place.value = value
  params.value.deptId = value.id
  enterHandler()
}
</script>

<template>
  <view f-s-c flex-col h-100vh>
    <view f-s-c px-20 mt-12 w-full flex-none h-100>
      <up-input
        :model-value="params.elevatorName"
        placeholder="请输入搜素内容"
        prefix-icon="search"
        prefix-icon-style="font-size: 22px;color: #909399"
        clearable
        @clear="clearHandler"
        @confirm="enterHandler"
        @change="(value) => (params.elevatorName = value)"
      />
      <view ml-12 @tap="showPicker = true">{{ place.label }}</view>
    </view>

    <view w-full flex-auto overflow-hidden>
      <up-list
        ref="upListRef"
        :scroll-top="scrollTop"
        @scroll="scrollChange"
        @scrolltolower="scrolltolower"
      >
        <up-list-item
          v-for="(item, index) in list"
          :key="index"
          :anchor="index"
          @tap="toDetail(item)"
        >
          <up-cell :title="item.elevatorName">
            <template #label>
              <view mt-8>
                <view text-28>注册代码：{{ item.registerCode }}</view>
                <view f-s-c mt-4 text-28 text="#999999">
                  <up-icon name="map-fill" :size="24" :color="`${'#999999'}`" />
                  <text text-28 font-400 ml-4>{{ item.elevatorAddress }}</text>
                </view>
              </view>
            </template>
          </up-cell>
        </up-list-item>
      </up-list>
    </view>

    <!-- 回到顶部 -->
    <up-back-top :scroll-top="scrollTop" :top="500" @tap="handleBackTop" />

    <!-- 选择位置弹窗 -->
    <PositionPicker v-model="showPicker" @confirm="confirmHandler" />
  </view>
</template>
