<script setup>
import { getOtherMaintainRecordListApi } from '@/api/elevator'
import { usePaging } from '@/composables/use-paging'
import { useUniApi } from '@/composables/use-uni-api'
const { navigateTo } = useUniApi()

const tabs = reactive([{ name: '未完成' }, { name: '已完成' }])
const handleTab = (e) => {
  console.log('handleTab', e)
  reload()
}

const addHandler = () => {
  console.log('addHandler 救援')
  navigateTo(
    '/pages/views/choose-elevator/index?redirect=/pages/views/elevator-rescue/create'
  )
}

const query = ref({
  type: 2,
  elevatorName: ''
})
const { paging, dataList, reload, queryHandler, clearHandler, enterHandler } =
  usePaging({
    apiFn: getOtherMaintainRecordListApi,
    query
  })

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

<template>
  <view class="elevator-rescue" w-full h-100vh flex-col f-s-c bg="#F8F8F8">
    <view w-full>
      <up-tabs
        :list="tabs"
        :scrollable="false"
        :item-style="{
          width: '50%',
          height: '80rpx'
        }"
        :active-style="{
          color: '#3c9cff',
          fontWeight: 'bold'
        }"
        @click="handleTab"
      />
    </view>

    <view f-c-c mt-8 w-full flex-none bg-white>
      <up-input
        v-model="query.elevatorName"
        placeholder="请输入电梯名称"
        prefix-icon="search"
        prefix-icon-style="font-size: 22px;color: #909399"
        clearable
        :border="`${'none'}`"
        :custom-style="{
          height: '80rpx',
          padding: '0 20rpx'
        }"
        @clear="
          () => {
            query.elevatorName = ''
            clearHandler()
          }
        "
        @confirm="enterHandler"
      />
    </view>

    <view w-full flex-auto overflow-hidden mt-8 bg-white>
      <z-paging
        ref="paging"
        v-model="dataList"
        :fixed="false"
        @query="queryHandler"
      >
        <up-cell-group>
          <up-cell
            v-for="(item, index) in dataList"
            :key="index"
            :title="`某某某电梯${index}`"
            value="2021-12-12"
          />
        </up-cell-group>
      </z-paging>
    </view>
  </view>

  <FloatFixedAddBtn @click="addHandler" />
</template>

<style>
.elevator-rescue .u-tabs {
  background-color: #fff !important;
}
</style>
