<script lang="ts" setup name="qualityFile">
import CNASfile from './components/CNASfile.vue' // casn文件
import homeworkFile from './components/homeworkFile.vue' // 作业文件
import statute from './components/statute.vue'// 计量法规
import programFile from './components/programFile.vue' // 程序文件
import qualityManual from './components/qualityManual.vue'// 质量手册
import technicalCapability from './components/technicalCapability.vue' // 技术能力
import type { menuType } from './file-interface'
import { getDictByCode } from '@/api/system/dict'
// 菜单 - 文件类别
const menu = ref<menuType[]>([
  { name: '', comp: statute },
  { name: '', comp: qualityManual },
  { name: '', comp: programFile },
  { name: '', comp: homeworkFile },
  { name: '', comp: technicalCapability },
  { name: '', comp: CNASfile },
])
// 文件类别列表
const getMenuList = async () => {
  const response = await getDictByCode('fileType')
  menu.value.forEach((item: menuType, index: Number) => {
    item.name = response.data[index].name
  })
  console.log(menu, 'menu')
}
const current = ref('计量法规')
const currentComp = shallowRef(statute)
watch(current, (newValue) => {
  currentComp.value = menu.value.filter(item => item.name === newValue)[0]?.comp
},
{
  deep: true,
})
// 保存当前状态信息
onUnmounted(() => {
  sessionStorage.setItem('fileMenu', current.value)
})
onMounted(async () => {
  await getMenuList() // 获取状态列表
  current.value = sessionStorage.getItem('fileMenu') || '计量法规' // 赋值上次的状态信息
  sessionStorage.getItem('fileMenu') ? sessionStorage.removeItem('fileMenu') : ''
})
</script>

<template>
  <div class="container">
    <div class="btns">
      <!-- 三级菜单 -->
      <el-radio-group v-model="current">
        <el-radio-button v-for="item in menu" :key="item.name" :label="item.name">
          {{ item.name }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <!-- 展示区域 -->
    <component :is="currentComp" />
  </div>
</template>

<style lang="scss" scoped>
.container {
  position: relative;

  .btns {
    position: fixed;
    top: 67px;
    right: 15px;
    z-index: 999;
  }
}
</style>