<!-- 授权代理委托书详情 -->
<script name="OrderDetail" lang="ts" setup>
import CustomerInfoBasic from './basic.vue'
import CustomerInfoStaff from './staff.vue'

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

const radioItems = ref([
  { name: '基本信息', value: 'customer-basic' },
  { name: '委托方人员', value: 'customer-staff' },
  { name: '任务单信息', value: 'customer-mission' },
  { name: '证书报告', value: 'customer-report' },
  { name: '审批详情', value: 'customer-approval' },
])

const current = ref('')
const currentLabel = ref('')

const customerId = ref('')

// 子组件
const refCustomerBasic = ref()

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

// 保存
const saveDraft = () => {
  refCustomerBasic.value.saveBasicForm()
}

// 提交
const submitFlow = () => {
  refCustomerBasic.value.submitBasicForm()
}

const radioChangeHandler = (newVal: string | number | boolean) => {
  const radioTarget = radioItems.value.filter(item => item.name === newVal)
  if (radioTarget.length > 0) {
    currentLabel.value = radioTarget[0].name
    current.value = radioTarget[0].value
  }
  else {
    currentLabel.value = radioItems.value[0].name
    current.value = radioItems.value[0].value
  }
}

const initDialog = (params: any) => {
  operation.value = params.type

  current.value = radioItems.value[0].value
  currentLabel.value = radioItems.value[0].name

  switch (params.type) {
    case 'create' :
      title.value = '委托方名录（新增）'
      break
    case 'update':
      title.value = '委托方名录（编辑）'
      customerId.value = params.id

      // 调用子组件的方法
      // refRegisterBasic.value.getStaffBasicById(staffId.value)
      break
    case 'detail':
      title.value = '委托方名录（详情）'
      customerId.value = params.id

      // 调用子组件的方法
      // refRegisterBasic.value.getStaffBasicById(staffId.value)

      break
    default:
      title.value = ''
      break
  }
}

const saveDraftHandler = (id: string) => {
  customerId.value = id
  console.log(customerId.value, '=====')
}

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

<template>
  <app-container>
    <detail-page :title="`${title}`">
      <template #btns>
        <el-button v-if="operation !== 'detail'" :disabled="customerId === ''" type="primary" @click="submitFlow()">
          提交
        </el-button>
        <el-button v-if="operation !== 'detail'" type="primary" @click="saveDraft()">
          保存
        </el-button>
        <el-button type="info" @click="resetForm()">
          关闭
        </el-button>
      </template>

      <el-radio-group v-model="currentLabel" @change="radioChangeHandler">
        <el-radio-button v-for="item in radioItems" :key="item.value" :label="item.name" />
      </el-radio-group>

      <customer-info-basic
        v-show="current === 'customer-basic'" ref="refCustomerBasic"
        :operation="operation"
        @after-save-draft="saveDraftHandler"
      />

      <customer-info-staff
        v-show="current === 'customer-staff'" ref="refCustomerStaff"
        :operation="operation"
      />
    </detail-page>
  </app-container>
</template>