<script setup>
import TabContent from './components/TabContent.vue'
import { record0, record1, record2, record3 } from './constants'
import {
  postWorkDataWorkRecordApi
  // postWorkCarRoofApi,
  // postWorkElevatorCabinApi,
  // postWorkMachineRoomApi,
  // postWorkPitApi
} from '@/api/elevator'

const instance = getCurrentInstance().proxy
const eventChannel = instance.getOpenerEventChannel()

const tabs = [
  { name: '轿厢' },
  { name: '轿顶' },
  { name: '机房' },
  { name: '底坑' }
]
const currTabIdx = ref(0)
const handleTab = ({ index }) => {
  currTabIdx.value = index
}

const filterTab = (list) => {
  return list.filter((item) => {
    let { type } = options.value
    type = Number(type)
    return item.show.includes(type)
  })
}
const tab0 = ref([])
const tab1 = ref([])
const tab2 = ref([])
const tab3 = ref([])

const tabToParams = (tab) => {
  const params = {}
  tab.forEach(({ state, remark, field }) => {
    if (!field) {
      return
    }
    params[`${field}State`] = state
    params[`${field}Remark`] = remark
  })
  return params
}
const postApi = async () => {
  const { id: workId } = options.value

  await postWorkDataWorkRecordApi({
    workId,
    elevatorCabinBo: {
      workId,
      ...tabToParams(tab0.value)
    },
    carRoofBo: {
      workId,
      ...tabToParams(tab1.value)
    },
    machineRoomBo: {
      workId,
      ...tabToParams(tab2.value)
    },
    pitBo: {
      workId,
      ...tabToParams(tab3.value)
    }
  })

  uni.$u.toast('提交成功')
  eventChannel.emit('done', {})
  setTimeout(() => {
    uni.navigateBack({
      delta: 1
    })
  }, 1500)
}
const submit = () => {
  uni.showModal({
    title: '提示',
    content: '确认提交全部？',
    success: (res) => {
      if (res.confirm) {
        console.log('用户点击确定')

        postApi()
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })
}

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

  tab0.value = filterTab(record0)
  tab1.value = filterTab(record1)
  tab2.value = filterTab(record2)
  tab3.value = filterTab(record3)
})
</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 :scroll-y="true" h-full>
        <TabContent v-show="currTabIdx === 0" v-model:list="tab0" />
        <TabContent v-show="currTabIdx === 1" v-model:list="tab1" />
        <TabContent v-show="currTabIdx === 2" v-model:list="tab2" />
        <TabContent v-show="currTabIdx === 3" v-model:list="tab3" />
      </scroll-view>
    </view>

    <view w-full h-136 flex-none />
    <view position="fixed" w-full bottom-36 f-c-c>
      <up-button
        type="primary"
        text="提交"
        :custom-style="{
          width: '650rpx'
        }"
        @click="submit"
      />
    </view>
  </view>
</template>
