<script setup>
import PositionPicker from 'components/PositionPicker.vue'
import dayjs from 'dayjs'
import { useUserStore } from 'store/user'
import { throttle } from 'uview-plus'
import { getFaultMessageListApi } from '@/api/elevator'
import { usePaging } from '@/composables/use-paging'
const userStore = useUserStore()
const { place } = storeToRefs(userStore)

const confirmHandler = ([value]) => {
  userStore.setPlace(value)

  const { id } = uni.getStorageSync('place') || {}
  query.value.deptId = id || ''
  reload()
}

const scrollTop = ref(0)
const scrollChange = ({ detail }) => {
  throttle(() => {
    scrollTop.value = detail.scrollTop
  }, 250)
}
const handleBackTop = () => {
  scrollTop.value = 0
  scrollToTop()
}

const getMessageDesc = (item) => {
  const { faultName, floor, picture } = item
  if (faultName) {
    return `电梯设备：${faultName},${floor}层`
  } else if (picture) {
    return '[图片]'
  } else {
    return ''
  }
}
const getHappenTime = (time) => {
  if (dayjs().diff(time, 'day') < 1) {
    return dayjs(time).format('HH:mm')
  } else if (dayjs().diff(time, 'year') < 1) {
    return dayjs(time).format('MM-DD HH:mm')
  } else {
    return dayjs(time).format('YYYY-MM-DD HH:mm')
  }
}

const toSystemMessage = ({ id, elevatorNum }) => {
  uni.navigateTo({
    url: `/pages/views/system-message/index?id=${id}&elevatorNum=${elevatorNum}`
  })
}

const showPicker = ref(false)

const query = ref({
  miniMsgFlag: true,
  deptId: '',
  elevatorName: ''
})
const {
  paging,
  dataList,
  reload,
  queryHandler,
  clearHandler,
  enterHandler,
  scrollToTop
} = usePaging({
  apiFn: getFaultMessageListApi,
  query
})

const options = ref({})
onLoad(async (e) => {
  options.value = e

  const { id } = uni.getStorageSync('place') || {}
  query.value.deptId = id || ''
})
</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
        v-model="query.elevatorName"
        placeholder="请输入搜素内容"
        prefix-icon="search"
        prefix-icon-style="font-size: 22px;color: #909399"
        clearable
        @clear="
          () => {
            query.elevatorName = ''
            clearHandler()
          }
        "
        @confirm="enterHandler"
      />
      <view ml-12 @tap="showPicker = true">{{ place.label }}</view>
    </view>

    <view w-full flex-auto overflow-hidden>
      <z-paging
        ref="paging"
        v-model="dataList"
        :fixed="false"
        @query="queryHandler"
        @scroll="scrollChange"
      >
        <up-cell-group>
          <up-cell
            v-for="(item, index) in dataList"
            :key="index"
            :title="item.elevatorName"
            :value="getHappenTime(item.happenTime)"
            :label="getMessageDesc(item)"
            @click="toSystemMessage(item)"
          >
            <template #icon>
              <view w-80 h-80 rounded-full f-c-c mr-12 bg="#4CA4E5">
                <up-icon name="bell-fill" size="50" :color="`${'#FFFFFF'}`" />
              </view>
            </template>
          </up-cell>
        </up-cell-group>
      </z-paging>
    </view>

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

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