<template>
  <view class="container">
    <up-sticky>
      <navbar-back :title="`（${deviceText}）设备信息`"></navbar-back>
    </up-sticky>
    <up-tabs lineWidth="30" :list="tabs" @click="tabClick"></up-tabs>
    <scroll-view scroll-y="true" class="content">
      <BaseInfoCard v-if="activeIndex == 0" @getDeviceInfo="getDeviceInfo" />
      <AcceptDetail v-if="activeIndex == 1" />
      <DailyCheckList v-if="activeIndex == 2" isComponent />
      <MaintainList v-if="activeIndex == 3" isComponent />
      <UseRecordList v-if="activeIndex == 4" isComponent />
      <PeriodCheckList v-if="activeIndex == 5" />
      <CalibrationList v-if="activeIndex == 6" />
      <RepairList v-if="activeIndex == 7" />
      <BorrowList v-if="activeIndex == 8" />
      <GivebackList v-if="activeIndex == 9" />
      <StopList v-if="activeIndex == 10" />
      <DocumentList v-if="activeIndex == 11" />
      <ScrapInfo v-if="activeIndex == 12 && scrapFlag == 1" />
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import nx from '@/nx'
import BaseInfoCard from '@/pages/device/deviceBusInfo/baseInfoCard'
import AcceptDetail from '@/pages/device/accept/detail'
import DailyCheckList from '@/pages/device/deviceBusDailyCheck/list'
import MaintainList from '@/pages/device/deviceBusMaintain/list'
import UseRecordList from '@/pages/device/deviceBusUseRecord/list'
import PeriodCheckList from '@/pages/device/periodCheckList/index'
import CalibrationList from '@/pages/device/calibrationList/index'
import RepairList from '@/pages/device/repair/list'
import BorrowList from '@/pages/device/borrow/list'
import GivebackList from '@/pages/device/giveback/list'
import StopList from '@/pages/device/stop/list'
import DocumentList from '@/pages/device/documentList/index'
import ScrapInfo from '@/pages/device/scrap/detail'
import { tabList } from './deviceBusInfo.data'

let activeIndex = ref(0)
let deviceText = ref('')
const detailId = ref('')

const { id, deviceName, scrapFlag } = nx.$store('biz').deviceInfo
onMounted(() => {
  detailId.value = id
})
const getDeviceInfo = info => {
  deviceText.value = info.deviceName + (info.alias ? `[${info.alias}]` : '')
}
const tabs = computed(() => {
  return tabList.filter((item, index) => {
    if (scrapFlag != 1) {
      return item.name != '报废信息'
    } else {
      return item
    }
  })
})

function tabClick(e) {
  activeIndex.value = e.index
  if (activeIndex.value == 0) {
    getDeviceInfo()
  }
}
</script>

<style lang="scss" scoped>
.u-sticky {
  top: 0 !important;
}
.container {
  background-color: #f0f2f5;
  height: 100%;
  .content {
    height: 75vh;
  }
}
:deep(.u-tabs__wrapper__nav__item__text) {
  font-size: 18px;
}
</style>
