<script setup>
import { useFetch } from 'hooks/use-fetch'
import { useUniApi } from 'hooks/use-uni-api'
import { getMaintainRecordListApi } from '@/api/elevator'
const { navigateTo } = useUniApi()

// const tabs = reactive([{ name: '未完成' }, { name: '已完成' }])
const tabs = reactive([
  { name: '未接单' },
  { name: '进行中' },
  { name: '已完成' }
])
const handleTab = (e) => {
  console.log('handleTab', e)
}

const addHandler = () => {
  console.log('addHandler 维保')
}

const paging = ref(null)
// 期望时间 关联电梯 电梯地址 维保人员 物业是否评价 工作描述
const keyValue = reactive([
  { key: '期望时间', value: '2021-12-12', field: '' },
  { key: '关联电梯', value: '某某某电梯', field: '' },
  { key: '电梯地址', value: '某某某地址', field: '' },
  { key: '维保人员', value: '某某某', field: '' },
  { key: '物业是否评价', value: '是', field: '' },
  { key: '工作描述', value: '领导派发', field: '' }
])
const queryHandler = (e) => {
  console.log('queryHandler', e)
}
const refreshHandler = (e) => {
  console.log('refreshHandler', e)
  setTimeout(() => {
    paging.value.complete()
  }, 1500)
}
const toDetail = ({ id }) => {
  navigateTo(`/pages/views/elevator-maintenance/detail?id=${id}`)
}

const dataList = ref([])
const query = ref({
  pageNum: 1,
  pageSize: 10,
  elevatorName: ''
})
const resetParams = () => {
  query.value = {
    pageNum: 1,
    pageSize: 10,
    elevatorName: ''
  }
  dataList.value = []
}
const clearHandler = () => {
  resetParams()
  getList()
}
const { result, fetchApi } = useFetch({
  apiFn: getMaintainRecordListApi,
  isList: true
})
const getList = async () => {
  await fetchApi({
    ...options.value,
    ...query.value
  })
  dataList.value.push(...result.value.rows)
}
const enterHandler = () => {
  dataList.value = []
  query.value.pageNum = 1
  getList()
}
const options = ref({})
onLoad(async (e) => {
  dataList.value = []
  options.value = e
  await getList()
})
</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="clearHandler"
        @confirm="enterHandler"
      />
    </view>

    <view w-full flex-auto overflow-hidden mt-8 bg-white>
      <scroll-view :scroll-y="true" h-full>
        <z-paging
          ref="paging"
          v-model="dataList"
          :fixed="false"
          refresher-only
          @query="queryHandler"
          @onRefresh="refreshHandler"
        >
          <up-card
            v-for="(item, index) in dataList"
            :key="index"
            :title="`发布人员：${item.userName}`"
            @click="toDetail(item)"
          >
            <template #body>
              <view>
                <view px-30 text-36 font-500 f-c-c justify-between>
                  <text>未接单/已到场/已签名/已完成</text>
                </view>
                <up-cell title="是否超期" value="超期" />
                <up-cell title="维保类型" value="半月维保" />
                <up-cell
                  v-for="(val, idx) in keyValue"
                  :key="idx"
                  :title="val.key"
                  :value="val.value"
                />
              </view>
            </template>
          </up-card>
        </z-paging>
      </scroll-view>
    </view>
  </view>

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

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