<script setup>
import { maintainTabs } from 'constants/work'
import dayjs from 'dayjs'
import { useUniApi } from 'hooks/use-uni-api'
import { getExpertConsultListApi } from '@/api/expert'
import { usePaging } from '@/composables/use-paging'
import { consultTypeMap } from '@/constants/state'
const { navigateTo } = useUniApi()

const props = defineProps({
  options: {
    type: Object,
    default: () => {}
  }
})
const { options } = toRefs(props)

const tabs = ref([])
const currentTab = ref(0)
const currentState = ref(0)
const handleTab = (e) => {
  console.log('handleTab', e)
  const { index, stateList, state } = e
  currentTab.value = index
  currentState.value = state
  query.value.stateList = stateList
  reload()
}

const query = ref({
  stateList: '',
  elevatorNum: '',
  elevatorName: ''
})
const { paging, dataList, reload, queryHandler, clearHandler, enterHandler } =
  usePaging({
    apiFn: getExpertConsultListApi,
    query
  })

// 期望时间 关联电梯 电梯地址 维保人员 物业是否评价 工作描述
const keyValue = reactive([
  {
    key: '工作类型',
    value: '',
    field: '',
    format: (item) => {
      const { consultType } = item
      return consultType ? `${consultTypeMap[consultType]}` : ''
    }
  },
  { key: '期望时间', value: '', field: 'expectTime' },
  { key: '关联电梯', value: '', field: 'elevatorName' },
  { key: '电梯地址', value: '', field: 'elevatorAddress' },
  // { key: '维保人员', value: '', field: 'collaborator' },
  { key: '工作描述', value: '', field: 'consultDesc' }
])
const toDetail = ({ id, elevatorNum }) => {
  const queryStr = `id=${id}&elevatorNum=${elevatorNum}`
  switch (currentTab.value) {
    case 0:
      navigateTo(`/pages/expert/order/not-started?${queryStr}`)
      break
    case 1:
      navigateTo(`/pages/expert/order/undone-detail?${queryStr}`)
      break
    case 2:
      navigateTo(`/pages/expert/order/detail?${queryStr}`)
      break
    default:
      break
  }
}

onReady(() => {
  const { elevatorNum } = options.value
  query.value.elevatorNum = elevatorNum || ''
})

onLoad(async (e) => {
  options.value = e

  tabs.value = maintainTabs
  const [firstTab] = maintainTabs
  query.value.stateList = firstTab.stateList
})

const statusBarHeight = computed(() => {
  const systemInfo = uni.getSystemInfoSync()
  return systemInfo.statusBarHeight || 0
})
const navigationBarHeight = computed(() => {
  let menuButtonBoundingClientRectTop = 48
  const capsuleHeight = 32
  if (uni.canIUse('getMenuButtonBoundingClientRect')) {
    menuButtonBoundingClientRectTop = uni.getMenuButtonBoundingClientRect().top
  }
  return (
    capsuleHeight +
    (menuButtonBoundingClientRectTop - statusBarHeight.value) * 2
  )
})
const navbarHeight = computed(() => {
  return statusBarHeight.value + navigationBarHeight.value
})
const contentHeight = computed(() => {
  const { screenHeight, safeArea } = uni.getWindowInfo()
  const { bottom } = safeArea
  const bottomHeight = screenHeight - bottom + 50
  const h = screenHeight - bottomHeight
  return h
})
</script>

<template>
  <up-navbar title="咨询列表">
    <template #left>
      <!-- <view w-64 h-64 f-c-c border-solid border="#F8F8F8" border-1 rounded-full>
        <up-icon name="home" :size="`${20}`" />
      </view> -->
    </template>
  </up-navbar>

  <view
    w-full
    bg-white
    position="fixed"
    left-0
    right-0
    m-x-auto
    z-10
    :style="{
      top: `${navbarHeight}px`
    }"
  >
    <up-tabs
      :current="currentTab"
      :list="tabs"
      :scrollable="false"
      :item-style="{
        width: '50%',
        height: '80rpx'
      }"
      :active-style="{
        color: '#3c9cff',
        fontWeight: 'bold'
      }"
      @click="handleTab"
    />
  </view>

  <view
    w-full
    flex-col
    f-s-c
    bg="#F8F8F8"
    :style="{ height: `${contentHeight}px` }"
  >
    <view w-full flex-none :style="{ height: `${navbarHeight + 40}px` }" />

    <view f-c-c mt-8 w-full flex-none bg-white px-32>
      <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-card
          v-for="(item, index) in dataList"
          :key="index"
          :title="`发布人员：${item.publisher || '未知'}`"
          @click="toDetail(item)"
        >
          <template #body>
            <view>
              <view px-30 text-36 font-500 f-c-c justify-between>
                <text v-if="[1].includes(item.state)" text-red>未接单</text>
                <text v-else-if="[2, 3].includes(item.state)" text-amber>
                  进行中
                </text>
                <template v-else>
                  <text text-green>已完成</text>
                  <text text-28 text="#909399">{{ item.finishTime }}</text>
                </template>
              </view>

              <up-cell
                v-for="(val, idx) in keyValue"
                :key="idx"
                :title="val.key"
                :value="val.format ? val.format(item) : item[val.field]"
              />

              <view v-if="[1].includes(item.state)" mt-20>
                <up-button size="normal" @click="toDetail(item)">
                  去接单
                </up-button>
              </view>
            </view>
          </template>
        </up-card>
      </z-paging>
    </view>
  </view>
</template>
