<!-- 标准装置台账信息详情 -->
<script name="StandardBookInfoDetail" lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import bookBasic from './components/basic.vue'
import bookStandard from './components/standard.vue'
import bookPerson from './components/person.vue'
import bookProject from './components/project.vue'
import bookGrade from './components/grade.vue'
import bookCertificate from './components/certificate.vue'
import bookCheckRecord from './components/checkRecord.vue'
import bookChangeRecord from './components/changeRecord.vue'
import { approvalDelete, cancelApproval, refuseApproval } from '@/api/equipment/standard/book'
import ApprovalDialog from '@/components/Approval/ApprovalDialog.vue'

const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
}// 页面类型字典
const $router = useRouter() // 路由实例
const loading = ref(false) // 表单加载状态
const pageType = ref('add') // 页面类型: add, edit, detail
const infoId = ref('') // id
const bookBasicRef = ref() // 子组件--基本信息ref
const approvalStatusName = ref('') // 审批状态名称
const showRefuseEditButton = ref(true) // 是否展示未通过编辑按钮
const standardNo = ref('') // 标准装置编号
const standardName = ref('') // 标准装置名称
const showSubmitButton = ref(false) // 控制提交按钮是否显示
// -------------------------------------标签--------------------------------------------------
const radioMenus = ref([ // 标签内容
  { name: '基本信息', value: 'book-basic' },
  { name: '标准配套设备', value: 'book-standard' },
  { name: '计量人员', value: 'book-person' },
  { name: '开展的检定或校准项目', value: 'book-project' },
  { name: '量值溯源与传递等级', value: 'book-grade' },
  { name: '标准证书', value: 'book-certificate' },
  { name: '核查记录', value: 'book-check-record' },
  { name: '技术指标修改记录', value: 'book-change-record' },
  { name: '审批记录', value: 'book-approval-record' },
])
const current = ref('book-basic') // 选择的tab 默认基本信息
const bookPersonRef = ref() // 计量人员组件ref
const bookStandardRef = ref() // 标准配套设备组件ref
// -----------------------------------路由参数-------------------------------------------------
// 从路由中获取页面类型参数
const $route = useRoute()
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  if ($route.params.id) {
    infoId.value = $route.params.id as string
  }
}
// ---------------------------------------------审批--------------------------------------
const taskId = ref('') // 任务id，用于同意、驳回、拒绝审批
const processId = ref('') // 流程实例id
const approvalDialog = ref() // 审批组件ref
const showApprovalButton = ref(true) // 是否展示审批按钮

