<!-- 列表页右上角按钮组 -->
<script lang="ts" setup name="ButtonBox">
import type { PropType } from 'vue'
import { ref } from 'vue'
import type { IMenu } from './buttonBox'

const props = defineProps({
  active: String,
  menu: {
    type: Array as PropType<IMenu[]>,
  },
  totalToApproval: {
    type: Number,
    default: undefined,
  }, // 待审批数据条数
  totalApproval: {
    type: Number,
    default: undefined,
  }, // 审批中数据条数
  totalRefuse: {
    type: Number,
    default: undefined,
  }, // 未通过数据条数
  showBridge: {
    type: Boolean,
    default: true,
  },
})
const emits = defineEmits(['changeCurrentButton'])

const current = ref('') // 选中的按钮
watch(current, (newValue) => {
  if (newValue) {
    emits('changeCurrentButton', newValue)
  }
})
watch(() => props.active, (newValue) => {
  current.value = newValue!
}, { immediate: true })
</script>

<template>
  <div class="container button-box-com">
    <div class="btns">
      <el-radio-group v-for="item in menu" :key="item.id" v-model="current" :fill="(item.id === '1' || item.id === '3' || item.id === '5' || item.id === '6') ? '#21a366' : '#3d7eff'">
        <el-badge
          v-if="props.showBridge && ((item.id === '2' && props.totalToApproval) || (item.id === '3' && props.totalApproval) || (item.id === '5' && props.totalRefuse))"
          :value="item.id === '2' ? props.totalToApproval : item.id === '3' ? props.totalApproval : props.totalRefuse"
          class="item"
        >
          <el-radio-button :label="item.id">
            {{ item.name }}
          </el-radio-button>
        </el-badge>
        <el-radio-button v-else :label="item.id">
          {{ item.name }}
        </el-radio-button>
      </el-radio-group>
    </div>
  </div>
</template>

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

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

<style lang="scss">
.button-box-com {
  .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 0 !important;
  }

  .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0 !important;
  }

  .el-radio-button:first-child:last-child .el-radio-button__inner {
    border-radius: 0 !important;
  }
}
</style>