<!-- 设备基本信息详情 -->
<script lang="ts" setup name="addNotice">
import { getApprovalRecord } from '@/api/eqpt/device/info'
import baseInfo from '@/views/tested/device/info/components/edit.vue'
import reportTable from '@/views/tested/device/info/components/reportTable.vue'
import statusTable from '@/views/tested/device/info/components/statusTable.vue'
import roamTable from '@/views/tested/device/info/components/roamTable.vue'
const activeName = ref('基本信息')
const $router = useRouter()
const $route = useRoute()
const status = ref('')
// 获取审批记录
const approvalList = ref()
const fetchData = () => {
  const data = JSON.parse($route.query.row as string)
  const statusName = $route.query.statusName as string
  status.value = statusName
  if (statusName !== '全部') {
    getApprovalRecord(data.equipmentId).then((res) => {
      approvalList.value = res.data
    })
  }
}
fetchData()
</script>

<template>
  <app-container style="overflow: hidden;">
    <detail-page title="设备基本信息-详情">
      <template #btns>
        <el-button type="info" @click="$router.back()">
          关闭
        </el-button>
      </template>
    </detail-page>
    <detail-block-com>
      <el-tabs v-model="activeName" type="card" class="demo-tabs">
        <el-tab-pane label="基本信息" name="基本信息">
          <base-info class="device-base-info" />
        </el-tab-pane>
        <el-tab-pane label="证书报告" name="证书报告">
          <report-table :data="[]" status="detail" />
        </el-tab-pane>
        <el-tab-pane label="状态变更记录" name="状态变更记录">
          <status-table :data="[]" status="detail" />
        </el-tab-pane>
        <el-tab-pane label="设备流转日志" name="设备流转日志">
          <roam-table :data="[]" status="detail" />
        </el-tab-pane>
        <el-tab-pane v-if="status !== '全部'" label="审批详情" name="审批详情">
          <approval-record :approval-record-data="approvalList" />
        </el-tab-pane>
      </el-tabs>
    </detail-block-com>
  </app-container>
</template>

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

  // ::v-deep(.header) {
  //   display: none;
  // }
}

.demo-tabs {
  ::v-deep(.detail-main) {
    .header {
      display: none;
    }
  }
}
</style>