<script setup>
import PositionPicker from 'components/PositionPicker.vue'
import { useFetch } from 'hooks/use-fetch'
import { throttle } from 'uview-plus'
import {
  getWorkerInfoListApi,
  postWorkDataReceiveApi,
  putWorkDataApi
} from '@/api/elevator'
// import { Qs } from '@/utils/common'
// import { useUniApi } from '@/composables/use-uni-api'

const instance = getCurrentInstance().proxy
const eventChannel = instance.getOpenerEventChannel()

const upListRef = ref(null)
const options = ref({})
// const { navigateBack } = useUniApi()

// 分页
const scrolltolower = () => {
  loadmore()
}
const params = ref({
  pageNum: 1,
  pageSize: 20,
  employeeType: 1,
  phoneName: '',
  deptId: ''
})
const list = ref([])
const { result: listData, fetchApi: fetchList } = useFetch({
  apiFn: getWorkerInfoListApi,
  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: 20,
    phoneName: '',
    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 locations = ref({
  latitude: 30.59276,
  longitude: 114.30525
})
const getLocation = () => {
  uni.getLocation({
    type: 'gcj02',
    success: ({ latitude, longitude }) => {
      locations.value = {
        latitude,
        longitude
      }
    }
  })
}
onMounted(() => {
  getLocation()
})
const agreeHandler = async ({ id }) => {
  const { id: workId } = options.value
  const { latitude: lat, longitude: lng } = locations.value
  const { error, result } = await postWorkDataReceiveApi({
    collaborator: id,
    workId,
    lat,
    lng
  })
  if (error) {
    return uni.$u.toast(result.msg)
  }
  uni.$u.toast('接单成功')
  updateMaintenanceNum()
  eventChannel.emit('done', {})
  setTimeout(() => {
    uni.navigateBack({
      delta: 2
    })
  }, 1500)
}
const updateMaintenanceNum = async () => {
  const { id, workType, maintenanceNum } = options.value
  await putWorkDataApi({
    id,
    workType,
    maintenanceNum
  })
}

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.phoneName"
        placeholder="请输入搜素内容"
        prefix-icon="search"
        prefix-icon-style="font-size: 22px;color: #909399"
        clearable
        @clear="clearHandler"
        @confirm="enterHandler"
        @change="(value) => (params.phoneName = value)"
      />
      <view ml-12 text-blue @tap="enterHandler">搜索</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="agreeHandler(item)"
        >
          <up-cell
            :title="item.phoneName"
            :label="item.relevancyUnit"
            :value="item.phone"
          />
        </up-list-item>
      </up-list>
    </view>

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

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