<script lang="ts" setup name="ButtonBox">
import { ref } from 'vue'
const emits = defineEmits(['changeCurrentButton'])
const menu = [
  { name: '全部', id: 'all' },
  { name: '草稿箱', id: 'box' },
  { name: '待审批', id: 'will' },
  { name: '审批中', id: 'ing' },
  { name: '已通过', id: 'pass' },
  { name: '未通过', id: 'notPass' },
  { name: '已取消', id: 'cancle' },
]
const current = ref('all')
watch(current, (newValue) => {
  console.log(newValue)
  emits('changeCurrentButton', newValue)
})
</script>

<template>
  <div class="container">
    <div class="btns">
      <!-- 三级菜单 -->
      <el-radio-group v-model="current">
        <el-radio-button v-for="item in menu" :key="item.id" :label="item.id">
          {{ 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>