<script lang="ts" setup name="addNotice">
import { ElMessage, ElMessageBox } from 'element-plus'
import baseInfo from './edit.vue'
import ApprovalDialog from './ApprovalDialog.vue'
import { delTextBtn, editBtn } from '@/utils/applyBtns'
import { cancelApply, delApply, detailApply } from '@/api/eqpt/measurementPlan/early'
const $route = useRoute()
const activeName = ref('基本信息')
const statusName = $route.query.statusName as string
const $router = useRouter()
let data = JSON.parse($route.query.row as string)
const close = () => {
  $router.back()
}
// 审批
const approvalDialogRef = ref()
const apply = (type: string) => {
  approvalDialogRef.value.initDialog(type, JSON.parse($route.query.row as string).taskId, data.processId, data.id)
}
// 编辑
const editForm = () => {
  $router.push({
    path: `/${$route.query.approvalType === '0' ? 'ealy' : 'delay'}/update`,
    query: { ...$route.query },
  })
}
// 删除
const delForm = () => {
  ElMessageBox.confirm(
    '确认删除该申请吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    const row = data.value
    delApply({ id: row.id }).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
// 取消
const cancelForm = () => {
  ElMessageBox.confirm(
    '确认取消此申请吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    const row = data.value
    cancelApply({ id: row.id, processInstanceId: row.processId, comments: '' }).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
const processId = ref()
detailApply(data.id).then((res) => {
  data = res.data
  processId.value = res.data.processId
})
const { proxy } = getCurrentInstance() as any
const permUrl = ref({
  agree: `/tested/pmetering/${$route.query.approvalType === '0' ? 'ealy' : 'delay'}/agree`,
  reject: `/tested/pmetering/${$route.query.approvalType === '0' ? 'ealy' : 'delay'}/reject`,
})
</script>

<template>
  <app-container style="overflow: hidden;">
    <approval-dialog ref="approvalDialogRef" @on-success="() => { $router.back() }" />
    <detail-page title="送检申请-详情">
      <template #btns>
        <el-button v-if="statusName === '待审批' && proxy.hasPerm(permUrl.agree)" type="primary" @click="apply('agree')">
          同意
        </el-button>
        <el-button v-if="statusName === '待审批' && proxy.hasPerm(permUrl.reject)" type="primary" @click="apply('refuse')">
          拒绝
        </el-button>
        <el-button v-if="editBtn(statusName, 'detail')" type="primary" @click="editForm()">
          编辑
        </el-button>
        <el-button v-if="delTextBtn(statusName)" type="info" @click="delForm()">
          删除
        </el-button>
        <el-button v-if="statusName === '审批中'" type="info" @click="cancelForm()">
          取消
        </el-button>
        <el-button type="info" @click="$router.back()">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com>
      <el-radio-group v-model="activeName">
        <el-radio-button label="基本信息">
          基本信息
        </el-radio-button>
        <el-radio-button label="审批详情">
          审批详情
        </el-radio-button>
      </el-radio-group>
    </detail-block-com>
    <base-info v-if="activeName === '基本信息'" class="device-base-info" style="padding: 0;" />
    <approval-record-table v-if="activeName === '审批详情'" :process-id="processId" />
    <!-- <report-table v-if="activeName === '审批详情'" :data="[]" status="detail" /> -->
  </app-container>
</template>

<style lang="scss" scoped>
// 样式
.device-base-info {
  ::v-deep(.base-info-device) {
    .header {
      display: none;
    }

    display: none;
  }

  ::v-deep(.app-container) {
    padding: 0 !important;
  }
}
</style>