<!-- 智能模型状态管理页面 -->
<script lang="ts" setup name="DeviceStatusPage">
import infoList from './list.vue'
import delayList from './delay.vue'
import { getDictByCode } from '@/api/system/dict'
const $props = defineProps({
  // 状态 封存 启封 等
  //  封存1  启封2  禁用3  报废4  延用5
  statusType: {
    type: String,
    required: true,
  },
})
export interface menuType {
  name: string
  comp: any
}
const menu = ref<any[]>([
  { name: '全部', com: infoList, status: '0' },
  { name: '已审批', com: infoList, status: '0' },
  { name: '待审批', com: infoList, status: '1' },
  { name: '审批', com: infoList, status: '2' },
  { name: '草稿箱', com: infoList, status: '0' },
  { name: '审批中', com: infoList, status: '0' },
  { name: '已通过', com: infoList, status: '3' },
  { name: '未通过', com: infoList, status: '4' },
  { name: '已取消', com: infoList, status: '4' },
])
const current = ref('')
const com = shallowRef(infoList)
const currentApprovalStatus = ref('0')
const approvalStatusMap = ref({}) as any
const approvalStatusReserveMap = ref({}) as any
// 获取菜单状态
const getMenuStatus = () => {
  getDictByCode('approvalStatus').then((res) => {
    // 审批状态字典 {1：草稿箱}
    res.data.forEach((item: any) => {
      approvalStatusMap.value[`${item.value}`] = item.name
    })
    // 审批状态字典 {草稿箱: 1}
    res.data.forEach((item: any) => {
      approvalStatusReserveMap.value[item.name] = `${item.value}`
    })
    // console.log(approvalStatusReserveMap.value)
  })
}

watch(current, (newValue) => {
  window.sessionStorage.setItem(`deviceStatus-${$props.statusType}`, newValue)
  com.value = menu.value.filter(item => item.name === newValue)[0].com
})

onMounted(async () => {
  await getMenuStatus()
  if ($props.statusType === '5') {
    menu.value.forEach((item) => {
      item.com = delayList
    })
  }
  current.value = ''
  current.value = window.sessionStorage.getItem(`deviceStatus-${$props.statusType}`) || '全部'
  com.value = menu.value.filter(item => item.name === current.value)[0].com
})
</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="com" :status-name="current" :status-type="$props.statusType" />
  </div>
</template>

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

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