// 审批结束回调
const approvalSuccess = () => {
  showApprovalButton.value = false
}
// 审批
const handleApprove = (val: string) => {
  if (val === '取消') {
    const params = {
      processInstanceId: processId.value!,
      comments: '',
      id: infoId.value,
    }
    ElMessageBox.confirm(
      '确认取消该审批吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )
      .then(() => {
        cancelApproval(params).then((res) => {
          ElMessage({
            type: 'success',
            message: '已取消',
          })
          showApprovalButton.value = false
        })
      })
  }
  else if (val === '同意') {
    approvalDialog.value.initDialog('agree', taskId.value)
  }
  else if (val === '拒绝') {
    approvalDialog.value.initDialog('refuse', taskId.value, infoId.value)
  }
}

// 拒绝
const refuse = (comments: string, taskId: string, id: string) => {
  const params = {
    id,
    taskId, // 任务id
    comments, // 拒绝原因
  }
  refuseApproval(params).then((res) => {
    ElMessage({
      type: 'success',
      message: '已拒绝',
    })
    showApprovalButton.value = false
  })
}
// ---------------------------------右上角按钮(操作表单)------------------------------------------
// 点击关闭
const close = () => {
  $router.back()
}
// 点击rfid标签绑定
const bind = () => {
  ElMessage.info('敬请期待')
}
// 点击提交
const handleSubmit = () => {
  bookBasicRef.value.submitForm()
}
// 提交成功
const submitSuccess = (standardNoParam: string, id: string, standardNameParam?: string) => {
  pageType.value = 'detail' // 详情模式-不可编辑
  infoId.value = id // id
  standardName.value = standardNameParam! // 标准装置名称
  standardNo.value = standardNoParam // 设备编号
  showRefuseEditButton.value = false // 隐藏未通过编辑按钮
}
// 点击保存
const saveForm = () => {
  switch (current.value) {
    case 'book-basic': // 基本信息
      bookBasicRef.value.saveForm()
      break
    case 'book-person': // 计量人员
      bookPersonRef.value.savePerson()
      break
    case 'book-standard': // 标准配套设备
      bookStandardRef.value.saveEquipment()
      break
  }
}
// 新建保存成功
const addSuccess = (standardNoParam: string, id: string, standardNameParam?: string) => {
  approvalStatusName.value = '草稿箱'
  standardNo.value = standardNoParam// 设备编号
  infoId.value = id // id
  standardName.value = standardNameParam! // 标准装置名称
  showSubmitButton.value = true // 保存成功显示提交按钮
}

// 保存成功
const saveSuccess = () => {
  showSubmitButton.value = true // 保存成功显示提交按钮
}
// 点击编辑
const handleEdit = () => {
  pageType.value = 'edit' // 编辑模式
}

// 点击删除
const del = () => {
  approvalDelete({ id: infoId.value, taskId: taskId.value }).then(() => {
    ElMessage.success('已删除')
    close()
  })
}

// -----------------------------------------钩子--------------------------------------------------
watch(() => approvalStatusName.value, (val) => {
  if (val === '全部' || val === '草稿箱' || pageType.value === 'add') { // 全部草稿箱把审批详情删了
    if (radioMenus.value[radioMenus.value.length - 1].value === 'book-approval-record') {
      radioMenus.value.pop()
    }
    console.log(radioMenus.value)
  }
  else { // 非全部和草稿箱把审批详情加上
    if (radioMenus.value[radioMenus.value.length - 1].value !== 'book-approval-record') {
      radioMenus.value.push({ name: '审批详情', value: 'book-approval-record' })
    }
  }
})
onMounted(() => {
  approvalStatusName.value = $route.query.approvalStatusName as string // 审批状态名称
  standardNo.value = $route.query.standardNo as string // 标准装置编号
  standardName.value = $route.query.standardName as string // 标准装置名称
  taskId.value = $route.query.taskId as string // 任务id
  processId.value = $route.query.processId as string // 流程实例id
  console.log('ppp', approvalStatusName.value)
})

onBeforeUnmount(() => {
  window.sessionStorage.setItem('standardGetInfoForm', '')
})
</script>

<template>
  <app-container>
    <detail-page v-loading="loading" :title="`标准装置台账信息（${textMap[pageType]}）`">
      <template #btns>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '待审批' && showApprovalButton" type="primary" @click="handleApprove('同意')">
          同意
        </el-button>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '待审批' && showApprovalButton" type="danger" @click="handleApprove('拒绝')">
          拒绝
        </el-button>
        <el-button v-if="pageType === 'detail' && approvalStatusName === '审批中' && showApprovalButton" type="info" @click="handleApprove('取消')">
          取消
        </el-button>
        <el-button
          v-if="pageType === 'add' || (pageType === 'edit' && approvalStatusName !== '未通过' && approvalStatusName !== '已取消')"
          type="primary"
          :disabled="!showSubmitButton"
          @click="handleSubmit"
        >
          提交
        </el-button>
        <el-button v-if="approvalStatusName !== '已审批' && pageType === 'detail' && approvalStatusName === '未通过' && showRefuseEditButton" type="primary" @click="handleEdit">
          编辑
        </el-button>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="saveForm">
          保存
        </el-button>
        <el-button v-if="approvalStatusName === '已取消'" type="danger" @click="del">
          删除
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-radio-group v-model="current">
        <el-radio-button v-for="item in radioMenus" :key="item.value" :label="item.value" :disabled="!infoId">
          {{ item.name }}
        </el-radio-button>
      </el-radio-group>
      <!-- <el-tabs v-model="current" type="card" @tab-change="clickTab">
        <el-tab-pane v-for="item in tabMenus" :key="item.value" :label="item.name" :name="item.value" />
      </el-tabs> -->
    </detail-page>
    <!-- 基本信息 -->
    <book-basic
      v-if="current === 'book-basic'"
      :id="infoId" ref="bookBasicRef"
      :page-type="pageType"
      :approval-status-name="approvalStatusName"
      @submit-success="submitSuccess"
      @add-success="addSuccess"
      @save-success="saveSuccess"
    />
    <!-- 标准配套设备 -->
    <book-standard v-if="current === 'book-standard'" ref="bookStandardRef" :standard-name="standardName" :standard-id="infoId" :page-type="pageType" />
    <!-- 计量人员 -->
    <book-person v-if="current === 'book-person'" ref="bookPersonRef" :standard-id="infoId" :page-type="pageType" />
    <!-- 开展的检定或校准项目 -->
    <book-project v-if="current === 'book-project'" :page-type="pageType" />
    <!-- 量值溯源与传递等级 -->
    <book-grade v-if="current === 'book-grade'" :page-type="pageType" />
    <!-- 标准证书 -->
    <book-certificate v-if="current === 'book-certificate'" :page-type="pageType" />
    <!-- 核查记录 -->
    <book-check-record v-if="current === 'book-check-record'" :page-type="pageType" />
    <!-- 技术指标修改记录 -->
    <book-change-record v-if="current === 'book-change-record'" :standard-id="infoId" :page-type="pageType" />
    <!-- 审批详情 -->
    <approval-record-table v-if="current === 'book-approval-record'" :process-id="processId" />
    <!-- 审批弹窗 -->
    <approval-dialog ref="approvalDialog" @on-success="approvalSuccess" @refuse="refuse" />
  </app-container>
</template>