<!-- 人员登记详情 -->
<script name="RegisterDetail" lang="ts" setup>
import RegisterBasic from './component/basic.vue'
import RegisterEducation from './component/education.vue'
import RegisterAuthorize from './component/authorize.vue'
import RegisterResume from './component/resume.vue'
import RegisterVerifier from './component/verifier.vue'
import RegisterTrainning from './component/trainning.vue'

// 定义变量
const $route = useRoute()
const $router = useRouter()
const title = ref('')
const operation = ref('')

const radioItems = ref([
  { name: '基本信息', value: 'register-basic' },
  { name: '教育科研', value: 'register-education' },
  { name: '授权信息', value: 'register-authorize' },
  { name: '人员履历', value: 'register-resume' },
  { name: '检定员信息', value: 'register-verifier' },
  { name: '训练情况', value: 'register-trainning' },
])
const current = ref('register-basic')

const staffId = ref('')

// 子组件的引用
const refRegisterBasic = ref()

// 逻辑
// 重置各个子组件的表单内容
const resetFormData = () => {
  // ruleForm.value = {

  // }
}

// 关闭
const resetForm = () => {
  $router.go(-1)
  resetFormData()
}

// 保存
const saveForm = () => {
  switch (current.value) {
    case 'register-basic':
      refRegisterBasic.value.saveBasicForm()
      break
  }
}

// 弹窗初始化
const initDialog = (row: any) => {
  operation.value = row.operation
  switch (row.operation) {
    case 'create' :
      title.value = '人员登记（新增）'
      break
    case 'update':
      title.value = '人员登记（编辑）'
      break
    case 'detail':
      title.value = '人员登记（详情）'
      break
    default:
      title.value = ''
      break
  }
}

const getStaffId = (id: string) => {
  console.log('from child comp...', id)
  staffId.value = id
  console.log(staffId.value)
}

onMounted(() => {
  initDialog($route.query)
})
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page :title="`${title}`">
      <template #btns>
        <el-button v-if="operation !== 'detail'" type="primary" @click="saveForm()">
          保存
        </el-button>
        <el-button type="info" @click="resetForm()">
          关闭
        </el-button>
      </template>

      <el-tabs v-model="current" type="card">
        <el-tab-pane v-for="item in radioItems" :key="item.value" :label="item.name" :name="item.value" />
      </el-tabs>

      <register-basic v-show="current === 'register-basic'" ref="refRegisterBasic" :operation="operation" @after-add-basic="getStaffId" />
      <register-education v-show="current === 'register-education'" ref="register-education-form" :operation="operation" />
      <register-authorize v-show="current === 'register-authorize'" ref="register-education-form" :operation="operation" />
      <register-resume v-show="current === 'register-resume'" ref="register-education-form" :operation="operation" />
      <register-verifier v-show="current === 'register-verifier'" ref="register-education-form" :operation="operation" />
      <register-trainning v-show="current === 'register-trainning'" ref="register-education-form" :operation="operation" />
    </detail-page>
  </app-container>
</template>