<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' // 取消
import ListApproval from './components/listApproval.vue' // 全部
import useDictStore from '@/store/modules/dict'
export interface menuType {
  name: string
  value: string
}
export interface IButton {
  name: string
  type: '' | 'default' | 'text' | 'primary' | 'success' | 'warning' | 'info' | 'danger'
  permission?: string
}
const dictStore = useDictStore()
const buttonsSet: { [key: string]: IButton[] } = {
  全部: [{ name: '查看', type: 'primary' },
    { name: '同意', type: 'primary' },
    { name: '驳回', type: 'primary' },
    { name: '拒绝', type: 'danger' },
    { name: '取消', type: 'info' },
    { name: '删除', type: 'danger' },
  ],
  草稿箱: [
    { name: '查看', type: 'primary' },
    { name: '编辑', type: 'primary' },
    { name: '提交', type: 'primary' },
    { name: '删除', type: 'danger' },
  ],
  待审批: [
    { name: '查看', type: 'primary' },
    { name: '同意', type: 'primary' },
    { name: '驳回', type: 'primary' },
    { name: '拒绝', type: 'danger' },
    { name: '删除', type: 'danger' },
  ],
  审批中: [
    { name: '查看', type: 'primary' },
  ],
  已通过: [
    { name: '查看', type: 'primary' },
    { name: '删除', type: 'danger' },
  ],
  未通过: [
    { name: '查看', type: 'primary' },
    { name: '删除', type: 'danger' },
  ],
  已取消: [
    { name: '查看', type: 'primary' },
    { name: '删除', type: 'danger' },
  ],

}
const menu = ref<menuType[]>([
  { name: '全部', value: '0' },
  { name: '草稿箱', value: '1' },
  { name: '待审批', value: '2' },
  { name: '审批中', value: '3' },
  { name: '已通过', value: '4' },
  { name: '未通过', value: '5' },
  { name: '已取消', value: '6' },
])
// 当前tab
const currentTab = ref('全部')
// 当前审批状态
const currentApprovalStatus = ref('0')
// 当前需要显示的按钮列表
const currentButtons = ref<IButton[]>([])
currentButtons.value = buttonsSet['全部']
// 审批类型字典
const approvalStatusList = dictStore.getApprovalStatus

const $route = useRoute()
if ($route.query && $route.query.type) {
  const currentMenu = menus.value.find(item => item.value == $route.query.type)
  if (currentMenu) {
    currentTab.value = currentMenu?.name
  }
}
watch(currentTab, (newValue) => {
  currentApprovalStatus.value = approvalStatusList[newValue]
  currentButtons.value = buttonsSet[newValue]
}, { deep: true, immediate: true })

// const current = ref('全部')
// const currentComp = shallowRef(All)
// watch(current, (newValue) => {
//   currentComp.value = menu.value.filter(item => item.name === newValue)[0].comp
// })
// // 控制顶部tap栏是否禁用
// const disabled = ref(false)
// const setData = (newIsShow: any) => {
//   if (newIsShow === false) {
//     disabled.value = true
//   }
//   else {
//     disabled.value = false
//   }
// }
</script>

<template>
  <div class="container">
    <div class="btns">
      <!-- 三级菜单 -->
      <el-radio-group v-model="currentTab">
        <el-radio-button v-for="item in menu" :key="item.name" :label="item.name">
          {{ item.name }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <!-- 展示区域 -->
    <list-approval :name="currentTab" :status="currentApprovalStatus" :buttons="currentButtons" />
  </div>
</template>

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

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