<!-- 设备保养验收单列表 -->
<script lang="ts" setup name="MaintenanceCheckList">
import ListApproval from './components/listApproval.vue' // 全部
import type { IButton, dictType } from './checkList_interface'
import useDictStore from '@/store/modules/dict'
import { getDictByCode } from '@/api/system/dict'
import type { IMenu } from '@/components/buttonBox/buttonBox'

const dictStore = useDictStore()
const buttonsSet: { [key: string]: IButton[] } = {
  全部: [{ name: '查看', type: 'primary' },
    { name: '编辑', type: 'primary', proxy: '/device/maintenance/check/list/edit' },
    // { name: '同意', type: 'primary' },
    // { name: '驳回', type: 'primary' },
    // { name: '拒绝', type: 'danger' },
    { name: '取消', type: 'info' },
    { name: '删除', type: 'danger', proxy: '/device/maintenance/check/list/delete' },
  ],
  草稿箱: [
    { name: '查看', type: 'primary' },
    { name: '编辑', type: 'primary', proxy: '/device/maintenance/check/list/edit' },
    { name: '提交', type: 'primary' },
    { name: '删除', type: 'danger', proxy: '/device/maintenance/check/list/delete' },
  ],
  待审批: [
    { name: '查看', type: 'primary' },
    { name: '同意', type: 'primary' },
    { name: '驳回', type: 'primary' },
    { name: '拒绝', type: 'danger' },
    { name: '删除', type: 'danger', proxy: '/device/maintenance/check/list/delete' },
  ],
  审批中: [
    { name: '查看', type: 'primary' },
    { name: '取消', type: 'primary' },
  ],
  已通过: [
    { name: '查看', type: 'primary' },
    { name: '删除', type: 'danger', proxy: '/device/maintenance/check/list/delete' },
  ],
  未通过: [
    { name: '查看', type: 'primary' },
    { name: '删除', type: 'danger', proxy: '/device/maintenance/check/list/delete' },
  ],
  已取消: [
    { name: '查看', type: 'primary' },
    { name: '编辑', type: 'primary', proxy: '/device/maintenance/check/list/edit' },
    { name: '提交', type: 'primary' },
    { name: '删除', type: 'danger', proxy: '/device/maintenance/check/list/delete' },
  ],

}
const menus = ref<IMenu[]>([]) // 右上角审批状态按钮组合
// 当前tab
const currentTab = ref('全部')
// 当前审批状态
const currentApprovalStatus = ref('0')
// 当前需要显示的按钮列表
const currentButtons = ref<IButton[]>([])
currentButtons.value = buttonsSet['全部']
// 审批类型字典
const approvalStatusList = dictStore.getApprovalStatus
// 审批类型字典
const approvalStatusReserveMap = ref({}) as any// 审批状态字典{草稿箱: 1}

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
  }
}
// 获取字典值
async function getDict() {
  // 审批状态
  const res = await getDictByCode('approvalStatus')

  // 审批状态字典 {草稿箱: 1}
  res.data.forEach((item: any) => {
    approvalStatusReserveMap.value[item.name] = `${item.value}`
  })

  // 制作右上角的菜单
  res.data.forEach((item: dictType) => {
    if (item.name === '全部' || item.name === '草稿箱'
      || item.name === '待审批' || item.name === '审批中'
      || item.name === '已通过' || item.name === '未通过'
      || item.name === '已取消') {
      menus.value.push({
        name: item.name,
        value: `${item.value}`,
      })
    }
  })
}
// 组件销毁时存入自己的审批类型 下次进去还是原来的审批类型
onUnmounted(() => {
  // sessionStorage.setItem('maintenceCheckListMenu', currentTab.value)
})
// 挂载的时候找到之前存过的审批类型
onMounted(async () => {
  await getDict()
  currentTab.value = window.sessionStorage.getItem('maintenceCheckListMenu') || '全部'
  currentApprovalStatus.value = approvalStatusReserveMap.value[currentTab.value]
})

watch(currentTab, (newValue) => {
  currentApprovalStatus.value = approvalStatusReserveMap.value[newValue]
  window.sessionStorage.setItem('maintenceCheckListMenu', newValue)
  currentButtons.value = buttonsSet[newValue]
}, { deep: true })
</script>

<template>
  <div class="container">
    <div class="btns">
      <!-- 三级菜单 -->
      <el-radio-group v-model="currentTab">
        <el-radio-button v-for="item in menus" :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: 69px;
    right: 15px;
    z-index: 999;
  }
}
</style>