<script lang="ts" setup name="approve">
import All from './components/all.vue' // 全部
import DraftBox from './components/draftBox.vue' // 草稿箱
import ApprovalPending from './components/approvalPending.vue'// 待审批
import ExamineAndApprove from './components/examineAndApprove.vue' // 审批中
import Passed from './components/passed.vue'// 已通过
import NotPass from './components/notPass.vue' // 技术能力
import Canceled from './components/canceled.vue' // 取消
export interface menuType {
  name: string
  comp: any
}
const menu = ref<menuType[]>([
  { name: '全部', comp: All },
  { name: '草稿箱', comp: DraftBox },
  { name: '待审批', comp: ApprovalPending },
  { name: '审批中', comp: ExamineAndApprove },
  { name: '已通过', comp: Passed },
  { name: '未通过', comp: NotPass },
  { name: '已取消', comp: Canceled },
])
const current = ref('全部')
const currentComp = shallowRef(All)
watch(current, (newValue) => {
  currentComp.value = menu.value.filter(item => item.name === newValue)[0].comp
})
</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: 76px;
    right: 15px;
    z-index: 999;
  }
}
</style>