<script setup>
import { deepClone } from 'uview-plus'
import {
  getWorkCarRoofInfoApi,
  getWorkElevatorCabinInfoApi,
  getWorkMachineRoomInfoApi,
  getWorkPitInfoApi
} from '@/api/elevator'
import {
  record0,
  record1,
  record2,
  record3
} from '@/pages/views/submit-sheet/constants'

const stateMap = {
  1: '正常',
  2: '润滑',
  3: '调整',
  4: '更换',
  5: '异常待修复',
  6: '无此项'
}

const tabs = [
  { name: '轿厢' },
  { name: '轿顶' },
  { name: '机房' },
  { name: '底坑' }
]
const currTabIdx = ref(0)
const handleTab = async ({ index }) => {
  currTabIdx.value = index
  let list = []
  switch (index) {
    case 0:
      await getWorkElevatorCabinInfo()
      if (Object.keys(fieldDetail.value).length) {
        list = deepClone(record0)
      }
      break
    case 1:
      await getWorkCarRoofInfo()
      if (Object.keys(fieldDetail.value).length) {
        list = deepClone(record1)
      }
      break
    case 2:
      await getWorkMachineRoomInfo()
      if (Object.keys(fieldDetail.value).length) {
        list = deepClone(record2)
      }
      break
    case 3:
      await getWorkPitInfo()
      if (Object.keys(fieldDetail.value).length) {
        list = deepClone(record3)
      }
      break

    default:
      break
  }
  record.value = list.map((item) => {
    const { field } = item
    return {
      ...item,
      stateStr: stateMap[fieldDetail.value[`${field}State`]],
      remarkStr: fieldDetail.value[`${field}Remark`]
    }
  })
}

const record = ref([])
const fieldDetail = ref({})
const getWorkElevatorCabinInfo = async () => {
  const { data } = await getWorkElevatorCabinInfoApi(options.value)
  fieldDetail.value = data || {}
}
const getWorkCarRoofInfo = async () => {
  const { data } = await getWorkCarRoofInfoApi(options.value)
  fieldDetail.value = data || {}
}
const getWorkMachineRoomInfo = async () => {
  const { data } = await getWorkMachineRoomInfoApi(options.value)
  fieldDetail.value = data || {}
}
const getWorkPitInfo = async () => {
  const { data } = await getWorkPitInfoApi(options.value)
  fieldDetail.value = data || {}
}

const options = ref({})
onLoad((e) => {
  options.value = e
})
onMounted(() => {
  handleTab({ index: 0 })
})
</script>

<template>
  <view f-s-c flex-col h-100vh>
    <view w-full h-90>
      <up-tabs
        :list="tabs"
        :current="currTabIdx"
        :item-style="{
          width: '25%',
          height: '90rpx'
        }"
        @change="handleTab"
      />
    </view>

    <view w-full flex-auto overflow-hidden>
      <scroll-view v-if="record.length" :scroll-y="true" h-full>
        <up-cell-group :border="false">
          <up-cell
            v-for="(item, index) in record"
            :key="index"
            :title="item.title"
          >
            <template #label>
              <view color-gray mt-8>{{ item.subtitle }}</view>
              <view mt-8>{{ item.stateStr }}</view>
              <view mt-8>备注：{{ item.remarkStr }}</view>
            </template>
          </up-cell>
        </up-cell-group>
      </scroll-view>

      <view v-else f-c-c h-full>
        <up-empty mode="data" />
      </view>
    </view>
  </view>
</template>
