<!-- 计量计划 详情页面 -->
<script lang="ts" setup name="PlanDetail">
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import baseInfo from './edit.vue'
import ApprovalDialog from './ApprovalDialog.vue'
import dataList from './dataList.vue'
import { delTextBtn, editBtn, submitBtn } from '@/utils/applyBtns'
import { cancelPlan, delPlan, detailPlan, editPlan, sendNotify, submitPlan } from '@/api/eqpt/measurementPlan/paln'
import { SCHEDULE } from '@/utils/scheduleDict'
const $route = useRoute()
const activeName = ref('基本信息')
const statusName = $route.query.statusName as string
const $router = useRouter()
const 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: '/plan/update',
    query: { ...$route.query },
  })
}
// 删除
const delForm = () => {
  ElMessageBox.confirm(
    '确认删除吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    delPlan(data.id).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
// 取消
const cancelForm = () => {
  ElMessageBox.confirm(
    '确认取消吗?',
    '确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    },
  ).then(() => {
    cancelPlan({ id: data.id, processInstanceId: data.processId, comments: '' }).then((res) => {
      ElMessage.success('操作成功')
      close()
    })
  })
}
// 追加计划
const append = () => {
  $router.push({
    path: '/plan/update',
    query: { ...$route.query, append: 'true' },
  })
}
// 发送送检通知
const send = () => {
  sendNotify(data.id).then((res) => {
    ElMessage.success('发送成功')
  })
}
const processId = ref()
detailPlan(data.id).then((res) => {
  processId.value = res.data.processId
  console.log(processId.value, 'processId.value')
})
const { proxy } = getCurrentInstance() as any
const permUrl = ref({
  agree: '/tested/pmetering/plan/agree',
  reject: '/tested/pmetering/plan/reject',
  send: '/tested/pmetering/plan/send',
  append: '/tested/pmetering/plan/append',
})
</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.send)" type="primary" @click="send">
          发送送检通知
        </el-button> -->
        <el-button v-if="statusName === '全部' && proxy.hasPerm(permUrl.append)" type="primary" @click="append">
          追加计划
        </el-button>
        <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>
    <div v-if="activeName === '基本信息'">
      <base-info class="device-base-info" />
      <data-list />
    </div>

    <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 {
  padding: 0 !important;

  ::v-deep(.tableRef) {
    display: none !important;
  }

  ::v-deep(.base-info-device) {
    padding: 0 !important;

    .header {
      display: none;
    }

    display: none;
  }
}

::v-deep(.device-base-info) {
  padding: 0;
}
</style>