<!-- 状态管理公共模板 -->
<script lang="ts" setup name="stateMangeTemplate">
import all from './status/all.vue' // 全部
import cancel from './status/cancel.vue' // 已取消
import draft from './status/drafts.vue' // 草稿箱
import inApproval from './status/inApproval.vue' // 审批中
import passed from './status/passed.vue'// 已通过
import pending from './status/pending.vue' // 待审批
import unPassed from './status/unPassed.vue' // 未通过
import { getDictByCode } from '@/api/system/dict'
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  authority: {
    type: String,
    required: true,
  },
  applyType: {
    type: String, // 设备申请类型
    default: '',
  },
  formCode: {
    type: String, // 表单formCode
    default: '',
  },
})
interface menuType {
  name: string
  comp?: any
  id?: string
  value?: string
}
const menu = shallowRef<menuType[]>([
  { name: '全部', comp: all },
  { name: '草稿箱', comp: draft },
  { name: '待审批', comp: pending },
  { name: '审批中', comp: inApproval },
  { name: '已通过', comp: passed },
  { name: '未通过', comp: unPassed },
  { name: '已取消', comp: cancel },
])
const statusList = ref<menuType[]>([])
const type = ref('') // 当前状态的value
const current = ref('全部')
const currentComp = shallowRef(all)
watch(current, async (newValue) => {
  currentComp.value = menu.value.filter(item => item.name === newValue)[0].comp
  if (statusList.value.length > 0) {
    type.value = statusList.value.filter(item => item.name === newValue)[0].value || ''
  }
  else {
    getDictByCode('approvalStatus').then((res) => {
      statusList.value = (res.data as menuType[])
      type.value = res.data.filter((item: menuType) => item.name === newValue)[0].value
    })
  }
}, {
  immediate: true,
  deep: true,
})
onUnmounted(() => {
  sessionStorage.setItem(`${props.authority}Menu`, current.value)
})
onMounted(() => {
  current.value = sessionStorage.getItem(`${props.authority}Menu`) || '全部'
  sessionStorage.getItem(`${props.authority}Menu`) ? sessionStorage.removeItem(`${props.authority}Menu`) : ''
})
</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="currentComp" :title="current" :name="props.name" :type="type" :apply-type="applyType" :form-code="props.formCode" />
  </div>
</template>

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

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