<template>
  <ContentWrap>
    <!-- 顶部切换 -->
    <el-radio-group v-model="tabPosition" class="mb-15px" @change="handleTabChange">
      <el-radio-button label="first">物资清单</el-radio-button>
      <el-radio-button label="second">领取记录</el-radio-button>
      <el-radio-button label="third">检查计划</el-radio-button>
      <el-radio-button label="fourth">检查记录</el-radio-button>
      <el-radio-button label="fifth">更换记录</el-radio-button>
    </el-radio-group>
  </ContentWrap>

    <!-- 物资清单 -->
    <div v-if="tabPosition === 'first'" class="materials-list">
      <MaterialInfromation :cabinetId="cabinetId" />
    </div>
    <!-- 领取记录 -->
    <div v-if="tabPosition === 'second'" class="materials-list">
      <CollectionManagement :cabinetId="cabinetId" />
    </div>

    <!-- 检查计划 -->
    <div v-if="tabPosition === 'third'" class="materials-list">
      <InspectionPlan :cabinetId="cabinetId" @planId="handlePlanId" />
    </div>

    <!-- 检查记录 -->
    <div v-if="tabPosition === 'fourth'" class="materials-list">
      <InspectionRecords
        :cabinetId="cabinetId"
        :planName="planName"
        :planId="planId"
        @recordId="handleRecordId"
      />
    </div>

    <!-- 更换记录 -->
    <div v-if="tabPosition === 'fifth'" class="materials-list">
      <ReplacementRecords
        :cabinetId="cabinetId"
        :recordId="recordId"
      />
    </div>

</template>

<script lang="ts" setup>
import MaterialInfromation from '@/views/material/information/index.vue'
import CollectionManagement from '@/views/material/coll/index.vue'
import InspectionPlan from '@/views/material/inspectionplan/index.vue'
import InspectionRecords from '@/views/material/Inspectionrecords/index.vue'
import ReplacementRecords from '@/views/material/replacementrecords/index.vue'

defineOptions({ name: 'MaterialCabinetDetail' })

// 状态定义
const tabPosition = ref('first')
const cabinetId = ref('')
const planId = ref('')
const planName = ref('')
const recordId = ref('')
const planData = ref(null)
const route=useRoute()
// 获取路由参数
onMounted(() => {
  cabinetId.value = route.query.cabinetId
})

// 方法定义
const handleTabChange = (newTab: string) => {
  tabPosition.value = newTab
  planData.value = null
  planId.value = null
  planName.value = ''
}

const handlePlanId = (data: any) => {
  planData.value = data
  if (planData.value) {
    planId.value = planData.value.planId
    planName.value = planData.value.planName
  }
  tabPosition.value = 'fourth'
}

const handleRecordId = (id: string) => {
  recordId.value = id
  tabPosition.value = 'fifth'
}
</script>

<style lang="scss" scoped>
.materials-list {
  width: 100%;
  height: 100%;
}
</style>
